1、CSS的几种设置方式
1. 内联样式表
- 在标签内进行设置元素的样式
- 一次只能设置一个标签
- 举例：
<p style="background:red;">这是P标签的演示</p>优先级最高
2. 嵌入样式表
- 页面上的一些元素需要使用同样的样式的时候
- 需要在head标签里面写
<style type="text/css"></style>然后在这个标签下再写
- 范例：
<style type="text/css">
p{
background:yellow;
font-size:xx-small;
}
</style>- 优先级次高
如果里面内容是*则代表全部元素
3. 外部样式表
- 独立于HTML之外，新建一个样式表css
- 样式表中代码规则同嵌入式
- 引用方法一：直接拖到head里面
- 引用方法二：直接写
<link href="test.css" rel="stylesheet" type="text/css" />- 优先级最低
2、样式规则的选择器
1. HTML Selector
- 范例：
<style type="text/css">
p{
background:yellow;
font-size:xx-small;
}
</style>- 缺点：只能同时选所有的相同标签
2. Class Selector
- 需要给想要设置样式的元素的class属性赋值
- 范例：（tt可以省略）
<style type="text/css">
tt.tt1{
background-color:red;
}
</style>
<tt class="tt1">床前明月光，疑是地上霜。举头望明月，我是郭德纲。</tt>- 相同class的同时更改样式
3. ID Selector
- 需要给要设置样式的元素的id属性赋值
- 范例：
<style type="text/css">
#p1{
background-color:red;
}
</style>
<p id="p1">这是P标签的演示</p>- 一般id是唯一的，最好不要多个元素选择同一个id
4. 关联选择器
- 用来选择具有相同处的所有元素
- 范例：
<style type="text/css">
p em{
background-color:red;
}
</style>
<p><em>这是P标签的演示</em></p>5. 组合选择器
- 可以同时选中多个元素进行设置
- 范例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h1, h2, h3, h4, h5, h6, td {
background-color: red;
}
</style>
</head>
<body>
<h1>我是一个粉刷匠</h1>
<h2>我是一个粉刷匠</h2>
<h3>我是一个粉刷匠</h3>
<h4>我是一个粉刷匠</h4>
<h5>我是一个粉刷匠</h5>
<h6>我是一个粉刷匠</h6>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
<tr>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
<td>粉刷本领强</td>
</tr>
</table>
</body>
</html>6. 伪元素选择器
1. 选择和某种状态下的元素
2. 常用的伪元素：
- A:active：选中超链接时的状态
- A:hover：光标移动到超链接上的状态
- A:link：超链接的正常状态
- A:visited：访问过的超链接状态
- P:first-line：段落中的第一行文本
- P:first-letter：段落中的第一个字母
3. 举例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a:active{
text-decoration:none;
}
a:hover{
font-size:xx-large;
}
p::first-letter{
font-size:xx-small;
}
p::first-line{
font-size:xx-large;
}
</style>
</head>
<body>
<p>晋太元中，武陵人捕鱼为业，缘溪行，<br />忘路之远近，忽逢桃花林，夹岸数百步</p>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>3、CSS当中的样式属性
1. 字体
- font-family：字体系列
- font-size：字体大小（xx-small、x-small、small、medium、large、x-large、xx-large）
- font-style：字体样式（normal、italic、oblique
- text-decoration：上划线、下划线、中划线
- font-weight：粗体字的磅值（normal、bold、bolder、lighter、100~900）
- border-top：设置上边框
2. 层（适用于div）
- top：举例上边的距离
- position:absolute：绝对位置（脱离文档流）
- z-index：上下层代号
- margin：div和边界的距离（auto代表自动居中）
- padding：div内部的内容和border的距离
- float：使div漂浮（right向右飘）
3. 文本
- word-spacing：设置单词之间的间距
- letter-spacing：设置字符之间的间距
- text-align：设置文本的水平对齐方式（left、right、center、justfy）
- text-indent：设置第一行文本的缩进值
- line-height：设置文本所在行的行高
4、CSS布局
- 盒子模型
- margin代表div和边界的距离，padding代表div内部的内容和border的距离
评论