Web前端自学记录（二）（CSS基础知识）

CSS基础知识

1.CSS简介

网页分成3各部分

结构(HTML)
表现(CSS)
行为(JavaScript)

CSS

层叠样式表
网页实际上是一个多层的结构，通过CSS为网页的每一层设置样式
用来设置网页中元素的样式

使用CSS修改元素的样式

第一种方式：内联样式/行内样式
   在标签内部通过style属性设置样式
   问题：
       内联样式只能对一个标签生效
       当样式发生变化时，需要一个一个修改
   注意：开发时不要使用内联样式
第二种方式：
   将样式编写到head中的style标签里
   通过CSS的选择器来选中元素并为其设置各种样式
   可以同时为多个标签设置样式，修改时同时修改
   更方便重复使用
   问题：内部样式表只能对一个页面起作用
第三种方式:外部样式 最佳方式
   可以将CSS样式编写到外部的CSS文件中
   然后通过link标签引入外服的CSS文件
   外部样式表需要通过link标签引入，可多个页面之间进行复用
   将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，加快加载速度

2.CSS语法

CSS基本语法:

 选择器：通过选择器可以选中页面中的指定元素
 比如：p
 声明块：通过声明块为元素设置样式
 声明块由一个个声明组成
 声明时一个名值对结构
 一个样式名对应一个样式值 用：链接 以；结尾

3.常用选择器

元素选择器

作用：根据标签名选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

ID选择器

作用：根据元素的id值选中一个元素
语法：id属性值{}
例子：#red{}

类选择器

作用：根据元素的class属性值设置一组元素
语法：.class属性值{}
可以同时为一个元素指定多个class

通配选择器

作用：选中页面中的所有元素
语法：*{}

4.复合选择器

交集选择器

作用：选中同时复合多个条件的元素
语法：选择器A选择器B...
注意：交集选择器中如果有元素选择器，必须用元素选择器开头

并集选择器

作用：同时选择多个选择器对应的元素
语法：选择器A,选择器B

5.关系选择器

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素>子元素
div>span{color:orange;}

后代元素选择器

作用：可以选中指定元素内的指定后代元素
语法：祖先 后代
div span{color: skyblue;}

选择下一个兄弟

语法：前一个+下一个
p+span{color: red;}

选择下边所有的兄弟元素

p~span{color: red;}

6.属性选择器

[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性值的元素
[属性名^=属性值]选在属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素

7.伪类选择器

伪类（不存在的类）

伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素
伪类一般情况下都是用:开头
: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()
这几个伪类的功能和上述的类似，不同点是他们在同类型元素中进行排序

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

8.超链接的伪类

几种常用的超链接伪类

:link 用来表示没访问过的链接(正常的链接)
:visited 访问过的链接 由于隐私的原因,所以visited这个伪类只能修改链接的颜色
:hover 用来表示鼠标移入的状态
:active 鼠标点击的状态

9.伪元素选择器

伪元素,表示页面中一些特殊的并不真实存在的元素(特殊的位置) 使用::开头

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

10.继承

样式的继承

我们为一个元素设置样式同时也会应用到它的后代元素上
继承是发生在祖先元素的后代元素之间的
继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式设置到祖先元素上

注意:并不是所有样式都会被继承
比如 背景相关的,布局相关等的这些样式都不会被继承

11.选择器的权重

样式的冲突

通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值,此时就发生的样式的冲突
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定

选择器的权重

内联样式        1000
id选择器        100
类和伪类选择器   10
元素选择器       1
通配选择器       0
继承的样式       没有优先级
注：数字仅用来表示权重的大小比较，没有实际意义

比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器时单独计算的)
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,则优先使用靠下的样式

可以在某一个样式后边添加!important,则此时该样式会获取到最高的优先级
注意,在开发中慎用

12.单位

长度单位:

像素
   屏幕(显示器)实际上是由一个一个小点点构成的
   不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰
   所以同样的200px在不同的设备下显示的效果不一样
百分比
   百分比可以设置属性相对于父元素属性的百分比
   设置百分比可以使子元素跟随父元素的改变而改变
em
   em是相对于元素的字体大小来计算的
   1em = 1font size
   em会根据字体大小的改变而改变
rem
   rem是相对于根元素（html）的字体大小来计算的

13.颜色

颜色单位

在CSS中可以直接使用颜色名设置各种颜色 比如：red、orange、yellow......
但是在CSS中直接使用颜色名非常不方便

RGB值
   RGB通过三种颜色不同的浓度表示不同的颜色
   R：red G：green B：blue
   每一种颜色的范围在0~255之间或0%~100%
   语法：RGB(红色，绿色，蓝色)
RGBA
   在RGB的基础上增加了A表示不透明度
   需要4个值R G B A
   A的值在0~1之间 1表示完全不透明 0表示完全透明
十六进制RGB值
   语法：#红色绿色蓝色
   颜色浓度通过00~ff表示
   如：红色 #ff0000
   如果两位两位重复，可以简写成#f00
HSL值 HSLA值
   H 色相（0~360）
   S 饱和度：颜色浓度（0%~100%）
   L 亮度（0%~100%）

后续会持续更新