共计 1578 个字符，预计需要花费 4 分钟才能阅读完成。
CSS 总结
什么是 CSS
- css 是层叠样式表，能够对网页进行润饰和渲染的一门技术。
如何在网页中应用 CSS
- 1. 间接应用（不举荐）起因：标签中的属性很多，会造成页面凌乱，并且不能被复用。
通过标签上的 style 属性 给 div 设置款式
边框:2px solid red
字体大小:26px
背景色彩为:pink
<div style="border:2px solid red;font-size:26px; background:pink;"> 这是一个 div...</div>`
<div style=”border:2px solid red;font-size:26px; background:pink;”> 这是一个 div…</div>
`
- 2. 在 < head> 中通过 < style> 标签引入 CSS
实现了代码的拆散和复用，初步实现了代码的拆散。
<head>
<style type="text/css">
span{
border:2px solid blue;
font-size:22px;
background:red;
}
</style>
</head>- 3. 应用 link 连贯援用内部 CSS 文件
在 html 中引入 css 文件
<link ref="stylesheet" href="CSS 文件门路">xx.css 文件
@charset "utf-8";
span{
border:2px solid blue;
font-size:22px;
background:red;
}CSS 选择器
- 1. 通过元素名（标签名）抉择指定名称所有被选中的标签
span{}
div{}- 2.class 选择器
每个标签都能够设置一个 class 属性值，通过抉择 class 的值抉择。
.s1{}
.s2{}* 如果一个标签的 class 值由多个 < span class = “s1 s2”>，s2 的设置会笼罩 s1 的设置。
- 3.id 选择器
也能够依据 id 的属性值抉择标签。
#d1{}
#d2{}- 4. 后辈选择器
格局：先人 后辈{}
div p{/* 匹配所有 div 中的 p 标签 */}罕用属性
文本属性
- 1.text-align: 设置元素内的文本内容对齐形式。
- 2.text-decoration：设置文本的下划线形式。
- 3.text-indent：设置文本的缩进，单位：px/%。
- 4.letter-spacing：设置字符间距。
- 5.text-shadow:x（程度位移）x（垂直位移）x（暗影扩散值）x（色彩）; 设置文本暗影。
字体属性
- 1.font-siez: 字体大小。
- 2.font-weight: 文字粗细。
- 3.font-family：字体的格局。
- 4.color: 字体色彩
背景属性
background-color：背景色彩。background-img：设置背景图片，url=“”
*background-repeat：设置或检索背景图片的排列形式（repeat 默认值,repeat- x 横向反复，no-repeat 没有反复）
background-position: 设置或检索背景图片地位background: 背景色彩 背景图片 背景图片是否反复 背景图片的地位
边框 border
border-width:2px; — 设置元素边框的宽度
border-style: solid; — 设置元素边框的款式border-color: red; — 设置元素边框的色彩
margin: 设置元素的外边距
display 属性
display 属性用来设置元素的类型；罕用的值：
block：块级元素的默认值
默认状况下独占一行
能够设置宽高
// 比方: div/p/h1~h6/form/table 等元素都是块级元素
inline：行内元素的默认值
默认状况下多个行内元素能够处在同一行
个别不能设置宽高
// 比方: span/input/img/i/b 等元素都是行内元素
inline-block：行内块元素
多个元素既能够显示在同一行, 也能够设置宽和高
none：示意暗藏元素
正文完
