CSS3基础

2022-04-16

字数统计: 3k字 | 阅读时长: 11分

外部样式表

可以使用link标签引入外部的CSS文件，以便在不同页面之间进行复用，将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

1	<link rel="stylesheet" href="./style.css">

注意：link是单标签

基本CSS选择器

通配选择器

1
2
3

* {
 color: red;
}

元素选择器（类型选择器、标签选择器）
- 作用：根据标签名来选中指定的元素
- 语法： elementname {}

p {
   color: red;
  }
       
h1 {
   color: green;
   }

类选择器
- 作用：根据元素的class属性值选中一组元素
- 语法： .calssname

1
2
3

.blue {
  color: blue;
}

ID选择器
- 作用：根据元素的id属性值选中一组元素
- 语法： #idname {}

1
2
3

#red {
  color: red;
}

优先级：id > class > 标签

属性选择器
- 作用：根据元素的属性值选中一组元素
- 语法：
  - [属性名] 选择含有指定属性的元素
  - [属性名=属性值] 选择含有指定属性和属性值的元素
  - [属性名^=属性值] 选择含有以指定属性值开头的元素
  - [属性名$=属性值] 选择含有以指定属性结尾的元素
  - [属性名*=属性值] 选择含有属性值中含有某值的元素

p[title] {
    color: orange;
}

p[title=e] {
    color: orange;
}

p[title^=e] {
    color: orange;
}

p[title$=e] {
    color: orange;
}

p[title*=e] {
    color: orange;
}

复合选择器

交集选择器
- 作用：选中同时符合多个条件的元素
- 语法：选择器1选择器2选择器3….选择器n {}
- 注意：交集选择器中如果有元素选择器，必须使用元素选择器开头，class属性中必须包含所有的交集选择器，否则样式无效

div.red {
         font-size: 30px;
       }
        
.a.b {
         color: blue;
      }

<div class="a b c">交集选择器</div>

并集选择器
- 作用：同时选择多个选择器对应的元素
- 语法：选择器1，选择器2，选择器3….选择器n {}
- 注意：并集选择器，用逗号隔开，互不影响，只要含有就样式就生效

h1,
span {
    color: green;
    }
    
<h1>HHHHH</h1>
<span>SSSSS</span>

关系选择器

父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素；父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素 {}

1
2
3

div.box > p > span {
   color: orange;
}

后代元素选择器
- 作用：选中指定父元素的指定后代元素
- 语法：父元素子元素 {}

1
2
3

div span {
   color: skyblue;
}

兄弟元素选择器
- 作用：选中下一个兄弟
- 语法：
  - A1 + A2 {} 相邻的兄弟选择器：找紧挨着的下一个兄弟元素
  - A1 ~ A3 {} 通用兄弟选择器：后面所有兄弟元素

p + span {
            color: red;
        }
        
p ~ span {
            color: red;
        }

伪类选择器

伪类（不存在的类，特殊的类）。伪类用来描述一个元素的特殊状态如：第一个子元素、被点击的元素、鼠标移入的元素…

伪类一般情况下都是使用:开头

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
- n：第n个，n的范围0到正无穷
- 2n 或 even：表示选中偶数位的元素
- 2n+1 或 odd：表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序

:first-of-type 同类型中的第一个子元素
:last-of-type 同类型中的最后一个子元素
:nth-of-type() 选中同类型中的第n个子元素

这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

:not() 否定伪类，将符合条件的元素从选择器中去除

ul > li:first-child{
           color: red;
       }
   
       ul > li:last-child{
           color: red;
       }

       ul > li:nth-child(2n+1){
           color: red;
       }

       ul > li:nth-child(even){
           color: red;
       }

       ul > li:first-of-type{
           color: red;
       }

       ul > li:not(:nth-of-type(3)){
           color: yellowgreen;
       }

a元素的伪类

