博客列表 >第三课:CSS的解释与选择器的应用

第三课:CSS的解释与选择器的应用

大林
大林原创
2019年10月31日 18:03:25671浏览

一、元素按显示方式分为哪几种?


元素按显示方式可分为块级元素、行内元素、行内块元素

块级元素:
1:独自占据一行
2:可以设置有效宽高
3:当发生嵌套的时候,如果没有给子元素设置宽高,子元素的宽度和父元素一样宽
行内元素:
1:多个元素在一行内显示
2:无法设置有限宽高
3:宽度由容器里的内容决定
行内块元素
1:多个行内块在一行上显示
2:可以设置有效宽高


二、CSS是什么? 它的主要作用是什么?  

CSS: 层叠样式表,CSS是用来设置页面中的元素美化样式和布局网页的

三、什么是CSS选择器,它的样式声明是哪二部分组成?

每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式声明

}  

无标题.jpg                             

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

四、举例演示CSS简单选择器(全部)常用的简单选择器有5种:

  1 元素选择器: `div {...}`

  2属性选择器: `tag[property...]`

  3 类/class选择器: `.active {...}`

 4 ID选择器: `#main {...}`

 5群组选择器: `p, .active, div {...}`

6通配符选择器: `*`, 表示全部元素, 通常用在上下文选择器

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单选择器</title>
    <style>
        /*下面就是元素选择器直接选择p元素*/
        p{
        color: aqua;
        }
        /*下面就是属性选择器,*/
        p[class]{
            color: #2d6a88;
        }
        p[id]{
            color: blue;
        }
        /*下面就是class选择器*/
        .brown{
            background: red;
        }
        /*下面就是群组选择器*/
        .red,h2{
            background: aqua;
        }
        /*通配符选择器*/
        html{
            font-size:12px;
        }
        body * {
            font-size: 2rem;
        }
    </style>
</head>
<body>
<p>制度优势如何转化为治理效能?</p>
<p class="red">2020考研报名今将截止 考研热为何连年升温?</p>
<p class="bule" id="bule">多起热点事件中无辜者被误伤 遭遇网络暴力如何维权</p>
<p class="brown">林郑:***须停止暴力再重振经济</p>
<p>菲律宾棉兰老岛发生6.8级地震 震源深度22公里</p>

<h2>细节曝光!五角大楼展示消灭巴格达迪行动视频和图片</h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

简单选择器.jpg


五、举例演示CSS上下文选择器(全部)* 所谓上下文, 是指元素之间的结构关系,如层级,包含等,

主要有四个选择器

通常也叫结构选择器
  * 后代选择器: `空格`, 如 `div p`, `body *`
  * 父子选择器: `>`, 如 `div + h2`
  * 同级相邻选择器: `+`, 如 `li.red + li`
  * 同级所有选择器: `~`, 如 `li.red ~ li`

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器/结构选择器</title>
    <link rel="stylesheet" href="CSS/style1.css">
    <link rel="stylesheet" href="CSS/style2.css">
    <style>
    /*后代选择器*/
section h2{
    color: green;
}
/*父子选择器*/
section>h2{
    color: #3a87ad;
}
/*同级选择器*/
#item +h2{
    color: bisque;
}
/*同级所有选择器*/
#item~*{
    background: blue;
}
    </style>    
</head>
<body>
<section>
    <div>
        <h2 id="item">美防长这套把戏被耿爽揭穿后 ***紧跟补刀</h2>
        <h2>***记者被追问"是不是中国人" 不敢回答</h2>
        <h2>***又抛出一部恶法 在中国背后扎刀子</h2>
    </div>
    <h2>她这次是真的被骂怕了吧</h2>
    <h2>中国足球坏就坏在将就1</h2>
</section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 上下结构选择器.jpg
六、举例演示常用CSS结构伪类选择器(不少于四种)

