目录
CSS基础语法
CSS选择器
选择器
基于关系的选择器
伪类
伪元素
优先级别
CSS样式
背景
文本
字体
链接
列表
表格
CSS布局
CSS盒子模型
边框
内边距
外边距
CSS基础语法
为什么要使用CSS
- 样式定义如何显示HTML元素
- 是为了解决内容与表现分离的问题
CSS声明
CSS声明块
CSS规则
CSS选择器
选择器
- ID选择器
- 元素选择器
- 类( class)选择器
- 属性选择器
基于关系的选择器
伪类
伪元素
- ::before 会为当前元素创建一个子元素作为伪元素。
- ::after 用来匹配已选中元素的一个虚拟的最后子元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪元素</title><style>q::before {content: "«";color: blue;}q::after {content: "»";color: red;}</style>
</head>
<body>
<q>一些引用</q>, 他说, <q>比没有好。</q>.
</body>
</html>
优先级别
- 元素选择器和伪元素的级别最低
- 其次是类选择器、属性选择器和伪类
- ID选择器是选择器中级别最高的
- 内联样式总会覆盖外部样式表的任何样式
- !Important 声明将覆盖任何其他声明
CSS样式
背景
文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本</title><style>/* 设置文本颜色 */#p1 {color: lightcoral;}/* 设置文本左对齐 */#p2 {text-align: left;}/* 设置文本居中对齐 */#p3 {text-align: center;}/* 设置文本右对齐 */#p4 {text-align: right;}/* 设置链接样式去掉下划线 */a {text-decoration: none;}/* 设置文本的缩进 */#p5 {text-indent: 50px;}</style>
</head>
<body>
<p id="p1">这是一个段落内容.</p>
<p id="p2">这又是一个段落内容.</p>
<p id="p3">这又是一个段落内容.</p>
<p id="p4">这又是一个段落内容.</p>
<a href="#">这是一个链接</a>
<p id="p5">这还是一个段落内容.</p>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体</title><style>/* 设置字体系列 */#p1 {font-family: "Times New Roman";}/* 设置自定义字体系列 */@font-face {font-family: 'FontAwesome';src: url('font/fontawesome-webfont.eot?v=3.2.1');src: url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight: normal;font-style: normal;}#p2 {font-family: FontAwesome;}#p3 {font-size: larger;font-style: italic;}</style>
</head>
<body>
<p id="p1">this is text.</p>
<p id="p2">this is text too.</p>
<p id="p3">这是一个段落内容.</p>
</body>
</html> 
链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接</title><style>/* 正常，未访问过的链接 */a:link {color: lightgreen;/* 修改链接的文本样式 */text-decoration: none;/* 设置链接的背景颜色 */background-color: lightyellow;}/* 当用户鼠标放在链接上时 */a:hover {color: lightcoral;}/* 用户已访问过的链接 */a:visited {color: lightblue;}/* 链接被点击的那一刻 */a:active {color: lightslategray;}</style>
</head>
<body>
<a href="#">这是一个链接.</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title><style>/* 设置列表项的预定义样式 */#u1 {list-style-type: decimal;}/* 设置列表项的图片样式 */#u2 {list-style-image: url("imgs/mac.png");}/* 设置列表项水平方向排列 */#u3 {list-style-type: none;}#u3>li {float: left;display: inline-block;background-color: lightgreen;padding: 5px;}</style>
</head>
<body>
<ul id="u1"><li>苹果</li><li>西瓜</li><li>香蕉</li>
</ul>
<ul id="u2"><li>苹果</li><li>西瓜</li><li>香蕉</li>
</ul>
<ul id="u3"><li>苹果</li><li>西瓜</li><li>香蕉</li>
</ul>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格</title><style>table, th, td {border: 1px solid lightslategray;border-collapse: collapse;}table {width: 80%;margin: 0px auto;}table th {background-color: lightcoral;color: white;}table th, table td {padding: 10px;}.info {background-color: lightgreen;color: white;}</style>
</head>
<body>
<table><tr><th>名称</th><th>职位</th><th>收入</th></tr><tr class="info"><td>张无忌</td><td>老板</td><td>100000</td></tr><tr><td>小昭</td><td>秘书</td><td>10000</td></tr><tr class="info"><td>周芷若</td><td>主管</td><td>20000</td></tr>
</table>
</body>
</html>
CSS布局
- 两行三列布局
- 三行两列布局
CSS盒子模型
边框
内边距
外边距
