目录
1. CSS简介
层叠样式表，样式定义如何显示HTML元素。
- 样式通常存储在样式表中
- 外部样式表通常存储在CSS文件中，可以提高工作效率
- 多个样式定义可层叠为一
2. 样式层叠次序
-
样式分类
- 浏览器缺省设置
- 外部样式表
- 内部样式表（<head>标签内部）
- 内联样式（HTML元素内部）
- 内联样式优先级最高
3. CSS基础语法
CSS规则主要由两部分组成：选择器、一条或多条声明
<!--选择器：h1，属性：color、font-size，值：red、14px-->
h1 {color:red; font-size:14px;} - 选择器决定该样式定义对哪些元素起作用，通常需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成，属性和值用：分隔
- 属性：所要设置的样式属性
- 值的不同写法（以上面的red为例）
- 英文单词 red
- 十六进制 #ff0000；
- 缩写形式 #f00；
- rgb（255,0,0）；
- rgb（100%，0%，0%）；
- 若值为若干单词，需要给值加上""
- 若定义不止一个声明，用分号将每个声明分开
4. CSS样式单的基本使用
CSS样式单可以控制HTML文档的显示
- 四种使用样式单的方式：
- 链接外部样式文件
- 导入外部式文件
- 使用内部样式定义
- 使用内联样式
-
4.1 链接外部样式文件
- 彻底将样式文件与HTML文档分离
- 样式文件需要额外引用
- 一批样式可以控制多个HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 链接外部CSS样式单</title>
<!--rel和type表明该页面使用了CSS样式单,href属性的值则指向CSS样式单文件的地址-->
<link rel="stylesheet" type="text/css" href="Outter.css"
</head>
<body>
<table>
<tr>
<td>HTML 从入门到精通</td>
</tr>
<tr>
<td>CSS 从入门到精通</td>
</tr>
<tr>
<td>JavaScript 从入门到精通</td>
</tr>
</table>
</body>
</html>-
4.2 导入外部式文件
- 类似于链接外部样式文件
- 使用@import引入外部样式文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 导入外部式文件</title>
<style type="text/css">
@import "Outter.css";
</style>
</head>
<body>
<table>
<tr>
<td>HTML 从入门到精通</td>
</tr>
<tr>
<td>CSS 从入门到精通</td>
</tr>
<tr>
<td>JavaScript 从入门到精通</td>
</tr>
</table>
</body>
</html>-
4.3 使用内部样式定义
- 在HTML文档头定义样式单
- 每批CSS样式只控制一份HTML文档
- 缺点：
- 当此CSS样式被其他HTML文档使用，必须在其他HTML文档中重复定义
- 大量CSS嵌套在HTML文档中，HTML文档过大，网络负载加重
- 不利于项目管理 —— 若修改网页风格，依次打开页面进行重复修改。
- 优点：使某些CSS样式仅对某个页面有效而不影响整个网站，使用内部样式定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式单</title>
<style type="text/css">
table {
background-color:#003366;
width: 400px;
}
td {
background-color:#fff;
font-family:"楷体_GB2312";
font-size:20px;
text-shadow:-8px 6px 2px #333;
}
.title {
ont-size: 18px;
color: #60C;
height: 30px;
width: 200px;
border-top: 3px solid #CCCCCC;
border-left: 3px solid #CCCCCC;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;
}
</style>
</head>
<body>
<table>
<tr>
<td>HTML 从入门到精通</td>
</tr>
<tr>
<td>CSS 从入门到精通</td>
</tr>
<tr>
<td>JavaScript 从入门到精通</td>
</tr>
</table>
</body>
</html>-
4.4 使用内联样式
- 将样式内联定义到具体的HTML元素
- 每批CSS样式值空时单个HTML元素
- 用于精确控制一个HTML元素的表现
- 几乎所有的HTML元素都增加了一个style通用属性，该属性值是一个或者多个CSS样式定义，多个CSS样式定义之间以英文分号隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联样式</title>
</head>
<body>
<div style="font-size: 18px;
color: #60C;
height: 30px;
width: 200px;
border-top: 3px solid #CCCCCC;
border-left: 3px solid #CCCCCC;
border-bottom: 3px solid #000000;
border-right: 3px solid #000000;">
前端:
</div><hr />
<table style="background-color:#003366;
width: 400px;">
<tr>
<td style=" background-color:#fff;
font-family:' 楷体_GB2312';
font-size:20px;
text-shadow:-8px 6px 2px #333;">HTML 从入门到精通</td>
</tr>
<tr>
<td style=" background-color:#fff;
font-family:' 楷体_GB2312';
font-size:20px;
text-shadow:-8px 6px 2px #333;">CSS 从入门到精通</td>
</tr>
<tr>
<td style=" background-color:#fff;
font-family:' 楷体_GB2312';
font-size:20px;
text-shadow:-8px 6px 2px #333;">JavaScript 从入门到精通</td>
</tr>
</table>
</body>
</html>5. CSS选择器
-
5.1 元素选择器
在样式中写元素名称
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
div{
background-color: plum;
font:initial normal bold 14pt normal "微软雅黑";
}
p{
background-color: powderblue;
color: darkorchid;
font: normal bold 22pt normal "楷体";
}
</style>
</head>
<body>
<div>
div啊
</div>
<p>
p啊
</p>
</body>
</html>-
5.2 属性选择器
元素选择器是属性选择器的特例
- 当多个CSS样式定义都可以对某个HTML元素起作用时，该HTML元素的显示外观将是多个CSS样式定义"迭加"作用的效果。如果多个CSS样式定义之间有冲突时，则冲突属性以优先级更高的CSS样式取胜。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
div{
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
div[id]{
background-color: darkgrey;
}
div[id^=xx]{
background-color: chartreuse
}
div[id=xx]{
background-color: salmon
}
</style>
</head>
<body>
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx⼦子字符串串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值等于xx的div元素</div>
</body>
</html>-
5.3 ID选择器
指定CSS样式将会对具有指定id属性值的HTML元素起作用
在同一个html页面中，id属性值必须是唯一的，不能重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
div {
width: 200px;
height: 30px;
background-color: #ddd;
padding: 3px; }
/*只对指定元素起作用*/
#xx {
border:2px dotted black;
background-color: #888;
}
</style>
</head>
<body>
<div> 没有任何属性的div元素</div>
<div id="xx">id 属性值为xx的div元素</div>
</body>
</html>-
5.4 class选择器
指定CSS样式对具有指定class属性的元素起作用
- 几乎所有的HTML元素都可指定class属性，该属性唯一的作用是让class选择器起作用。
- 在同一个HTML页面中多个标签是可以指定同名的class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.myclass {
width: 240px;
height: 40px;
background-color: #dddddd;
}
div.myclass {
border:2px dotted black;
background-color: #888888;
}
</style>
</head>
<body>
<p class="myclass">class 属性为myclass的P元素</p>
<!--两个CSS样式叠加效果-，class选择器优先级更高->
<div class="myclass">class 属性为myclass的div元素</div>
</body>
</html>优先级：id选择器 > class选择器 > 标签选择器
-
5.5 包含选择器
指定目标选择器必须处于某个选择器对应的元素内部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style type="text/css">
div{
width: 300px;
height: 60px;
background-color: #eee;
border: 5px solid black;
}
div.a{
width: 200px;
height: 40px;
background-color:darkmagenta;
border: 2px dotted black;
}
</style>
</head>
<body>
<div> 没有任何属性的div元素</div>
<div>
<p class="a"> 处于div内部且class属性为a的元素</p>
</div>
<p class="a"> 处于div之外，但class属性为a的元素</p>
</body>
</html>-
5.6 子选择器
指定目标选择器必须是某个选择器对应元素的子元素
- 类似于包含选择器，区别：
- 对于包含选择器，只要目标选择器位于外部选择器对应的元素内部就行。即， " 孙子元素 " 也可以；
- 对于子选择器，目标选择器必须作为外部选择器对应元素的直接子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style type="text/css">
div{
width: 300px;
height: 60px;
background-color: #eee;
border: 5px solid black;
}
div.a{
width: 200px;
height: 40px;
background-color:darkmagenta;
border: 2px dotted black;
}
</style>
</head>
<body>
<div> 没有任何属性的div元素</div>
<div>
<p class="a"> 处于div内部且class属性为a的元素，并且为直接子元素</p>
</div>
<div>
<section>
<p class="a"> 处于div内部且class属性为a的元素，并且为孙子元素 </p>
</section>
</div>
</body>
</html>6. CSS样式
-
6.1 CSS背景
CSS允许以纯色为背景，也允许使用图片为背景。
- 6.1.1 背景颜色
- 使用background-color设置背景颜色，不能继承，默认值transparent（透明）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-color: paleturquoise;}
h1{background-color: hotpink}
p{background-color:mediumpurple;padding: 20px;}/*设置内边距*/
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<p>段落</p>
</body>
</html>- 6.1.2 背景图片
- 使用background-image设置背景图片，不能继承，必须设置一个url值，可以应用于段落、超链接等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-image: url(img/海景1.jpg);}
p{background-image: url(img/5.jpg); padding: 20px;}/*设置内边距*/
a.radio{background-image: url(img/3.jpg); }
</style>
</head>
<body>
<p>有背景图片的段落</p>
<a href="#" class="radio">我是一个带有背景图片的超链接啊</a>
</body>
</html>- 6.1.3 背景重复
- 使用background-image设置背景是否重复（默认第一个元素在左上角），4个属性表示平复方式：
- repeat（默认）：在整个页面上平铺
- repeat-x：只在水平方向上重复
- repeat-y：只在垂直方向上平铺
- no-repeat：不在任何方向上平铺
- 使用background-image设置背景是否重复（默认第一个元素在左上角），4个属性表示平复方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-image: url(img/海景1.jpg); background-repeat: repeat-x;}
</style>
</head>
<body>
</body>
</html>- 6.1.4 背景定位
使用background-image设置背景在浏览器中的位置，设置的关键字：top、bottom、left、right、center
body{background-image: url(img/海景1.jpg);
/*
* 两个关键字，一个对应水平方向，一个对应垂直方向
* 若只有一个关键字，则默认另一个关键字是center
*/
background-position: top center;
/*
* 也可以用百分数值和长度值来标记位置
*/
/*background-position: 0% 50%;
图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置
background-position: 50px 10px; */
}- 6.1.5 背景关联
使用 background-attachment 设置背景图片是否随着文档滚动，两个值：fixed（不随文档滚动），scroll（默认，随文档滚动）
body{background-image: url(img/海景1.jpg);
background-attachment: fixed;
}-
6.2 CSS文本
可以定义文本的外观
- 6.2.1 缩进文本
使用 text-indent 使所有元素的第一行缩进一个给定的长度
/*使所有段落的首行缩进5em*/
p {text-indent: 5em;}
/*首行悬挂缩进，为了避免某些文本会超出浏览器窗口的左边界，设置外边距或内边距*/
p {text-indent: -5em; padding-left: 5em;}
/*用百分值表示缩进值，缩进值是⽗元素的 20%，即 100 个像素*/
div {width: 500px;}
p {text-indent: 20%;}
- 6.2.2 水平对齐
使用 text-align 来设置文本行相互之间的对齐方式，值 left、right 和 center 使文本分别左对齐、右对齐和居中。
<CENTER>既影响文本，又将整个元素居中； text-align 不控制元素对其，只影响内部内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平对齐</title>
<style>
p#id{text-align: center;}
</style>
</head>
<body>
<p>段落</p>
<p id="id">另一个段落</p>
</body>
</html>- 6.2.3 字间隔
使用word-spacing 来改变字（单词）之间的标准间隔，默认值normal（显示同值为0）.
若提供一个正长度值，字间隔会增加；提供一个负长度值，拉近字间隔。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字间隔</title>
<style>
p.tight{word-spacing: 30px;}
p.spread{word-spacing: -0.5em;}
</style>
</head>
<body>
<p class="spread">bonjour，mon ami！</p>
<p class="tight">c'est la vie！'</p>
</body>
</html>- 6.2.4 字母间隔
使用 letter-spacing 来改变字符之间的间隔，类似于word-spacing
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字母间隔</title>
<style>
p.tight{letter-spacing: 30px;}
p.spread{letter-spacing: -0.1em;}
</style>
</head>
<body>
<p class="spread">bonjour，mon ami！</p>
<p class="tight">c'est la vie！'</p>
</body>
</html>- 6.2.4 字符转换
使用 text-transform 属性处理文本的大小写
- 四个值：none(原样)、uppercase(全大写)、lowercase(全小写)、capitalize(首字母大写)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符转换</title>
<style type="text/css">
h1{text-transform: uppercase;}
</style>
</head>
<body>
<h1>bonjour，mon ami！</h1>
<h2>c'est la vie！'</h2>
</body>
</html>- 6.2.5 文本装饰
使用 text-decoration 来标记下划线等
- 5个值：
- none：关闭所有装饰（超链接默认会有下划线，可以使用该值去掉）
- underline：加下划线
- overline：加上划线
- line-through：加中划线
- blink：文本闪烁
- 6.2.6 CSS链接
用于向某些选择器添加特殊的效果
- 锚伪类
- 链接的不同状态可以用不同的样式显示，有四种状态：
- 活动状态：active
- 未被访问：link
- 已被访问：visited
- 鼠标悬停状态：hover
- a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
- a:active 必须被置于 a:hover 之后，才是有效的
- 链接的不同状态可以用不同的样式显示，有四种状态：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS伪类</title>
<style>
/*link状态*/
a:link{
/*文本修饰*/
text-decoration: none;
color: #F00;
}
/*visited状态*/
a:visited{
color: #CCC;
font-size: 26px;
}
/*hover状态*/
a:hover{
color: #00F;
/*文本修饰*/
text-decoration: underline;
font-size: 20px;
}
/*active状态*/
a:active{
color: #0F0;
/*文本修饰*/
text-decoration: none;
font-size: 24px;
}
</style>
</head>
<body>
<a href="目标页面.html">超链接</a>
</body>
</html>-
6.3 CSS字体
定义字体系列
- 6.3.1 指定字体系列
使用 font-family 定义文本的字体系列
- 在 CSS 中，有两种不同类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
- 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
- 除了了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体系列</title>
<style type="text/css">
h1{font-family: georgia,serif;}
</style>
</head>
<body>
<h1>bonjour，mon ami！</h1>
<p>c'est la vie！'</p>
</body>
</html>- 6.3.2 字体风格
使用 font-style 设置斜体等
- 三个值：
- normal：文本正常显示
- italic：文本斜体显示（是一种字体风格）
- oblique：文本倾斜显示（比斜体倾斜角度更大）
- 6.3.3 字体加粗
使用font-weight 设置文本的粗细，使用bold关键字设置为粗体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.normal{font-weight: normal;}
p.thick{font-weight: bold;}
p.thicker{font-weight: 900;}
</style>
</head>
<body>
<p class="normal">bonjour，mon ami！</p>
<p class="thick">c'est la vie！</p>
<p class="thicker">amour</p>
</body>
</html>- 6.3.4 字体大小
使用 font-size 设置文本的大小
- 值可以使相对的，也可以是绝对的。
- 绝对：将文本设置为指定的大小，用户无法在浏览器中改变文本的大小
- 相对：相较于周围的元素设置大小，用户可以在浏览器中改变文本的大小（默认16px）
- 1em等于当前字体尺寸，em与px的关系需要通过父元素的font-size确定。
- 浏览器中默认的文本大小是 16px。因此 1em 的默认尺寸是 16px。
- 假设父元素的font-size是20px，则1em=20px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{font-size: 60px;}
h2{font-size: 2.5em;} /*40px*/
h3{font-size: 0.875em;} /*14px*/
</style>
</head>
<body>
<h1 class="normal">bonjour，mon ami！</h1>
<h2 class="thick">c'est la vie！</h2>
<p class="thicker">amour</p>
</body>
</html>-
6.4 CSS列表
可以设置、改变列表项标志
-
6.4.1 列表样式
使用 list-style-type 设置列表项的样式
- 6.4.2 列表项图像
使用 list-style-image 设置图像为列表项标志
- 6.4.3 列表位置
使用 list-style-position 设置列表中列表项标志的位置
ul.2{
/*自定义一个列表标记*/
/*列表样式类型*/
list-style-type:upper-roman;
list-style-position: initial;
}
ul.1{
list-style-type: square;
}
ul.0{
/*将指定图片设置为列表标记*/
list-style-image: url(img/key.jpg);
}-
6.5 CSS表格
- 6.5.1表格边框
使用border设置表格边框
- 6.5.2 折叠边框
使用border-collapse设置是否将表格边框折叠为单一边框
- 6.5.3 表格的宽度和高度
使用width和height设置表格的宽度和高度
- 6.5.4 表格文本对齐
使用text-align和vertical-align分别设置水平对齐方式和垂直对齐方式
- 6.5.5 表格内边距
使用 padding 设置表格中内容与边框的距离
- 6.5.6 表格的边框样式
使用border-style设置边框样式（solid：单实线 double：双实线 dotted：点 dashed：虚线）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格属性</title>
<style type="text/css">
table{
/*边框线的合并*/
border-collapse: collapse;
height:40px;
}
th{
/*边框样式的简写属性：border：边框宽度 边框样式 边框颜色*/
border: 1px solid blueviolet;
width: 100px;
height:50px;
vertical-align: bottom; /*垂直对齐模式*/
border-top-style: dotted; /*设置上边框样式为虚线*/
border-left-style: dashed;/*设置左边框样式为虚线*/
}
td{
text-align: center; /*水平对齐模式*/
padding: 15px; /*设置内边距*/
}
</style>
</head>
<body>
<table border="1" align="center" width="300px" height="100px">
<thread>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thread>
<tbody>
<tr>
<td>lila</td>
<td>女</td>
<td>21</td>
</tr>
<tr>
<td>ronnie</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>nina</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>-
6.6 CSS浮动
使用 float 设置浮动，使用clear设置不浮动
- 设置浮动的标签会脱离当前文档流，遇到边框停止。后面依次排队的元素就会默认的填充当前文档流（流式布局—随着浏览器的显示大小而改变位置）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#dl1{
width: 200px;
height: 200px;
background-color: lightblue;
border: 1px solid #000;
/*设置浮动属性*/
float: right;
}
#dl2{
width: 200px;
height: 200px;
background-color:pink;
border: 1px solid #000;
}
#dl3{
width: 200px;
height: 200px;
background-color: plum;
border: 1px solid #000;
}
#clear{
/*清除浮动:左右两边都不浮动*/
clear: both;
}
</style>
</head>
<body>
<div id="dl1">div1</div>
<div id="clear">div</div>
<div id="dl2">div2</div>
<div id="dl3">div3</div>
</body>
</html>-
6.7 CSS定位
使用position设置定位
-
三种定位方式
-
相对定位 relative：相对于原来元素的位置进行移动
-
绝对定位 absolute：相对于父标签（body或其他标签）的位置进行移动
-
固定定位 fixed：不会随着滚动条而滚动，应用于某些网站中的广告（必须使用点击关闭）
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #00F;
}
#dl1{
background-color: plum;
}
#dl2{
background-color:paleturquoise;
}
#dl3{
background-color: lightpink;
/*相对定位*/
position: relative;
/*position:absolute;*/
top:10px;
left: 20px;
}
#adv{
background-color: peachpuff;
/*固定定位*/
position: fixed;
top:200px;
left: 250px;
}
</style>
</head>
<body>
<div id="dl1">div1</div>
<div id="dl2">div2</div>
<div id="dl3">div3</div>
</body>
</html>7. CSS盒子模型
盒子模型 Box Model规定了元素框处理元素内容、内边距、边框和外边距的方式。
-
7.1 概述
元素框的最内部是内容，直接包围内容的是内边距。内边距的边缘是边框，边框外是外边距，外边距默认为透明的。
- 背景应用的范围：内容+内边距+边框
- 内边距（padding）、边框（border）和外边距（margin）默认值为0；增加这些影响的不是内容区域的尺寸，而是增加元素框的总尺寸。
- width和height修饰内容区域的宽度和高度
-
7.2 内边距
内边距是边框和内容之间的空间，padding属性可以控制该区域。
-
7.2.1 padding属性
定义元素的内边距。可以使用长度值或百分比值设置padding，但不可使用负值。
- 可以按照上右下左的顺序分别设置各边的内边距
- 如果设置的是百分比值，则根据其父元素的width计算。
- 注：上下内边距的百分数会想对于父元素宽度设置，而不是相对于高度
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
//等同于
h1 {padding: 10px 0.25em 2ex 20%;}-
7.3 边框
围绕元素内容和内边距的一条或多条线。border属性可以规定元素边框的样式、宽度及颜色。
- 元素的背景包括边框。当边框为虚线时，可见部分应该出现背景。
- 边框的样式控制着边框的显示，当设置 border-style：outset；该边框在视觉上是突出的效果。
- 可以为一个边框定义多个样式，依照上右下左的顺序。
- 可以使用border-width设置边框宽度，可以定义单边宽度，也可以定义多边宽度
- 设置方式
- 指定长度值 eg：2px
- 3个关键字
- thin、medium、thick
- 设置方式
- 若将border-style设置为none，则边框不存在。即使设置了别的属性，也无法展示出来。
- 可以使用border-color设置边框颜色
- 可以一次设置多个边，若颜色值小于四个，则采用值复制（上下同色，左右同色）
- 当设置边框颜色值为transparent时，边框是透明的，即不可见。
7.4 外边距
围绕在元素边框的空⽩白区域是外边距。
-
7.4.1 margin属性
设置外边距，可以使用任何长度单位、百分比值以及负值设置margin。
- margin可以设置为auto，默认值是0。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin属性</title>
<style type="text/css">
h1{margin:auto}
h2{margin: 0.25in;} /*每个边0.25英尺的空白*/
h3{margin:10px 0px 15px 20px} /*四个边定义不同的外边距：上右下左*/
p{margin:20%}/*相对于父元素计算*/
</style>
</head>
<body>
<h1 class="normal">bonjour，mon ami！</h1>
<h2 class="thick">c'est la vie！</h2>
<h3 class="thicker">amour</h3>
<p class="thicker">belle</p>
</body>
</html>-
7.4.2 值复制
CSS允许为外边距指定少于4个值，少左同右，少下同上，少右同上。
- 因此，我们只用指定必要的值，而不需要全部指定。
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
-
7.4.3 单边外边距属性
若想要控制元素单边上的外边距，使用单边外边距属性。
-
可以使用任何一个属性来只设置对应的单边外边距，而不会直接影响所有其他外边距：
margin-top 、margin-right 、margin-bottom 、margin-left
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
