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

r囧r小猫 2021-12-17 04:29 287阅读 0赞

### 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";另外一种被称作用户行为伪类

1.  E:first-child:查找E这个元素的父元素的第一个子元素E
2.  E:last-child:最后一个子元素
3.  E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素
4.  E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算
5.  E:nth-child(even): 所有的偶数
6.  E:nth-child(odd): 所有的奇数
7.  E:nth-of-type(n):指定类型
8.  E:empty 选中没有任何子节点的E元素，注意，空格也算子元素
9.  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

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

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

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

### 4 HTML5-CSS3-颜色相关知识 ###

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

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

1.  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;
        }

1.  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之间。

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 内容内边界

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

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

![format_png][]

.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;
            }

1.  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;
                }

### 5 HTML5-CSS3-边框圆角 ###

border-radius可以通过值来定义样式相同的角，也对每个角分别定义

5.1 值的说明：

*  border-radius：\*px: 将创建四个大小一样的圆角
 *  border-radius:\*px \*px \*px \*px: 四个值分别表示左上角、右上角、右下角、左下角
 *  border-radius:\*px \*px：第一个值表示左上角、右下角；第二个值表示右上角、左下角
 *  border-radius:\*px \*px \*px：第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角

5.2 单个圆角的设置：对应四个角，CSS3提供四个单独的属性。

*  border-top-left-radius
 *  border-top-right-radius
 *  border-bottom-right-radius
 *  border-bottom-left-radius
 *  这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

5.3 非对称圆角(椭圆)设置

*  border-radius:20px/10px;表示在水平方向上20px,在垂直方向上10px;
 *  具体说明如下：可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，
 *  “/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），
 *  “/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）

### 6 HTML5-CSS3-边框阴影 ###

边框阴影：2.语法：box-shadow: h-shadow v-shadow blur spread color inset;

*  h-shadow:水平方向的偏移值
 *  v-shadow:垂直方向的偏移值
 *  blur:模糊--可选，默认0
 *  spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0
 *  color:颜色--可选，默认黑色
 *  inset:内阴影--可选,默认是外阴影

[format_png]: /images/20211213/912766d779fa4e69ad650897d9a61c9e.png