二，CSS入门

一，CSS介绍

1. 定义：
层叠样式表（Cascading Style Sheets），决定了HTML元素以什么样的外观展示。目前主流的是css3，常用组合是div+css。css一般定义在head里
2. 三种引入方式：

• 外观样式表：

    
    
    
    


 



--------------------------
custom.css文件内容：

div {
    height: 1000px;
    background-color: pink;
}

• 内部样式表：

• 内联样式：（不推荐）

二，CSS语法

1. 选择器 {样式属性: 值; 样式属性: 值; }
2. table { background: red; font-size: large;}

三，CSS选择器

1. 类选择器：

• 定义：
  设置样式：. class_name{}

  2. id选择器

  • 定义：
  设置样式： # selector_name
  ######注意：
  id不允许重复
  如果子类和父类有一样的属性，子类会覆盖父类的

  3. 元素/标签选择器：

  • 含义：通过以标签命名的样式选择器就是标签选择器
  • 定义：
  设置样式：table{ attribute: value; attribute: value; }

  4. 所有元素选择器：
  注意：

  1. 如果一个页面上没有设置任何的样式，那么所有元素选择器里设置的样式会覆盖整个界面。
  2. 如果页面已经被设置了部分的样式，那么所有元素选择器里设置的样式只能覆盖其他未被设置的界面。
  • 定义：
• 设置样式：*

5. 与选择器：

• 定义：
• 设置样式： table.span

6. 元素内选择器：

• 定义：
• 设置样式： div span

7. 父元素选择器：

• 定义：
• 设置样式： table > thead

8. 同级选择器：

• 定义：
• 设置样式： table + span

9. 属性选择器：（一般重要）

• 元素里面所有包含xx属性的，都要给它设一个值
• 定义：
  
• 设置样式： [id]

10. 属性值选择器：（一般重要）

• 针对某个属性值
• 定义：
• 设置样式：[id=span1]

11. 属性值模糊选择器V1：

• 基本被淘汰的用法。缺点：它在定义的时候一定要有空格才能匹配到。比如下面这个，我如果定义id=span1，是无法匹配到的。
• 定义：
• 设置样式： [id~=span1]

12. 属性值头索引选择器V1：

• 基本被淘汰的用法。缺点：它在定义的时候一定要有-才能匹配到。比如下面这个，我如果定义id=“span1”，是无法匹配到的，需要写成“sp-an1”。
• 定义：
• 设置样式：[id|=sp]

13. 属性值头索引选择器V3-重点

• 定义：
• 设置样式：[id^=sp]

14. 属性值尾索引选择器V3-重点：

• 定义：
• 设置样式：[id$=an1]

15. 属性值模糊选择器V3-重点：

• 定义：
• 设置样式：[id*=an]

16. 未访问选择器：

• 定义：
• 设置样式：link

17. 访问选择器：

• 定义：
• 设置样式：:visited

    
    
    



    点击

18. 激活选择器：

• 定义：
• 设置样式：:active

    
    
    




    点击

19. 悬停选择器：

• 定义：
• 设置样式：:hover

    
    
    




    点击

四，CSS尺寸样式

1. width:

• auto: 浏览器自动推断
• px：通过像素来设置元素的宽度
• 百分百：根据百分比来设置元素的宽度
  2. height：
• auto: 浏览器自动推断
• px：通过像素来设置元素的宽度
• 百分百：根据百分比来设置元素的宽度
  ps：如果不设置宽度，自动会把父级的宽度直接继承过来，就是浏览器的宽度。但是不设置高度就不行。

五，CSS背景样式

1. background-color：设置背景颜色

• 颜色3种格式：

1. #000000
2. RGB:RGB(0,0,0)
3. 英文名称：black

• 定义： table{background:black}

2. background-image：设置背景图片

• 如果是只设置图片，默认是水平和平行都会平铺
• 定义：background-image: url(“image/xxx”);

3. background-repeat：设置背景平铺方向

• no repeat（不平铺）
• repeat -x （横向平铺）
• repeat -y （纵向平铺）

4. background-attachment ：背景图像是否随着页面的其余部分滚动（用的少）

• fixed（窗口内容滚动图片不滚动，所以图片与其他内容相对滚动）
• scroll（窗口内容滚动图片也跟着滚动，所以图片与其他内容相对静止）

5. background-position：背景图像的位置

• 使用该属性时一定要将background-attachment的属性设置为fixed
• top left
• x% y%
• xpx ypx

6. background-size ：背景图片的尺寸

• auto：图片原始的宽度和高度
• px：通过像素来定义图片的宽高（第一位是宽，第二位是高）
• percent：根据所在元素的宽高来定义图片大小
• conver：将图片填充整个元素，整个背景（如果大小不够会被拉伸，直到充满）
• content：元素包含整个图片（如果div大小小于图片大小，图片是自动缩小，以达到整张图片完整显示）

七，CSS外边距样式

注意：

1. 同级元素外间距之间的间隔（外边框四面都是同样间距）
2. 如果不设置的话，外边距默认是8px

• margin：设置四面的外间距
• margin-bottom：设置下边的外间距
• margin-left： 设置左边的外间距
• margin-right： 设置右边的外间距
• margin-top： 设置上边的外间距
  设置长度：
• auto：浏览器自动推断
• px：根据像素来设置
• 百分比：根据百分比来设置

八，CSS内边距样式

• padding：设置四面的内间距
• padding-bottom：设置下边的内间距
• padding-left ：设置左边的内间距
• padding-right ：设置右边的内间距
• padding-top：设置上边的内间距
  设置宽度高度：
• auto：浏览器自动推断
• px：根据像素来设置
• 百分比：根据百分比来设置

九，CSS定位样式-重点

1. position：

• static：默认，不定位
• absolute：绝对元素定位
• relative：相对于定位
• fixed：绝对元素定位，相对于浏览器

2. top：
3. right：
4. bottom：
5. left：
   设置长度：

• auto：浏览器自动推断
• px：根据像素来设置
• 百分比：根据百分比来设置

十，CSS文本样式

1. color:
   颜色的三种格式：

• 16进制： #000000
• RGB：RGB(0,0,0)
• 英文名称：black

2. text-align：

• left：默认值，设置文本水平对齐方式居左
• right：设置文本水平对齐方式居右
• center：设置文本水平对齐方式居中