CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1 CSS应用方式
1.1 在标签上
在标签内定义style属性并进行相应的样式定义，实例如下
<img src="..." style="height:100px" />
<div style="color:red;">中国联通</div>
1.2 在head标签内
在html内的head标签内定义style标签，在style标签内书写各种css样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color:red;
}
</style>
</head>
<body>
</body>
</html>
1.3 独立文件的方式
建立.css文件，直接在css文件内书写样式
在html文件的head标签内通过link标签调用即可，实例如下：
rel 属性定义了当前文档与链接资源之间的关系，stylesheet 表示链接到一个外部CSS样式表。
href 属性用于指定链接资源的URL
<link rel="stylesheet" href="css_file.css">
2 选择器
在CSS中，选择器是选取需设置样式的元素的模式；css选择器指明了css样式的作用对象，即“样式”作用于网页中的哪些元素，语法格式“选择器{样式}”。HTML页面中的元素就是通过CSS选择器进行控制的。
选择器大概分为以下几类：ID选择器，类选择器，属性选择器，标签选择器，后代选择器
2.1 ID选择器
以#ID的方式选中标签，div标签id且id=‘c1’，则可以通过#c1的方式选中该标签，并在{}内完成样式的属性
#c1{
color: red;
}
<div id='c1'>ID选择器</div>
2.2 类选择器
.c1{
color: red;
}
<div clss='c1'>类选择器</div>
2.3 标签选择器
标签选择器会使得html内所有的相同的标签生效
div{
color: red;
}
<div>标签选择器</div>
2.4 属性选择器
属性选择器就是通过标签和类等选择其相应的属性，进而实现相应的样式修饰。如下图，可以选择标签为input且属性为type=‘text’进行相关的修饰；选择v1类且属性为xx='456’进行修饰。
input[type='text']{
border: 1px solid red;
}
.v1[xx="456"]{
color: gold;
}
<input type="text">
<input type="password">
<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>
2.5 后代选择器【包含选择器】
后代选择器可以选择作为某元素后代的元素，后代选择器包含的是其后代的所有元素,所以子元素，子元素的子元素，子元素的…的子元素都被会选中。如下所示，class=‘yy’标签内的所有a标签都会被设置成粉色。
.yy a{
color: pink;
}
<div class="yy">
<a>百度</a>
<div>
<a>谷歌</a>
</div>
</div>
2.6 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，子元素选择器使用大于号>作为标识，如下所示，div标签内只有百度被设置成紫色，而谷歌不会被设置成紫色。
.yy>a{
color: purple;
}
<div class="yy">
<a>百度</a>
<div>
<a>谷歌</a>
</div>
</div>
2.7 通用兄弟选择器
兄弟选择符~~，位置无须紧邻，只须同层级，A~B 选择A元素“之后”所有同层级B元素。如下所示，百度，谷歌，雅虎都会被设置成紫色。
.yy~a{
color: purple;
}
<div class="yy">
<a>百度</a>
<a>谷歌</a>
<a>雅虎</a>
</div>
2.8 相邻兄弟选择器
相邻兄弟选择器+可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素,前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用
h1+p{
color: red;
}
<div class="yy">
<h1>百度</h1>
<p>谷歌</p>
<div>雅虎</div>
</div>
3 样式
3.1 高度和宽度
- 高度：xxxpx;
- 宽度：xxxpx; 同时支持百分比
- 对行内标签无效；
- 对块级标签有效，因为块级标签默认独占一整行
.c1{
height: 300px;
width: 500px;
}
3.2 display显示
display: block；表示这个元素是块级元素，垂直显示，宽度自动撑满，可以设置宽高。
display: inline；表示这个元素是内联元素，并排显示，宽度自动收缩，不能设置宽高。
display:inline-block；表示这个元素是内联块，既可以设置宽高又可以并排显示。
.c1{
display: inline;
display: block;
display:inline-block;
}
3.3 字体设置
- 颜色 color
- 字体大小 font-size
- 字体样式 font-family
- 字体粗细 font-weight
.div_class{
height:500px;
width: 50%;
display: inline-block;
color: #00FF7F;
font-size:58px;
font-weight:600;
font-family:Microsoft Yahei;
}
3.4 文字对齐方式
水平方向属性：text-align 默认是左对齐，只能针对文本文字和img标签生效，对其他标签无效。
垂直方向属性：line-height，用于对网页文字及其他元素设置行高。高度等于标签内height高度就会显示垂直居中。
.c1{
height: 59px;
width: 300px;
border: 1px solid red;
text-align: center;
line-height: 59px;
}
3.5 浮动
浮动float：标签如果含有float属性，则会脱离文档流，进入浮动流；浮动流可以理解为标准文档流之上的一个图层；
float属性值：left；right；none(默认，不浮动)
- 浮动元素之间共享一行
- 浮动元素的width、height默认由元素内容决定，而不是由父级决定
- 浮动元素支持通过width、height、padding、border、margin来指定盒子内容区、内外边距、边框大小
- 浮动元素之间不会因为空格、换行产生空隙，浮动元素之间是紧密贴合的
.item {
float: left;
width: 280px;
height: 170px;
border: 1px solid red;
}
3.6 内边距
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
.outer{
border: 1px red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
3.7 外边距
CSS margin(外边距)属性定义元素周围的空间。margin属性应用于元素外面的空间，或者是位于元素和浏览器窗口之间的区域，或者元素和元素直接的区域。
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
3521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