/* 
           :link 用来表示没访问过的链接（正常的链接）
        */
       a:link{
           color: red;
           
       }

       /* 
           :visited 用来表示访问过的链接
           由于隐私的原因，所以visited这个伪类只能修改链接的颜色
       */
       a:visited{
           color: orange; 
           /* font-size: 50px;   */
       }

       /* 
           :hover 用来表示鼠标移入的状态
        */
        a:hover{
            color: aqua;
            font-size: 50px;
        }

        /*
           :active 用来表示鼠标点击
        */
        a:active{
            color: yellowgreen;
            
        }

伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用

p::first-letter {
            font-size: 50px;
        }
        
        p::first-line {
            background-color: yellow;
        }
        
        p::selection {
            background-color: greenyellow;
        }
        
        div::before {
            content: 'abc';
            color: red;
        }
        
        div::after {
            content: 'haha';
            color: blue;
        }

选择器的权重

选择器	权重
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

长度单位：

像素： 屏幕（显示器）实际上是由一个一个的小点点构成的

1.像素与分辨率的关系

分辨率 = 水平方向像素 * 垂直方向像素

不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在不同的设备下显示效果不一样

2.屏幕实现图片放大或缩小的原理

其实是设备通过算法对图像进行了像素补足。同理，把图片小于100%缩放时，也是通过算法将图片像素减少。
百分比：也可以将属性值设置为相对于其父元素属性的百分比，使子元素跟随父元素的改变而改变（暂且理解为父元素，后面详说）
em：em是相对于元素的字体大小来计算的，1em = <self>.font-size * 1,em会根据字体大小的改变而改变,浏览器的默认font-size: 16px;
rem:rem是相对于根元素的字体大小来计算,1rem = <root>.font-size * 1,rem会根据字体大小的改变而改变

盒子大小box-sizing

content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的总大小

轮廓outline

轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

高度塌陷与BFC

BFC(Block Formatting Context) 块级格式化环境

BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点：

开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素子元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC：

设置元素的浮动（不推荐）

                  2、将元素设置为行内块元素（不推荐）
                  3、将元素的overflow设置为一个非visible的值
                      - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

clear

作用：清除浮动元素对向前元素的影响

both;``` 清除两侧中影响较大一侧的影响


- after

伪元素选择器 ```::after```

**解决高度塌陷：**
    
- 通过```overflow: hidden;``` 为元素开启BFC
- 通过```clear: both;``` 以结构清除浮动对元素产生的影响
- 通过伪元素选择器：```::after```  以样式清除对元素产能的影响

- clearfix

**垂直布局中边距重叠的问题**： 在父元素上使用```::before```

clearfix这个样式可以同事解决高度塌陷和外边距重叠问题

```css
 .clearfix::before,
 .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

定位

可选值	含义
static	默认值，元素是静止的没有开启定位
relative	开启元素的相对定位
absolute	开启元素的绝对定位
fixed	开启元素的固定定位
sticky	开启元素的粘滞定位

相对定位的特点：
- 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
- 2.相对定位是参照于元素在文档流中的位置进行定位的
- 3.相对定位会提升元素的层级
- 4.相对定位不会使元素脱离文档流
- 5.相对定位不会改变元素的性质块还是块，行内还是行内
绝对定位的特点：
- 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
- 2.开启绝对定位后，元素会从文档流中脱离
- 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
- 4.绝对定位会使元素提升一个层级
- 5.绝对定位元素是相对于其包含块进行定位的
固定定位的特点：
- 将元素的position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随网页的滚动条滚动
粘滞定位
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

字体

text-overflow: ellipsis;文本溢出显示省略号…

雪碧图

解决图片闪烁的问题：

可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片

这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题

这个技术在网页中应用十分广泛，我们称为雪碧图

线性渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果

！！渐变是图片，需要通过background-image来设置

线性渐变，颜色沿着一条直线发生变化linear-gradient()

过渡（transition）

通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验

变形

变形就是指通过CSS来改变元素的形状或位置

变形不会影响到页面的布局
transform 用来设置元素的变形效果
平移：
- translateX() 沿着x轴方向平移
- translateY() 沿着y轴方向平移
- translateZ() 沿着z轴方向平移
- 平移元素，百分比是相对于自身计算的
旋转
缩放