0基础CSS超详细笔记 第一天

什么是CSS?

                CSS————层叠样式表（Cascading Style Sheets）

                CSS的作用：修饰文档。

                

语法

1. 声明 

div {
            color: blue;
}

称为一条声明

2.声明块

div {
            color: blue;
            font-size: 28px;
            border: 1px solid red;
            border-top-width: 2px;
            border-right-style: dashed;
            border-left-color: green;
        }

3.规则集

选择器  {

                属性：属性值；（声明）

}

4. 可读性

空白（ White space）

空白意味着实际空格、制表符和新行，可以添加空白使样式表更加可读。

CSS的引入方式

- 内联样式(行内样式)

- 内部样式表

缺点：样式的复用率较低

优点：样式与结构分离

将样式表编写到head中的style标签中

- 外部样式表

优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）， 共用，定义好的css文件可以应用到多个页面中。

1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

2.@import url()，还可通过import方式导入CSS文件

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

<style> /*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/ @import url('./style.css'); </style>

- 引入方式的优先级

行内样式>内部样式/外部引入

就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

- CSS怎么学?

CSS的学习一共分为两大部分, 一个是CSS的选择器, 另一个是CSS的属性.

选择器

标签选择器

类选择器

id选择器

后代选择器

子代选择器（子代选择器和后代选择器的区别：后代选择器： div>p {}）

交集选择器

​         作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性​ 格式:​ 选择器1选择器2{​ 属性: 值;​ }​ 注意点:​ 1.选择器和选择器之间没有任何的连接符号​ 2.选择器可以使用标签名称/id名称/class名称​ 3.交集选择器仅仅作为了解, 企业开发中用的并不多

- 并集选择器

​         作用: 给所有选择器选中的标签设置属性​ 格式:​ 选择器1,选择器2{​ 属性:值;​ }​ 注意点:​ 1.并集选择器必须使用,来连接​ 2.选择器可以使用标签名称/id名称/class名称

- 兄弟选择器

        ​ 1.相邻兄弟选择器 CSS2​ 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性​ 格式:​ 选择器1+选择器2{​ 属性:值;​ }​ 注意点:​ 1.相邻兄弟选择器必须通过+连接​ 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

        ​ 2.通用兄弟选择器 CSS3​ 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性​ 格式:​ 选择器1~选择器2{​ 属性:值;​ } 注意点:​ 1.通用兄弟选择器必须用~连接​ 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

伪类选择器 （结构伪类选择器（序选择器））

         序选择器——        

                标签：nth-child(5) {

}

CSS3中新增的选择器最具代表性的就是序选择器​ 1.同级别中的第几个​ :first-child 选中同级别中的第一个标签​ :last-child 选中同级别中的最后一个标签​ :nth-child(n) 选中同级别中的第n个标签​ :nth-child(odd) 选中同级别中的所有奇数​ :nth-child(even) 选中同级别中的所有偶数​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

​ 例如(3n+1)分别对应1,4,7.....​ :nth-last-child(n) 选中同级别中的倒数第n个标签​ :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效​ 注意点: 不区分类型​
​ 2.同级别同类型中的第几个​ :first-of-type 选中同级别中同类型的第一个标签​ :last-of-type 选中同级别中同类型的最后一个标签​ :nth-of-type(n) 选中同级别中同类型的第n个标签​ :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签​ :only-of-type 选中父元素的特定类型的唯一子元素

a标签的伪类选择器： link visted hover active