CSS的学习

CSS的学习

提示：对于css的诸多样式的学习

---

一、CSS是什么？

示例：CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

二、CSS的引入方式

1.内联样式(行内样式)

内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

<div style="color:red">设置文字的颜色为红色</div>

缺点：样式与结构冗余
优点：优先级较高

2.内部样式表

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

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

缺点：样式的复用率较低
优点：样式与结构分离

3.外部样式表

3.1

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

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

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

3.2

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

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

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

- 引入方式的优先级

    1.行内样式>内联样式/外部引入
    2.行内 1000
    3.ID选择器 100
    4.类选择器 10
    5.元素选择器 1
    就近原则：哪一种设置方式距离元素最近，谁的优先级更高；

代码如下（示例）：

三.CSS选择器

1.标签选择器

 标签名称{
​           属性:值;
​        }

注意点:

​ 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
​ 2.标签选择器无论标签藏得多深都能选中
​ 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

2.id选择器

#id名称{
​         属性:值;
​       }

注意点:

​ 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
​ 2.在同一个界面中id的名称是不可以重复的
​ 3.在编写id选择器时一定要在id名称前面加上#
​ 4.id的名称只能由字母/数字/下划线，a-z 0-9 _ 组成，不能以数字开头，不能是HTML标签的名称，不能是a h1 img input ...如果仅仅是为了设置样式, 我们不会使用id ,因为id是留给js使用的

3.类选择器

.类名{
​       属性:值;
​    }

注意点:

​ 1.每个HTML标签都有一个属性叫做class, 每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上 "."
4.在HTML中每个标签可以同时绑定多个类名
格式: ```html 正确写法: ​<标签名称 class="类名1 类名2 ..."> ​错误的写法:

```

4.后代选择器

标签名称1 标签名称2{
​            	属性:值;
​        	}

注意点:

1.后代选择器必须用空格隔开
​2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
​3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
​4.后代选择器可以通过空格一直延续下去

5.子元素选择器

标签名称1>标签名称2{
​           	 属性:值;
​        	}

注意点:

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签!!!!!!(注意与后代选择器的异同点)
​2.子元素选择器之间需要用>符号连接, 并且不能有空格!!!
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
​ 4.子元素选择器可以通过>符号一直延续下去!

6.交集选择器

选择器1选择器2{
​              属性: 值;
​       	     }

注意点:

1.选择器和选择器之间没有任何的连接符号
​2.选择器可以使用标签名称/id名称/class名称

7.并集选择器

选择器1,选择器2{
​            	属性:值;
​        	}

注意点:

1.并集选择器必须使用","来连接!!!
2.选择器可以使用标签名称/id名称/class名称

8.兄弟选择器

-相邻兄弟选择器 CSS2

选择器1+选择器2{
​           	 属性:值;
​        	}

注意点:

1.相邻兄弟选择器必须通过+连接
​2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

-通用兄弟选择器 CSS3

选择器1~选择器2{
​              属性:值;
​       		}

注意点:

1.通用兄弟选择器必须用~连接
​2.通用兄弟选择器选中的是 !指定选择器! 后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

9.伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

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

9.1.1.同级别中的第几个(不区分类型)

①:first-child 选中同级别中的第一个标签
②:last-child 选中同级别中的最后一个标签
③:nth-child(n) 选中同级别中的第n个标签
④:nth-child(odd)选中同级别中的所有奇数
⑤:nth-child(even)选中同级别中的所有偶数
⑥:nth-child(xn+y)x和y是用户自定义的, 而n是一个计数器, 从0开始递增
⑦:nth-last-child(n)选中同级别中的倒数第n个标签
⑧:only-child选中父元素仅有的一个子元素E。仅有一个子元素时生效

9.1.2.同级别同类型中的第几个

①:first-of-type 选中同级别中同类型的第一个标签
②:last-of-type 选中同级别中同类型的最后一③:nth-of-type(n) 选中同级别中同类型的第n个标签
④:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
⑤:only-of-type 选中父元素的特定类型的唯一子元素

9.2.动态伪类选择器

​E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

9.3. a标签的伪类选择器

a标签的状态：
未被访问（默认状态）、已被访问、鼠标长按、鼠标悬停
格式：
①:link 修改从未被访问过状态下的样式
②:visited 修改被访问过的状态下的样式
③:hover 修改鼠标悬停在a标签上状态下的样式
④:active 修改鼠标长按状态下的样式

若使用a标签伪类选择器应注意：

    未被访问:link->已被访问:visited->鼠标悬停:hover->鼠标长按:active（爱恨原则 love hate）

9.4.否定伪类

p:not(选择器){
​           	 background-color: yellow;
​        	}

可以从已选中的元素中剔除出某些元素

9.5.伪元素选择器

选择器::before{
            content: "我是一个::before";
        }

::after

表示元素的最后边的部分,一般需要结合content这个样式一起使用，通过content可以向after的位置添加一些内容

::before

表示元素最前边的部分,一般需要结合content这个样式一起使用，通过content可以向before的位置添加一些内容

::first-letter

为第一个字符来设置一个样式

::first-line

为第一行设置一个样式

10. 属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性
​格式1：[attribute]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
格式2：[attribute=value]
eg：

input[type=password]{}
...
<input type="text" name="" id="">
<input type="password" name="" id=""> 	

11.通配符选择器

*{
​      属性:值;
​ }

给当前界面上所有的标签设置属性

12. 组合选择器

多个选择器组合使用。例如 "div.one" 表示class为one的div元素

四.CSS三大特性

1.继承性

作用：给父元素设置一些属性, 子元素也可以使用

注意点:

1.只有以color/font-/text-/line-开头的属性才可以继承
2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
3.继承性中的特殊性
​    3.1 a标签的文字颜色和下划线是不能继承的
    3.2 h标签的文字大小是不能继承的

2.层叠性

作用: 层叠性就是CSS处理冲突的一种能力

注意点:

层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

3.优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

- 优先级判断的三种方式

3.1.间接选中就是指继承
​ 如果是间接选中, 那么就是谁离目标标签比较近就听谁的

3.2.相同选择器(直接选中)
​ 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

3.3.不同选择器(直接选中)
​ 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠

( id>类>标签>通配符>继承>浏览器默认)

-优先级权重
内联样式，如: style="…"，权值为1000。
ID选择器，如：#content，权值为0100。
类，伪类、属性选择器，如.content，权值为0010。
标签选择器、伪元素选择器，如div p，权值为0001。
通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
继承的样式没有权值

-优先级之!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:

​ 1.!important只能用于直接选中, 不能用于间接选中
2.通配符选择器选中的标签也是直接选中的
3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
4.!important必须写在属性值的分号前面
5.!important前面的感叹号不能省略
6.但是使用"!important"会改变级联的工作方式，使得调试变得困难。一般不建议使用。