前端基础之CSS总结（一）

CSS

一、 CSS是什么

• CSS 指层叠样式表 (Cascading Style Sheets)、
  

  样式定义如何显示 HTML 元素、
  样式通常存储在样式表中、
  把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题、
  外部样式表可以极大提高工作效率、
  外部样式表通常存储在 CSS 文件中、
  多个样式定义可层叠为一个、

二、CSS负责结构、表现、行为中的表现，简单的CSS 文档可以改变所有页面的布局和外观

三、CSS创建

• 如何插入样式表：

1. 插入样式表的方法有三种:
   a. 外部样式表(External style sheet)
   页面使用 标签链接到样式表。 标签在（文档的）头部。
   <link rel=“stylesheet” type=“text/css” href=“文件的路径”/>
   将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式。
   b. 内部样式表(Internal style sheet)
   当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style> 标签在文档头部定义内部样式表。
   使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护。
   <style type=“text/css”></style>
   c. 内联样式(Inline style)
   将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。
   <p style=“color:red;”></p>

四、CSS语法

• 选择器

1. 

2. 通过选择器可以选中页面中的一组元素，然后为其设置样式

3. 元素选择器
   根据标签名，选中页面中的指定元素
   语法：标签名{ }
   例子：
   

4. id选择器
   根据元素的id属性值选中一个唯一的元素
   语法：#id {}
   例子：
   

5. 类选择器
   根据元素的class属性值，选中一组元素
   语法：.class{}
   例子：
   

6. 通配选择器
   选中页面中的所有元素
   语法：*{}
   通配选择器的性能比较差，尽量避免使用

7. 并集选择器
   可以同时选中符合多个选择器的元素
   语法：选择器1,选择器2,选择器N{}
   例子：
   

8. 交集选择器
   可以选中满足多个条件的元素
   语法：选择器1选择器2选择器N{}
   例子：
   

9. 后代元素选择器
   选中指定元素的指定后代元素
   语法：祖先元素 后代元素{}
   例子：
   

10. 子元素选择器
    选中指定元素的指定子元素
    语法：父元素 > 子元素 {}
    例子：
    

11. 声明块
    声明块中实际上就是一个一个CSS声明
    声明：
    a.每一个CSS声明都是一个样式，实际上就是一个名值对的结构
    b.名和值之间使用:链接,:左边是样式的名字:右边是样式的值,每一个声明以;结尾
    例子：
    

五、元素之间的关系

a. 父元素
直接包含子元素的的元素叫做父元素
b. 子元素
直接被父元素包含的元素叫做子元素
c.祖先元素
直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素
d.后代元素
直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素
e.兄弟元素
拥有相同父元素的元素叫做兄弟元素

六. 块元素和内联元素

块元素:块元素会独占页面中的一行
一般使用块元素对页面进行布局
常见的块元素：div、 p、 h1~h6…
内联元素:只占用自身的大小，不会独占一行
内联元素也叫行内元素（inline）
一般内联元素都是用来为文本来设置效果
常见的内联:span 、a 、 img…
包裹规则:一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素
a元素可以包含任意元素，除了a本身
p元素不能包含任何块元素

七. 伪类和伪元素

伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置
伪类：

:link 表示一个普通的链接（未访问过的链接）
:visited 表示访问过的链接
:hover 鼠标移入的链接，也可以为其他元素设置hover
:active 正在被点击的链接，也可以为其他元素设置active
:focus 表示元素获取焦点的状态，一般用于文本框
伪元素：
::selection表示内容被选中的状态，在火狐中使用::-moz-selection来代替
:first-letter表示第一个字符
:first-line 表示文字的第一行
:before 选中元素的最前边,一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
:after 选中元素的最后边,一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。

八、属性选择器

• 根据元素的属性选择指定元素
• [属性名]
  选取含有指定属性的元素
• [属性名=“属性值”]
  选取属性值等于指定值的元素
• [属性名^=“属性值”]
  选取属性值以指定内容开头的元素
• [属性名$=“属性值”]
  选取属性值以指定内容结尾的元素
• [属性名*=“属性值”]
  选取属性值中包含指定内容的元素

九、兄弟选择器

• 兄弟元素选择器
  选取后一个兄弟元素：前一个 + 后一个
  选取后边所有的兄弟元素：前一个 ~ 后边所有

十、子元素的伪类

十一、否定伪类

• 从一组元素中将符合要求的元素剔除出去
• 语法：:not(选择器)
• 例子 ：.main:not(div)

十二、样式的继承

• 为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。
• 通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。
• 但是并不是所有的样式都会继承，比如：背景相关的，边框相关的，定位相关的。具体参考文档

十三、选择器的优先级

• 当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级来决定。
• 优先级：
  
• 当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式
• 优先级计算时，总大小不能超过他的最大的数量级
• 可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。
• 继承的样式没有优先级

十四、选择器的性能

• 浏览器在解析一组选择器时，是从后边往前一个一个的解析的
• 如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。
• *通配选择器，性能也比较差，要避免使用通配选择器

十五、单位

• 长度单位
  px：像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成
  一个像素指的就是一个像素点
  在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小
  %：可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值
  当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面
  em：em会相对于当前元素的字体大小来计算
  1em = 1font-size
  em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变
• 颜色单位
  可以直接使用英文单词来表示颜色
  RGB值：所谓RGB值就是通过红 绿 蓝三元色的不同组合来搭配出各种不同的颜色
  语法：rgb(红色,绿色,蓝色)，这三个值需要一个0-255之间的值
  也可以使用百分数来设置RGB值，需要0%-100%之间的值，100%相当于255
  十六进制RGB值：也是一种RGB值的表示方式，不同的是它使用的是16进制数字来表示而不是10进制
  语法：#红色绿色蓝色，这里的颜色需要一个00-ff之间的值
  例子：#ff0000
  如果颜色的是两位两位重复的，可以进行简写，比如 #aabbcc 可以写成 #abc
• 文本样式
  

十六、背景

• CSS 背景属性用于定义HTML元素的背景。
  CSS 属性定义背景效果:
  background-color
  background-image
  background-repeat
  background-attachment
  background-position
  

CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”
例子：

background-image 属性描述了元素的背景图像：
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
例子：

背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调。
平铺效果可以自定义
背景图像- 设置定位与不平铺：
如果你不想让图像平铺，你可以使用 background-repeat 属性
例子：

为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置：
例子：

背景- 简写属性：
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
例子：

当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
按照页面的实际需要使用.

• opacity
  可选值：0~1
  0表示完全透明
  1表示完全不透明

• IE8及以下的浏览器不支持该样式，可以使用滤镜来代替

1. filter:alpha(opacity=值)
2. 这里值需要一个0-100之间的值
3. 0相当于完全透明
4. 100完全不透明