css
css 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 
选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 为了让CSS可读性更强，你可以每行只描述一个属性:
1
2
3
4
5
6
7
8
<!-- 在html中-->
<style>
p
{
color:red;
text-align:center;
}
</style>
CSS 注释
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
1
2
3
4
5
6
7
8
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
样式
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
外部样式 使用于多个文件
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 ```
1
<link> 标签链接到样式表。 <link> 标签在（文档的）头部：
1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内联样式 单个文件
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
选择器
选择器优先级 行内> id>类>元素
全局选择器(匹配任何元素，优先级最低)
1
2
3
4
5
# *:通配符
*{
margin : 0;
padding : 0;
}
类选择器(灵活)
1
2
3
4
.center {
text-align:center;
}
#只要元素的class 为center即可生效
id选择器
命名不能以数字开头，只能使用一次
1
2
3
4
5
6
<style>
#text{
color:red;
}
</style>
<p id ="text">hi</p>
合并选择器
将重复的元素类型放在一起
1
2
3
4
p,h{
font-size :30px;
color: red;
}
文本属性
text-align文本样式
1
2
3
4
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
#当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
1
p {text-indent:50px;}
text-decoration 文本修饰
text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
1
a {text-decoration:none;}
字体属性
color 颜色
1
2
3
4
5
p{
color: red;
color: color:rgb(255,0,0);#截图工具查找色号
color:#00ff00;
}
font-size 字体大小
chrome 浏览器最多是12px
1
p {font-size:14px}
font-weight 字体粗细
| 值 | 描述 | | :—: | :—: | | bold | 定义粗体字符 | | bolder | 定义更粗的字符 | | lighter | 定义更细的字符 | | 100~900 | 定义由细到粗400等同默认，而700等同于bol1d |
font-style 字体样式
| 值 | 描述 | | :—: | :—: | | normal | 默认值 | | italic | 定义斜体字 |
font-family 字体格式
加引号 :”微软雅黑”
背景
background-color 设置背景颜色
属性定义了元素的背景颜色,页面的背景颜色使用在body的选择器中:
1
body {background-color:#b0c4de;}
background-image 设置背景图
属性描述了元素的背景图像. 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 页面背景图片设置实例:
1
body {background-image:url('paper.gif');}
background-repeat 设置背景重复
| 值 | 描述 | | :—: | :—: | | repeat | 背景图像将向垂直和水平方向重复。这是默认 | | repeat-x | 只有水平位置会重复背景图像 | | repeat-y | 只有垂直位置会重复背景图像 | | no-repeat | background-image 不会重复 | | inherit | 指定 background-repeat 属性设置应该从父元素继承 |
1
2
3
4
5
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}