结构伪类: 根据子元素的位置特征进行选择.
结构性伪类通常用于后代选择器中, 在父元素上调用,选择子元素集合中匹配的元素
1、非限定类型:是指只关注子元素的位置, 忽略子元素类型(当然也可以指定类型)nth-child(n)是最主要的非限定类型,其它四个只是它的某种行为快捷方式罢了:nth-child(n): 匹配父元素中指定索引的子元素:first-child: 匹配父元素中的第一个子元素:last-child: 匹配父元素中的最后一个子元素:nth-last-child(n): 匹配从父元素中倒数选择子元素:only-child: 匹配父元素中的唯一子元素


2、限定类型:指既关注子元素的位置, 也关注子元素类型(当然也可以忽略类型)selector:nth-of-type(n)是最主要的限定类型,其它四个只是它的快捷方式·         selector:nth-of-type(n): 匹配父元素中指定索引的子元素·        selector:first-of-type: 匹配父元素中的第一个子元素·         selector:last-of-type: 匹配父元素中的最后一个子元素·         selector:nth-last-of-type(n): 匹配从父元素中倒数选择子元素·         selector:only-of-type: 匹配父元素中的唯一子元素·         非限定到限定的转换规则, 将child 用 of-type替换即可·         常规语法: [selector]::nth-of-type(n)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
    /*非限定类型的伪类*/
ul>:nth-child(2){                   /*所有ul下的第二个子元素*/
    background: green;
}
ul:first-child > :nth-child(2){         /*第一层ul下的第二个子元素*/
    color: red;
}
ul>:last-child {                    /*所有ul下最后一个子元素*/
    background: aqua;
}
        /*第一层ul下最后一个元素下含p的元素*/
        /*n从0开始取值,n+1=1,1+1=2以此类推*/
ul:first-child > :last-child > p:nth-child  (n+1) {
    background:yellow
}


/*限定类型*/
/*选定第一个ul下最后一个li下面包含p的元素*/
ul:first-of-type > :last-of-type > p:nth-of-type(n+1) {
    color: blue;
}
/*选定第一个ul下第一层里面的第一个li*/
ul:first-of-type > :first-of-type li:first-of-type{
    background: darkorchid;
}
    </style>
</head>
<body>
<ul>
    <li>
        <h2> 蔬菜</h2>
             <ul>
                <li>大萝卜</li>
                <li>西红柿</li>
                <li>大白菜</li>
            </ul>
    </li>
    <li>
        <h2> 动物 </h2>
            <ul>
                <li>白马</li>
                <li>狮子</li>
                <li>老虎</li>
            </ul>
    </li>
    <li>
        <h2>家具</h2>
        <p>今天很开心</p>
            <ul>
                <li>灯泡</li>
                <li>电视</li>
                <li>冰箱</li>
            </ul>
        <p>测试</p>
    </li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

结构伪类选择器.jpg

七、举例演示常用CSS表单伪类选择器(不少于三种)

* `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
: `:read-only`: 选择只读表单元素 


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类</title>
    <style>
    
input:enabled{                      /*enabled是每个启用的 `<input>` 元素*/
    background: darkorchid;
}
input:disabled {                    /*disabled是每个禁用的 `<input>` 元素*/
    background: red;
}
input:required {                  /*选包含required的选项*/
    background-color: yellow;
}
    
    </style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required placeholder="example@email.com">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required placeholder="不得少于6位">
    </p>
    <p>
        <label for="save">保存密码:</label>
        <input type="checkbox" name="save" id="save" checked readonly >

    </p>
        <label for="save_time">保存日期:</label>
        <select name="save_time" id="save_time">
            <option value="7" selected>7天</option>
            <option value="30">30天</option>
        </select>

    <p>
        <label for="warning">警告!</label>
        <input type="text" id="warning" value="一天内只允许登录3次" style="border:none" disabled>
    </p>
</form>
<script>
    document.querySelector('[type="hidden"]').value = new Date().getTime()
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 表单伪类.jpg

总结:

         html的页面的美化依靠CSS的调整来实现,选择器能准确定位改优化的元素与属性,需要认真学习

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议