Css基础
CSS 语法
CSS 规则集（rule-set）由选择器和声明块组成：
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
Head中定义：
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
ID选择器：
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
注意：id 名称不能以数字开头。
CSS 类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
实例
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：
.center {
text-align: center;
color: red;
}
实例
在这个例子中，只有具有 class="center" 的 <p> 元素会居中对齐：
p.center {
text-align: center;
color: red;
}
HTML 元素也可以引用多个类。
实例
在这个例子中，<p> 元素将根据 class="center" 和 class="large" 进行样式设置：
<p class="center large">这个段落引用两个类。</p>
CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
实例
下面的 CSS 规则会影响页面上的每个 HTML 元素：
* {
text-align: center;
color: blue;
}
CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
最好对选择器进行分组，以最大程度地缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器。
外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式是在 head 部分的 <style> 元素中进行定义。
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
行内css:
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Css文本颜色：
<p style="color:DodgerBlue;">。。</p>
Css边框颜色
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
颜色：RGB
要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。
要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。
通常为所有 3 个光源使用相等的值来定义灰色阴影：
RGBA: 其中的A为透明值
HEX 值：在 CSS 中，可以使用以下格式的十六进制值指定颜色：#rrggbb
#ffffff纯白 #000000纯黑
HSL颜色：色相、饱和度和明度
饱和度：饱和度可以描述为颜色的强度。
100％ 是纯色，没有灰色阴影
50％ 是 50％ 灰色，但是您仍然可以看到颜色。
0％ 是完全灰色，您无法再看到颜色。
亮度
颜色的明暗度可以描述为要赋予颜色多少光，其中 0％ 表示不亮（黑色），50％ 表示 50％ 亮（既不暗也不亮），100％ 表示全明（白）。
HSLA：A同样为透明度：是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：
CSS背景元素：
1.background-color 背景色
2.background-image 元素背景的图像。
例如：body {
background-image: url("paper.gif");
}
p {
background-image: url("paper.gif");
}/*<p>段落设置背景*/
3.background-repeat(css背景重复)：属性在水平和垂直方向上都重复图像。body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
background-repeat: no-repeat; 只显示一次
4.background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
background-attachment: fixed; 固定背景图片
background-attachment: scroll; 背景跟随页面滚动
5.background-position 属性用于指定背景图像的位置。
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top; /*放在右上角*/
}
CSS简写属性：
简写前：body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
简写后：
body {
background: #ffffff url("tree.png") no-repeat right top;
}
注意：在使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
所有CSS背景属性：
background 在一条声明中设置所有背景属性的简写属性。
background-attachment 设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip 规定背景的绘制区域。
background-color 设置元素的背景色。
background-image 设置元素的背景图像。
background-origin 规定在何处放置背景图像。
background-position 设置背景图像的开始位置。
background-repeat 设置背景图像是否及如何重复。
background-size 规定背景图像的尺寸。
CSS边框：
border 属性允许您指定元素边框的样式、宽度和颜色。
border-style 属性指定要显示的边框类型。
允许以下值：
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
p.one {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}
border-color 属性用于设置四个边框的颜色。
如果未设置 border-color，则它将继承元素的颜色。
p.one {
border-style: solid;
border-color: red;
}
border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
边框的颜色也可以使用十六进制值（HEX）来指定，或者使用 RGB 值；也可以使用 HSL 值；
在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
border-style: dotted solid double dashed; 上边框是虚线；右边框是实线；下边框是双线；左边框是虚线
CSS简写边框属性：
p {
border: 5px solid red;
}
左边框：
p {
border-left: 6px solid red;
background-color: lightgrey;
}
CSS圆角边框：
border-radius 属性用于向元素添加圆角边框：
p {
border: 2px solid red;
border-radius: 5px; /*px值越大，角度越圆*/
}
总结：所有CSS边框属性
border 简写属性，在一条声明中设置所有边框属性。
border-color 简写属性，设置四条边框的颜色。
border-radius 简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style 简写属性，设置四条边框的样式。
border-width 简写属性，设置四条边框的宽度。
border-bottom 简写属性，在一条声明中设置所有下边框属性。
border-bottom-color 设置下边框的颜色。
border-bottom-style 设置下边框的样式。
border-bottom-width 设置下边框的宽度。
border-left 简写属性，在一条声明中设置所有左边框属性。
border-left-color 设置左边框的颜色。
border-left-style 设置左边框的样式。
border-left-width 设置左边框的宽度。
border-right 简写属性，在一条声明中设置所有右边框属性。
border-right-color 设置右边框的颜色。
border-right-style 设置右边框的样式。
border-right-width 设置右边框的宽度。
border-top 简写属性，在一条声明中设置所有上边框属性。
border-top-color 设置上边框的颜色。
border-top-style 设置上边框的样式。
border-top-width 设置上边框的宽度。
CSS外边距：
margin 属性用于在任何定义的边框之外，为元素周围创建空间。
margin-top
margin-right
margin-bottom
margin-left
所有外边距属性都可以设置以下值：
Auto - 浏览器来计算外边距
Length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距