CSS 简介
HTML 局限性
用html修改网页外观代价太大
CSS 的作用
CSS(Cascading style sheets)用于进行网页布局
用于改变文字、图片、网页布局、外观
CSS 语法规范
构成
选择器 + 一个或者多个声明：属性: 值;
书写位置
- 内部样式表：
<head></head>标签中，用<style></style>标签声明 - 行内样式表：标签内部
style属性，style="key: value; key: value" - 外部样式表(推荐)：
<link rel="stylesheet" href="文件路径">
规范
- 一般采用分散式：一行设置一个属性值
- 选择器与括号、属性 key/value 之间需要一个空格
- CSS 书写顺序：
- 布局定位属性(display/position/float/clear/visibility/overflow)
- 自身属性(width/height/margin/padding/border/background)
- 文本属性(color/font/text-decoration/text-align/vertical-align)
- 其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow
CSS 选择器
选择器的作用
选出需求的标签
选择器分类
- 基础选择器
- 标签选择器
- id 选择器
- class 选择器
- 通配符选择器
- 复合选择器
选择器使用方式
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 选出所有相同标签 | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id 选择器 | 一次只能选择一个标签 | id 具有唯一性 | 一般和 js 搭配使用 | #red {color: red;} |
| 通配符选择器 | 选择所有标签 | 一般用于设置盒子间距 | 特殊情况使用 | * {color: red;} |
class 多类名
一个标签可以使用多个类选择器定义的css 样式，多个类名之间使用空格分隔
<a href="https://www.baidu.com" class="red green">百度一下，你就知道</a>
字体属性
CSS 字体属性用于定义字体系列、大小、粗细、文字样式
font-family
font-family用于给字体设置系列
多种字体之间使用逗号分隔，从左至右依次匹配
有空格分开的多个单词组成的字体，使用单引号包裹
font-size/line-height
font-size用于设置字体大小，必须使用单位px
line-height用于设置行高
文字垂直居中的技巧：line-height等于元素高度
可以给<body></body>标签设置整个 html 文档的字体大小
标题标签应使用额外样式设置字体大小
font-weight
font-weight用于给字体设置粗细，值可以设置以下几种：
- normal(默认，400)
- bold(粗体，700)
- bolder(特粗体)
- lighter(细体)
- number(100-900)，不能跟单位
font-style
font-style用于设置字体样式，有以下属性值：
- normal
- italic(斜体)
复合属性
复合属性通过font属性设置
font: font-style font-weight font-size/line-height font-family
必须严格按照顺序书写
font-size与font-family必须设置，其他可以省略
文本属性
color
color属性用于设置标签内字体颜色
颜色有三种表示方式
- 英语单词(red、green 等)
- #16 进制表示(用的最多)
- rgb 表示
text-align
text-align用于设置文本对齐方式，有以下三种值：
- center
- left(默认值)
- right
text-decoration
text-decoration用于设置文本装饰，有以下四种值：
- none
- underline
- overline
- line-through
text-indent
text-indent用于设置文本缩进，单位是 px/em，1em 等于一个文字大小
p {text-indent: 2em;}
注意，只缩进首行
line-height
line-height用于设置文字行间距离
line-height = font-size + 上间距 + 下间距，上下间距相等