CSS

CSS

CSS（英⽂全称：Cascading Style Sheets）层叠样式表, 是⼀种⽤来表现HTML（标准通⽤标记语⾔

的⼀个应⽤）或XML（标准通⽤标记语⾔的⼀个⼦集）等⽂件样式的计算机语⾔。

使用

基本语法

选择器名 {

属性 : 属性值;

…

}

行内式

• 这是⼀段⽂本

嵌入式

引入外联样式文件

• link rel=“stylesheet” type=“text/css” href=“style.css”>
• style.css p {color: green;font-size: 30px;}

CSS选择器

基本选择器

• 通用选择器

  • *{…}

• 元素选择器

  • 元素名称{…}

• ID选择器

  • #id属性值{…}

• 类选择器

  • .class属性值{…}

• 分组选择器

  • 选择器1，选择器2，…{…}

组合选择器

• 后代选取器(以空格分隔)

  • 选择器1 选择器2 {
    …
    }

• ⼦元素选择器(以⼤于号分隔）

  • 选择器1 + 选择器2 {
    …
    }

• 相邻兄弟选择器（以加号分隔）

  • 选择器1 + 选择器2 {
    …
    }

• 普通兄弟选择器（以波浪线分隔）

  • 选择器1 ~ 选择器2 {
    …
    }

CSS常⽤属性设置

背景

• background-color
• background-image
• background-repeat

⽂本

• color

• text-align

  • center（居中），left（左对⻬），right（右对⻬）

• text-decoration

  • underline

    • 对⽂本添加下划线，与HTML的u元素相同。

  • overline

    • 对⽂本添加上划线。

  • line-through

    • 对⽂本添加中划线，与HTML中的s和 strike 元素相同。

  • none

    • 关闭原本应⽤到元素上的所有装饰。

• text-indent 设置⽂本⾸⾏缩进

字体

• font-family
• font-size
• font-style
• font-weight

对⻬⽅式

规定元素中的⽂本的⽔平对⻬⽅式

• text-align

  • left
  • right
  • center
  • justify
  • inherit

display属性

性规定元素应该⽣成的框的类型

• none
• block
• inline
• inline-block
• list-item

浮动

• float

  • none
  • left
  • right

盒子模型

• border

  • 可同时设置边框的宽度、样式、颜⾊ border: 1px solid black;

  • 使⽤border-width、border-style、border-color单独设置

    border-width: 1px;

    border-style: dotted;

    border-color: green;

  • border-collapse
    设置是否将表格边框折叠为单⼀边框。

    • separate（默认，单元格边框独⽴）
    • collapse（单元格边框合并）

• padding

  默认按照上右下左的顺序设定

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

• margin

  • margin-top
  • margin-left
  • margin-bottom
  • margin-right
  • auto：⾃动，可以理解为居中的意思。
  • margin: auto auto：第⼀个auto表示上下外边距⾃动计算，第⼆个auto表示左右外边距⾃动计算。