参考链接: CSS教程 | 菜鸟教程
相关文章：
HTML基础复习（告一段落）
HTML中一些元素/属性的区别（更新中）
1 CSS简介
- CSS(Cascading Style Sheets)层叠样式表。
- 定义 如何显示HTML。
| 标准 | 说明 | 解释 |
|---|
| 结构 | 用于对网页元素整理和分类，现阶段主要学习的是HTML | 身体 |
| 表现 | 用于设置网页元素的版式、颜色、大小等外观样式。主要是指CSS | 外观 |
| 行为 | 指网页模型的定义及交互的编写，主要是Javascript | 动作 |
- 样式通常储存在 样式表 中，外部样式表通常储存在 CSS文件 中。
- 多个样式定义可层叠为一个。
- 我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。
2 CSS语法
- 选择器【需要改变样式的HTML元素】 + 一条/多条声明
3 CSS属性书写顺序（重点）
- 盒子布局定位：display/position/float/clear/visibility/overflow
- 盒子自身属性：width/height/margin/padding/border/background
- 文本属性：color/font/text-decoration/text-align
- 其他属性：content/cursor/background
4 CSS 常用的选择器
4.1 标签选择器
4.2 id选择器
- CSS 中以 # 来定义id选择器。
- HTML 中以 id属性 来定义id选择器。
- id选择器可以为标有特定id的HTML元素指定样式。
- id属性不要以数字开头，部分浏览器无法识别。
- 写在 head 标签内，约束在 style 标签里。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World</p>
<p>这个段落不受影响</p>
</body>
</html>
4.3 class选择器
- 用于描述一组元素的样式。
- 有别于id选择器，class可以使用在多个元素中。
- CSS 中以 . 来定义类选择器。
- HTML 中以 class属性 表示。
- 类名第一个字符不能使用数字。
例1：所有拥有center类的HTML元素均为居中
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class选择器</title>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
</body>
例2：指定特定的HTML元素使用class
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class选择器</title>
<style>
p.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">标题不受影响</h1>
<p class="center">段落居中</p>
</body>
例3：多个类选择器
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个类选择器</title>
<style>
.center {
text-align: center;
}
.color {
color: #ff0000;
}
</style>
</head>
<body>
<p class="center color">这是一个示例</p>
<p>这个段落不受影响</p>
</body>
4.4 通配符选择器
- 使用*号作为选择器。
- 可以一次性更改所有元素的样式。
5 CSS创建
- 多重样式优先级
- 内联样式> 内部样式 >外部样式 > 浏览器默认样式
5.1 外部样式表
- 用于样式需要应用到很多页面时。
- 通过改变一个文件来改变整个站点的外观。
- 在头部使用<link>标签链接到样式表。
示例
CSS文件
hr {
background-color: red;
height: 5px;
border: none;
}
p {
margin-left: 20px;
color: aquamarine;
}
body {
background-color: black;
}
HTML文件
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="mystyle1.css" />
</head>
<body>
<p>这是一个示例</p>
<br />
<hr />
</body>
5.2 内部样式表
- 用于单个文档需要特殊的样式。
- 在头部使用 style 标签定义。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表</title>
<style>
hr {
height: 5px;
background-color: sienna;
}
p {
margin-left: 20px;
color: aqua;
text-align: center;
}
body {
background-image: url("saturn-flat.png");
}
</style>
</head>
<body>
<p>这是一个示例</p>
</body>
5.3 内联样式
<body>
<p style="color: red; text-align: center;">这是一个示例</p>
</body>
6 CSS背景
6.1 background-color
6.2 background-image
- 设置一个元素的背景图像。
- 元素的背景是元素的总大小，包括填充和边界，但不包括边距。
- 默认情况下放置在元素的左上角。
- 放置多个图像时，先写的在上层。
- 属性值用时自查。
6.3 background-repeat
| 属性值 | 描述 |
|---|
| repeat-x | 只在水平方向平铺 |
| repeat-y | 只在垂直方向平铺 |
| no-repeat | 设置不平铺 |
6.4 background-position
6.5 background-attachment
| 属性值 | 描述 |
|---|
| scroll | 背景图片随着页面的滚动而滚动，默认 |
| fixed | 背景图片不会随着页面的滚动而滚动 |
| local | 背景图片会随着元素内容的滚动而滚动 |
6.6 background
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
7 CSS Text格式
7.1 color属性
| 属性值 | 描述 |
|---|
| 颜色名称 | 颜色的名称，不区分大小写 |
| 十六进制 | 十六进制符号 #RRGGBB 或 #RGB |
| rgb | 取值是0-255的整数或百分比 |
| rgba | a表示透明度，0=透明 |
| hsl | hue(0是红色，120是绿色，240是蓝色) |
| hsl | saturation饱和度，0%表示灰色阴影，100%是全色 |
| hsl | lightness亮度，百分比 |
| hsla | 和rgba同理 |
7.2 direction属性
| 属性值 | 描述 |
|---|
| ltr | 默认，文本从左到右 |
| rtl | 文本方向从右到左 |
| inherit | 从父元素继承 deriction 的值 |
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本方向</title>
<style>
div.exl {
direction: rtl;
unicode-bidi: bidi-override;
/*可以分别尝试有这一句和没有这一句运行结果的不同*/
}
</style>
</head>
<body>
<p>一些默认方向的文本</p>
<div class="exl">一些文本。从右到左</div>
</body>
</html>
7.3 letter-spacing属性
| 属性值 | 描述 |
|---|
| normal | 默认。规定字符之间没有额外的空间 |
| length | 定义字符间的固定空间（允许使用负值） |
| inherit | 规定从父元素继承属性的值 |
<head>
<style>
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
7.4 line-height属性
| 属性值 | 描述 |
|---|
| normal | 默认。设置合理的行间距 |
| number | 设置数字，此数字回合当前的字体尺寸相乘来设置行间距 |
| length | 设置固定的行间距 |
| % | 基于当前字体尺寸的百分比行间距 |
| inherit | 从父元素继承line-height的值 |
7.5 text-align属性
- 属性值都很常见了，left,right,center。
- 给盒子添加该属性，盒子内的行内元素和行内块元素都会水平居中对齐。
| 属性值 | 描述 |
|---|
| justify | 实现两端对齐文本效果 |
| inherit | 从父元素继承text-align的值 |
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">2022 年 10 月 27 号</p>
<p class="main">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</p>
</body>
7.6 text-decoration属性
- 用于设置或删除文本的装饰。
- 主要是用于删除链接的下划线。
- 实际上是 text-decoration-line text-decoration-color text-decoration-style 三种属性的简写。
| 属性值 | 描述 |
|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 穿过文本的一条线。 |
| inherit | 继承父元素。 |
<style>
h1 {
text-decoration: overline red;
}
h2 {
text-decoration: line-through wavy blue;
}
h3 {
text-decoration: underline dotted green;
}
a {
text-decoration: none;
}
</style>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<a href="https://www.runoob.com">菜鸟教程</a>
</body>
7.7 text-indent属性
7.8 text-shadow属性
text-shadow: h-shadow v-shadow blur color;
| 属性值 | 描述 |
|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的距离 |
| blur | 模糊的距离 |
| color | 阴影的颜色 |
7.9 text-transform属性
| 属性值 | 描述 |
|---|
| none | 默认。小写字母或大写字母都有 |
| capitalize | 每个单词的首字母大写 |
| uppercase | 仅大写字母 |
| lowercase | 仅小写字母 |
| inherit | 继承父元素 |
7.10 unicode-bidi属性
- 和 direction 属性一起使用，设置文本是否被重写。
- 便于在同一文档中支持多种语言。
| 属性值 | 描述 |
|---|
| normal | 默认。不使用附加的嵌入层面 |
| embed | 创建一个附加的嵌入层面 |
| bidi-override | 创建一个附加的嵌入层面。重新排序的方向取决于direction属性（ltr/rtl） |
| initial | 设置该属性为它的默认值 |
| inherit | 继承父元素 |
7.11 vertical-align属性
- 设置行内元素的基线相对于该元素所在行基线的垂直对齐方式。
7.12 white-space属性
7.13 word-spacing属性
8 CSS Fonts
font-style font-variant font-weight font-size/line-height font-family
| 属性 | 描述 |
|---|
| font | 在一个声明中设置所有字体的属性 |
| font-style | 规定字体样式 |
| font-variant | 规定字体异体 |
| font-weight | 规定字体粗细 |
| font-size/line-height | 规定字体尺寸和行高 |
| font-family | 规定字体系列 |
8.1 font-family
- 设置文本的字体系列。
- 当字体系列的名称超过一个字是需要使用引号。
- 多个字体系列使用逗号隔开。
- 属性值就是各种字体的名字，有很多
8.2 font-style
| 属性值 | 描述 |
|---|
| normal | 正常显示文本 |
| italic | 以斜体字显示文本（使用文字的斜体） |
| oblique | 文字向一边倾斜（让没有斜体属性的文字倾斜） |
8.3 font-size
- 用于设置文字的大小。
- 默认值是16px。
- 推荐使用em来设置字体大小。
- 1em的默认大小为16px，em=px/16。
| 字体大小值 | 区别1 | 区别2 |
|---|
| 绝对大小 | 设置一个指定大小的文本 | 不允许用户在浏览器中改变文字大小 |
| 相对大小 | 相对于周围的元素设置大小 | 允许用户在浏览器中改变文字大小 |
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
8.4 font-weight
| 属性值 | 描述 |
|---|
| normal | 默认，对应数是400 |
| bold | 粗体，对应数是700 |
| bolder | 更粗 |
| lighter | 更细 |
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
<body>
<p class="normal">这是一段话</p>
<p class="light">这是一段话</p>
<p class="thick">这是一段话</p>
<p class="thicker">这是一段话</p>
</body>
8.5 font-variant
- 将所有小写字母转换为大写，但是和其他字母相比尺寸会更小。
| 属性值 | 描述 |
|---|
| normal | 默认 |
| small-cap | 显示小型大写字母 |
9 CSS链接
| 链接状态 | 描述 |
|---|
| a:link | 未访问链接 |
| a:visited | 已访问链接 |
| a:hover | 鼠标移动到链接上时 |
| a:active | 鼠标点击时 |
- 顺序规则：L(link)OV(visited)E and H(hover)A(active)TE
- 后者必须在前者定义后定义才有效。
<style>
a:link,
a:visited {
display: block;
font-weight: bold;
color: white;
background-color: greenyellow;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,
a:active {
background-color: green;
}
</style>
<body>
<a target="_blank" href="https://www.baidu.com">这是一个链接</a>
</body>
10 CSS列表
| 属性 | 值 | 描述 |
|---|
| list-style | | 在单个属性中指定所有的列表属性 |
| list-style-image | URL | 将指定的图像设置为列表项标志 |
| – | none | 默认，无图形被显示 |
| list-style-position | inside | 设置列表中列表项标志在文本以内，且环绕文本根据标记对齐 |
| – | outside | 默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| list-style-type | 太多了，自查 | 设置列表项标志的类型 |
| - | none | 用于移除小标记 |
- 使用list-style时属性设置顺序：type/position/image
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.a {
list-style-type: upper-roman;
}
ol.b {
list-style-type: lower-alpha;
}
ol.c {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<body>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
10 CSS表格
<style>
caption {
caption-side: top;
text-align: center;
padding-bottom: 20px;
}
table,
th,
td {
border: 1px solid black;
text-align: center;
}
table {
border-collapse: collapse;
height: auto;
margin-left: auto;
margin-right: auto;
}
th {
background-color: green;
color: white;
padding: 15px;
width: 25%;
}
#odd {
background-color: yellowgreen;
}
</style>
</head>
<body>
<table>
<caption>这是一个表格</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr id="odd">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table>
</body>
- border-collapse 边框折叠
- 表格居中有很多种方法，这里使用了页边距居中。
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
