【CSS学习笔记】

CSS简介

CSS是一种标记语言，是层叠样式表的简称

CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等) 以及版面的布局和外观显示样式

CSS语法规范

选择器 {属性: 属性值;}

属性和属性值以键值对的形式出现

CSS代码风格

样式一律采用小写字母，方便阅读

属性值前面，冒号后面，保留一个空格

选择器和大括号也保留一个空格

样式格式书写
1.  紧凑格式: `h3 {color: deeppink}`
    
    
2.  展开式格式: `h3 {`
    
    
    
    color: deeppink;
    
    
    
    font-size: 13px
    
    
    
    }```

CSS选择器

选择器的作用就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是用来选择标签的

选择器分为基础选择器和复合选择器两大类

1.  基础选择器是由单个选择器组成的，包括标签选择器、类选择器、id选择器、通配符选择器
    
    
    1.  **标签选择器**:用HTML标签名称作为选择器，按标签名称分类
        
        
    2.  **类选择器**:
        
        
        1.  如果想进行差异化选择不同的标签，单选一个或者两个，可以使用类选择器。使用类选择器需要在标签加上`class="类名"`，这样在CSS中就可以通过.类名来找到相关选择器了
            
            
        2.  其类名要做到见名知意
            
            
        3.  我们可以给标签指定多个类名，达到更多的选择目的，我们可以在class属性写多个类名，但是多个类名要用空格分开
            
            
    3.  **通配符选择器**：通配符选择器使用 “*” 定义，它表示选取页面中所有元素(标签)。
        
        
    4.  **id选择器**：
        
        
        1.  id选择器可以为标有id的HTML元素指定特定样式
            
            
        2.  元素以id属性来设置id选择器，css中以#开选用
            
            
        3.  同名的ID只能 一个标签用，不能重复
            
            
        4.  `p.div:{}`表示类名为div的p标签
            
            
            
            ![2021-04-28_104839.png](https://upload-images.jianshu.io/upload_images/26184870-8a761d18708ba1b6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.  复合选择器是建在在基础选择器之上，对基本选择器进行组合形成的，包括后代选择器，子选择器，并集选择器，伪类选择器
    
    
    1.  **后代选择器**：用于选择父元素里面的子元素，`父元素1 子元素2 { 样式声明 }`
        
        
    2.  **子选择器**：子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素`父元素>子元素 {样式声明}`
        
        
    3.  **并集选择器**: 选择多个标签，同时定义样式，选择器直接用逗号分隔`元素1,元素2{样式声明}`最后一个选择器不需要加逗号
        
        
    4.  **伪类选择器**
        
        
        1.  用于给某些选择器添加某些特殊效果
            
            
        2.  链接伪类选择器之间不要颠倒按照LVHA的顺序来演练
            
            
            
            ![2021-04-28_131739.png](https://upload-images.jianshu.io/upload_images/26184870-53679e09270dd20f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        3.  **:focus**:focus选取的是获得焦点的表单元素
            
            
        4.  :nth-child(number)选取的是当前标签的第几个

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

font-family: ''微软雅黑“可以用来定义文本的字体系列。各种字体之间必须使用英文状态下的逗号隔开。如果定义了多个字体那它会自左向右依次检查系统有没有这个字体，如果没有就用下一个。最常见的几个字体有:[font-familly，‘Microsoft yaHei’, tahoma,arial,'Hiragino Sans GB';]

font-size
1.  可以使用font-size属性定义字体大小
    
    
2.  标题标签需要单独定义文字大小
    
    
3.  px(像素)是我们网页的最常用的单位
    
    
4.  谷歌浏览器默认文字大小为16px
    
    
5.  不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
    
    
6.  可以给body指定页面文字的大小·
font-weight：可以设置文字的粗细，属性值bold是加粗,normal是不加粗

font-style：用于设置文字的风格，normal可以让文字不倾斜，italic让文字倾斜

文字复合写法
1.  字体属性可以把以上文字样式综合来写，这样可以更节约代码
    
    
    1.  `font: font-style font-weoght font-size/line-height font-family`
        
        
    2.  在上面填写相应的属性值即可，顺序不能随意颠倒，并且属性以空格隔开
        
        
    3.  不需要的属性可以不设置，但必须设置保留font-size和font-family属性，否则不会起作用

CSS本文属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

color:color:red可用于定义文本的颜色，值可以是rgb(),,也可以是预定义的red，或者说十六进制#FF000

text-align：使标签里面的文字进行对齐，值为left则左对齐，center则居中对齐，right则右对齐

text-decoration: 装饰文本，值为underline为下划线，line-through删除线，overline上划线，none则是什么也没有，一般会给a标签设置这个属性

text-indent: 缩进文本，用来指定文本第一行缩进多少px,值为number-px，一般在写文章时会用到

em单位，em是一个相对单位，表示是一个文字的宽度，如果设置了文字大小则缩进文字的大小，如果没有则是默认的16px

line-height: line-height属性用来设置行间的距离(行高)。可以控制文字行与行之间的距离。行间距包括上边距和下间距和文本，这是对于单行文本,如果值是整数，则当前元素文字大小*行高整数就是行间距的值了

2021-04-28_140150.png

CSS引入方式

内部样式表：就是在html页面内部写样式，不过是单独写到style标签内部‘，结构与样式划分比较清晰

行内样式表: 在元素标签内部的style属性中设置的css样式，适合修改简单的样式，可以控制当前的标签样式

外部样式表：实际开发都是外部样式表，适合样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引用到需要的html页面，使用<linke rel="stylesheet" href="样式路径"

Emmet语法

Emmet语法可以快速生成html/css，提供效率

html具体用法

2021-04-28_150122.png

css具体用法

1.  tac生成`text-align:center`
    
    
2.  w24生成`width： 24px`
    
    
3.  h24生成`height：24px`

显示模式转换

display:可以将目标标签转化成我们想要的模式，值可以是block(块元素)，inline(行内元素)，lnline-block(行内块元素)

CSS的背景

background:修改背景颜色，值可以是颜色值也可以是transparent（透明）

background-image

1.  属性描述了元素的背景图像，一般logo图或者装饰的小图片习惯用背景图来做，优点是比较容易控制位置
    
    
2.  background-image: none | url(图片地址)
    
    
3.  background-repeat: repeat(平铺) | no-repeat(不平铺) | repeat-x(横向平铺) | repeat-y(纵向平铺)
    
    
4.  默认情况下背景图片是平铺的，不过可以通过

background-position

1.  参数是方位名词
    
    
    1.  可以通过方位名词来对背景图进行大体的调整
        
        
    2.  如果指定的两个值都是名词，则两个值前后顺序无关，比如left top和top left 效果一致
        
        
    3.  如果只指定了一个方位名词，则第二个值默认居中对齐
        
        
2.  参数是精确数值
    
    
    1.  如果参数是精确坐标，第一个参数则是水平，第二个则是垂直
        
        
    2.  如果只有一个参数，那这个参数一定是水平，第二个是垂直居中
        
        
    3.  同时也可以方位名词和精确名词混合着写

background-attahment

1.  attahment用来设置 图像的是否固定或者随页面其余部分滚动
    
    
2.  参数为scroll则会滚动，flex则会固定

背景复合型写法

1.  background:属性可简化属性代码，使用简写属性是没有顺序分明的
    
    
    
    ![2021-04-29_092916.png](https://upload-images.jianshu.io/upload_images/26184870-4043062fc1f3bbe5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

CSS的三大特性

层叠性

1.  样式如果冲突，CSS就会执行就近原则，那个样式离结构近。就执行哪一个
    
    
2.  样式不冲突，不会重叠

继承性

1.  子标签会继承父标签的某些样式，如文本颜色，字号等等
    
    
2.  子元素继承父元素的样式(text-, font-, color, line-)
    
    
3.  恰当的使用可以简化代码，降低复杂性

优先级

1.  不同的选择器设置的样式，有不一样的优先级，优先级更大的权重更高
    
    
2.  不管父元素权重有多高，子元素依旧是0
    
    
3.  复合选择器会有权重叠加的问题 ，div ul li的权重为0001+0001+0001=0003，权重叠加永远不会有进位
    
    
    
    ![2021-04-29_103322.png](https://upload-images.jianshu.io/upload_images/26184870-4325b6781ae8186c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

盒子模型(Box Model)

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。它包括边框，外边距，内边距，和实际内容

盒子边框(border)

1.  border可以设置元素的边框。边框有三部分组成：边框宽度(粗细)，边框样式，边框颜色
    
    
2.  语法：border: 边框粗细 | 边框样式(solid-实线；dashed-虚线；dotted-点线) | 边框颜色

border-collapse可以控制浏览器绘制边框的方式,将边框线合并在一起，语法:border-collapse0:collapse

###### 注： 后续内容笔记并没有太详细

如果不给padding设置高宽，那么padding是不会撑开盒子的

利用外边距水平居中

1.  外边距可以让块级盒子水平居中，但是必须满足两个条件
    
    
2.  盒子必须指定了宽度（width）
    
    
3.  盒子左右的外边距都设置为 auto
    
    
4.  如果是行内元素之间给父元素添加text-align:center即可

外边距塌陷

1.  对于两个嵌套关系(父子关系)的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
    
    
2.  解决方案
    
    
    1.  为父元素定义上边框
        
        
    2.  为父元素定义上内边距
        
        
    3.  为父元素定义添加overflow:hidden
        
        
3. ![2021-04-29_135352.png](https://upload-images.jianshu.io/upload_images/26184870-89f9d00cf5575704.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Pink老师总结

标签是由语义的，合理的地方用合理的标签，比如产品标题就用h，大量文字段落就用p

box-shadow

用来给盒子添加阴影

数值如下

2021-04-29_174755.png

text-shadow

用来给文字添加阴影

数值如下

3.

2021-04-29_175123.png

浮动（float）

浮动后的元素会具有很多特性

1.  浮动元素会脱离标准流（脱标）
    
    
    1.  即不再保留原先位置，后面的盒子会补上
        
        
2.  浮动元素会一行内显示并且元素顶部对齐
    
    
3.  浮动元素具有行内块的特性
    
    
4.  一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
    
    
    
    **浮动的盒子只会影响后面的标准流，不会影响前面的标准流**

CSS书写顺序

2021-05-06_093138.png

显示和隐藏

display: none是将元素删除，不再占有位置

visibility

1.  是将元素隐藏，还是占用位置
    
    
2.  `visibility: visivle`元素可见
    
    
3.  `visibility: hidden`元素隐藏

overflow

1.  对盒子溢出的部分进行操作
    
    
2.  hidden是溢出隐藏
    
    
3.  scroll是溢出的部分添加可滚动的滚动条

CSS鼠标样式切换

2021-05-06_153327.png

图片内盒子与文字居中（vertical-align）

vertical-align属性可以控制盒子内的行内块元素和行内元素的垂直对齐
 ![2021-05-06_154318.png](https://upload-images.jianshu.io/upload_images/26184870-145e37329ddb7c5d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

HTML5新特性

语义化标签

1.  HTML5新增了语义化标签，语义化标签和div没什么区别，但更便于搜索引擎更好的识别
    
    
2.  在IE9中需要把这些元素转化为块元素
    
    
    
    ![2021-05-06_162642.png](https://upload-images.jianshu.io/upload_images/26184870-fff98e497ccdcd8e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

多媒体标签、

1.  视频<video>
    
    
    1.  当前video元素支持三种视频格式，mp4有很好的兼容性，推荐使用mp4格式
        
        
    2.  如果不支持当前音频可以用瑞骚死方法，如果第一个音频不兼容则会尝试第二个音频![2021-05-06_163811.png](https://upload-images.jianshu.io/upload_images/26184870-10fb3faf1afa1e1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    3.  视频标签常见属性
        
        
        
        ![2021-05-06_163407.png](https://upload-images.jianshu.io/upload_images/26184870-3a1066056a9a7e5d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.  音频<audio>
    
    
    1.  当前audio元素支持三种音频格式，mp3有很好的兼容性，推荐使用mp3
        
        
    2.  如果不支持当前音频可以用瑞骚死方法，如果第一个音频不兼容则会尝试第二个音频![2021-05-06_163811.png](https://upload-images.jianshu.io/upload_images/26184870-a799104b66a4fe67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    3.  音频标签常见属性
        
        
        
        ![2021-05-06_164409.png](https://upload-images.jianshu.io/upload_images/26184870-15ef6622e9af5ff6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    4.  表单属性
        
        
        1.  `type="seach"`新增许许多多语义化属性，更便于搜索引擎优化![2021-05-07_085546.png](https://upload-images.jianshu.io/upload_images/26184870-a06f35fc4709e783.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        2.  新增其他属性
            
            
            
            ![2021-05-07_090458.png](https://upload-images.jianshu.io/upload_images/26184870-6f67c3d149468384.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

            1.  通过input::placeholder {color:pink} 可以用于设置plachoolder的文本颜色

CSS3新特性

CSS3选择器

1.  伪类选择器
    
    
    1.  伪类选择器会在选中元素内部创建一个元素，从而简化HTML结构
        
        
    2.  ![2021-05-07_115727.png](https://upload-images.jianshu.io/upload_images/26184870-35cf09c408d22d11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    3.  语法: ekement::before{}
        
        
    4.  伪元素里面必须有content属性
        
        
    5.  伪元素选择器和标签选择器一样，权重为1
        
        
2.  属性选择器
    
    
    1.  `input[value]:` 代表只能是有value属性的Input标签才能被选中
        
        
    2.  **`input[type=text]:`代表只能是type值为text的input标签才能被选中**
        
        
    3.  `div[class^=icon]：`代表只能是class值为icon开头的div标签才能被选择
        
        
    4.  `div[class$=data]:`代表只能是class值为data结尾的div标签才能被选择
        
        
    5.  `div[class*=data]:` 代表只能是class值中含有data的div标签才能被选择
        
        
3.  结构伪类选择器
    
    
    1.  `div:first-child:`代表只能是第一个div元素被选中
        
        
    2.  `div:last-child:`代表只能是最后一个div元素被选中
        
        
    3.  `div:nth-child():`代表只能是第n个div元素被选中
        
        
        1.  nth-child()中可以填写数字，关键字，公式
            
            
        2.  nth-child(event):代表只选择偶数的元素
            
            
        3.  nth-child(odd):代表只选择奇奇数的元素
            
            
        4.  nth-child(n)![2021-05-07_110800.png](https://upload-images.jianshu.io/upload_images/26184870-f21f9ece2be0c8a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. first-of-type:属性

5. last-of-type:属性

6. nth-of-type:属性

7. 以上三种属性用法于前面三种无异，但是前面三种针对里面的元素。后面三种则是针对里面指定的元素</pre>

box-sizing(盒子模型大小)

1.  用来指定盒子模型大小，有content-box、border-box
    
    
2.  content-box计算方式为width+padding+border，即默认的。padding和border会使盒子膨胀
    
    
3.  border-box计算方式为width，即说是多少就是多少(前提padding和border不会超过width宽度)，如果添加padding则会减小width，但整体宽度会一直保持不变

filter(滤镜)

1.  filter用于给元素添加滤镜，便的模糊或者颜色偏移,语法: `filter:函数()`
    
    
2.  blur(px)函数可以进行模糊处理数值越大越模糊

calc函数

1.  calc函数可以让声明CSS属性值时执行一些计算
    
    
2.  width: calc(100%-80px),括号里还可以使用+ - * /来进行计算

transition(过渡动画)

1.  transition可以将元素的改变通过过渡动画来更美观的实现
    
    
2.  **语法: transition: 属性 花费时间 运动曲线 何时开始**
    
    
    1.  **属性**: 想要变化的css属性，宽度高度，背景颜色， 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
        
        
    2.  **花费时间：**单位是秒，要写单位，比如0.5s
        
        
    3.  **运动曲线**：默认是ease,可以省略
        
        
    4.  **何时开始：** 单位是秒，可以设置延迟触发时间（可以省略）
        
        
    5.  该特性谁要变化给谁加