HTML5 -03- CSS3-元素相关知识

本文链接：https://blog.csdn.net/lidongliangzhicai/article/details/95061658

本文详细介绍了HTML5-CSS3中元素相关知识，包括属性选择器、兄弟选择器、伪类选择器和伪元素选择器的用法，并提到了颜色、文本阴影、盒模型、边框圆角和边框阴影等新特性。伪类如`:first-child`、`:last-child`和`:nth-child(n)`用于选择特定位置的元素，伪元素如`::before`、`::after`则用于在元素内容前后插入内容。此外，文章还讲解了RGBA和HSLA颜色表示方式，以及`text-shadow`和`box-shadow`的使用。

摘要由CSDN通过智能技术生成

3 HTML5-CSS3-元素相关知识

3.1 属性选择器

属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素

    1)E[attribute] 表示存在attr属性即可；
            div[class]
    2)E[attr=val] 表示属性值完全等于val；
            div[class=mydemo]
    3)E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
            div[class*=mydemo]
    4)E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
            div[class^=mydemo]
    5)E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
            div[class$=demos]

注：下划线：text-decoration:underline
注：字体大小：font-size:30px

3.2 兄弟选择器

+：获取当前元素的相邻的满足条件的元素

~：获取当前元素的满足条件的兄弟元素

	/*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素
	1.相邻
	2.必须是指定类型的元素*/
	.first + li{
		color: blue;
	}

	/*下面样式查找添加了.first样式的元素的所有兄弟li元素
	1.必须是指定类型的元素*/
	.first ~ li{
		color: pink;
	}

3.3 伪类选择器

以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类。因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类

E:first-child:查找E这个元素的父元素的第一个子元素E
E:last-child:最后一个子元素
E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
E:nth-child(even): 所有的偶数
E:nth-child(odd): 所有的奇数
E:nth-of-type(n):指定类型
E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
E:target 结合锚点进行使用，处于当前锚点的元素会被选中

    /*相对于父元素的结构伪类*/
    /*E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型*/
    /*下面这句样式查找：li的父元素中的第一个li元素
      1.相对于当前指定元素的父元素
      2.查找的类型必须是指定的类型*/
    li:first-child{
        color: red;
    }

    /*查找的时候限制类型  first-of-type*/
    /*1.也是相对于父元素
      2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/
    li:first-of-type{
        color: red;
    }
     
    /*E:target:可以为锚点目标元素添加样式，
      当目标元素被触发为当前锚链接的目标时，调用此伪类样式*/
        h2:target{
            color: red;
        }

3.4 伪元素选择器

在dom树中找不到元素，但是可以看到元素的效果。

3.4.1 E::before、E::after

是一个行内元素，需要转换成块:display:block float:** position:
必须添加content,哪怕不设置内容，也需要content:””
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理
E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式
E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式

3.4.2 E::first-letter、E::first-line、E::selection

E::first-letter文本的第一个字母或字(不是词组) 首字下沉
E::first-line 文本第一行
E::selection 可改变选中文本的样式

     <style>
        /*获取第一个字符：实现首字下沉*/
        p::first-letter{
            color: red;
            font-size: 30px;
            float: left;/*文本环绕*/
        }

        /*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/
        p::first-line{
            text-decoration: underline;
        }

        /*设置当前选中内容的样式*/
        p::selection{
            background-color: pink;
            color: red;
            /*它只能设置显示的样式，而不能设置内容大小*/
            /*font-size: 30px;*/
        }
    </style>

4 HTML5-CSS3-颜色相关知识

HTML5中添加了一些新的颜色的表示方式

        /*rgb(红，绿，蓝)  128以上为主色*/
        /*background-color: rgb(255,150,0);*/

RGBA：说得简单一点就是在RGB的基础上加进了一个通道Alpha。RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间

    div{
        width: 200px;
        height: 200px;
        background-color: rgba(10,20,245,0.5);
        color: white;
    }

HSLA(H,S,L,A)

         /*hsl(颜色(0~360)，饱和度(0%~100%)，明度(0%~100%))*/
         /*明度默认是50%,一般建议保留50的值*/
         /*background-color: hsl(300,100%,50%);*/

H：Hue(色调,色相)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 – 360,过渡为：(红橙黄绿青蓝紫红)
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%，50%是平衡值
A：Alpha透明度。取值0~1之间。

关于透明度的补充说明：

opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度
transparent 不可调节透明度，始终完全透明
使用rgba 来控制颜色，相对opacity ，不具有继承性

4 HTML5-CSS3-文本(shadow阴影)

text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

# 设置阴影的位置 -可以添加多个阴影
text-shadow:[颜色(Color)  x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]
或者
text-shadow:[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)],[x轴(X Offset) y轴(Y Offset)  模糊半径(Blur)  颜色(Color)]

X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；
Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；
Blur是指阴影的模糊程度（大小），其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
Color是指阴影的颜色，其可以使用rgba色

4 HTML5-CSS3-盒模型

基本概念： margin 盒子外边界 padding 内容内边界

在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。例如：

padding + border + width = 盒子的宽度
padding + border + height = 盒子的高度
很明显，这不直观，很容易出错，造成网页中其它元素的错位。

        .box{
            width: 400px;
            height: 200px;
            background-color: #ccc;
            /*外间距*/
            margin: 100px auto;
        }
        .left{
            /*默认width是内容的宽度*/
            width: 200px;
            height: 100%;
            background-color: red;
            float: left;
            /*内间距*/
            padding-left: 10px;
            border-right: 10px solid green;
        }

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

content-box:对象的实际宽度=width+border+padding

border-box：对象的实际宽度=width值（width包含了border+padding）

        .left{
            /*默认情况下，width仅仅是内容的宽度*/
            width: 200px;
            height: 100%;
            background-color: red;
            float: left;
          
            /*设置盒模型*/
            /*content-box:你设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度*/
            /*border-box:你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。如果添加了padding和border,那么真正放置内容的区域会减小--但是它可以稳固页面的结构*/
            box-sizing: border-box;
        }