CSS
层叠样式表
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制整个站点（多） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CssTest</title>
<link rel="stylesheet" href="style_demo.css">
<style>
h2 {
color: red;
}
p {
color: blue;
font-size: 64px;
}
</style>
</head>
<body>
<h1 style="color: yellow;">内联样式</h1>
<h2>内部样式表</h2>
<h3>外部样式表</h3>
<br><br>
<p>内部样式表</p>
<p style="color: red;">内联样式</p>
</body>
</html>
CSS导入方式优先级: 内联样式>内部样式表>外部样式表
选择器
- 元素选择器
- 类选择器
.highlight {
background-color: yellow;
}
<h1 class="highlight">highlight类一级标题</h1>
<h1>一级标题</h1>
- ID选择器
#header1 {
background-color: yellow;
}
<h1 id="header1">header1一级标题</h1>
<h1>一级标题</h1>
- 通用选择器
* {
font-family: 'KaiTi';
}
- 子元素选择器和后代选择器
div > .son {
color: red;
}
div p {
color: yellow;
}
<div>
<h1>子元素选择器示例</h1>
<p class="son">子元素</p>
<div>
<h2>后代选择器示例</h2>
<p class="grandson">后代元素</p>
</div>
</div>
- 交集选择器与并集选择器
h1.important {color: red;
}
h2, p {color: green;}
<h1 class="important">交集选择器</h1>
<h2>并集选择器</h2>
<p>并集选择器</p>
- 相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素
h1 + p {color: red;}
<p>文本</p>
<h1>标题</h1>
<p>文本</p>
- 伪类选择器
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标移动到链接上
- a:active 激活的链接
a:link {color: lightcoral;}
a:visited {color: lightgray;}
a:hover {color: skyblue;}
a:active {color: lightpink;}
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.x-zd.com">x-zd</a>
选择器优先级: ID>类>元素
常用属性
文本字体
font-sizefont-familyfont-weight, 粗细font-style, 倾斜
选择器 { font: font-style font-weight font-size/line-height font-family;}
文本外观
colortext-alignline-height, 行间距text-decoration, 用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。（常用） |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本的一条线。 |
背景
background-color, 如果要设置背景, 元素必须有宽高background-image : none | url(url)background-repeat
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
background-position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
background: 背景颜色 背景图片地址 背景平铺 背景位置;
background-size