CSS的学习记录

CSS的引入方式

 

- 内联样式(行内样式)

把css代码直接写在现有的HTML标签中

注意：

样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，多条css样式写在一起中间用分号隔开。

代码：

效果：

- 内部样式表

可以同时为多个元素设置样式

注意:

-style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)

-style标签中默认type="text/css"

代码：

效果：

- 外部样式表

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

这样可以在不同的页面中使用同一个样式表

1.用link标签引入

代码：

效果：

2.用import方式导入

@import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象 引入要写在style标签里的最前面，否则不会生效或者直接在外部css文件中直接使用

代码：

效果：

CSS选择器

- 标签选择器

格式：标签名{ }

注意: ​

标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 ​

代码：

 效果:

  - id选择器

格式：#id{  }

注意: ​

1.每个标签都可以设置id ​

2.在同一个界面中id的名称是不可以重复的 ​

id的名称是有一定规范的

​ 1. id的名称只能由字母/数字/下划线组成

2. id名称不能以数字开头 ​

3. id名称不能是HTML标签的名称​

代码：

效果：

 - 类选择器

格式：.类名{  }

注意: ​

1.每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的 ​

3.类名的命名规范和id名称的命名规范一样

4.在HTML中每个标签可以同时绑定多个类名，格式: ​ <标签名称 class="类名1 类名2 ..."> ​

代码：

 

效果：

id和class的区别：

id相当于人的身份证不可以重复，class相当于人的名字可以重复

一个HTML标签只能绑定一个id名称，但可以绑定多个class名称

- 后代选择器

格式: ​ 选择器1 选择器2{  ​ } ​

先找到所有名称叫做"选择器1"的标签, 然后再在这个标签里去找所有名称叫做"选择器2"的标签

注意: ​

1.后代不仅仅是儿子, 也包括孙子/重孙子等所有后代

2.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

3.后代选择器可以通过空格一直延续下去

代码：

效果：

 - 子元素选择器

格式: ​ 选择器1>选择器2{ ​ }

注意: ​

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 ​

2.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

3.子元素选择器可以通过>符号一直延续下去

代码：

 效果：

后代选择器和子元素选择器之间的共同点

​ 1.都可以使用标签名称/id名称/class名称来作为选择器

​ 2.都可以通过各自的连接符号一直延续下去

后代选择器和子元素选择器之间的区别 ​

1.后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号 ​

2.后代选择器会选中指定标签中所有的后代标签，子元素选择器只会选中特定的儿子标签

 - 交集选择器​

格式: ​ 选择器1选择器2{ ​ ​ } ​

注意: ​

1.选择器和选择器之间没有任何的连接符号 ​

2.选择器可以使用标签名称/id名称/class名称 ​

代码：

效果：

- 并集选择器

格式: ​ 选择器1,选择器2{ ​  ​ } ​

注意: ​

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

代码：

 效果：

- 兄弟选择器

1.相邻兄弟选择器 CSS2 ​

给指定选择器后面紧跟的那个选择器选中的标签设置属性 ​

格式: ​ 选择器1+选择器2{ ​  ​ } ​

注意: ​

相邻兄弟选择器只能选中紧跟其后的那个标签

代码：

效果：

 2.通用兄弟选择器 CSS3 ​

给指定选择器后面的所有选择器选中的所有标签设置属性 ​

格式: ​ 选择器1~选择器2{ ​  ​ }

代码：

效果：

- 伪类选择器

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

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

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 选中父元素的特定类型的唯一子元素

- 动态伪类选择器

E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 ​

E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 ​

E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 ​
E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。

 - a标签的伪类选择器

格式 ​

:link 修改从未被访问过状态下的样式 ​

:visited 修改被访问过的状态下的样式 ​

:hover 修改鼠标悬停在a标签上状态下的样式 ​

:active 修改鼠标长按状态下的样式 ​

注意：

1. a标签的伪类选择器可以单独出现也可以一起出现 ​ 

2. a标签的伪类选择器如果一起出现, 那么有严格的顺序要求 ​

默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active ​

（编写的顺序必须要遵守爱恨原则 love hate ​）

 代码：

效果：

代码：

效果：

 代码：

效果：

代码：

效果：

- 否定伪类

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

格式： （选择器）​:not(选择器) ​

代码：

效果：

- 伪元素选择器

使用伪元素来表示元素中的一些特殊的位置 ​

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

代码：

效果：

（不能选中复制）

::before ​ 表示元素最前边的部分 ​

代码：

效果：

::first-letter ​ 为第一个字符设置样式 ​

代码：

效果：

::first-line ​ 为第一行设置一个样式

代码：

效果：

- 属性选择器

格式: ​ [attribute]

[attribute=value] ​

作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 ​

常用于区分input属性

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