CSS(Cascading Style Sheets)
CSS样式规则：
<style>
选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; }
</style>
选择器
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素选择器*/
div{
color: red;
}
/*类选择器--以class定义的类*/
.chifan{
color: deeppink;
}
/*ID选择器*/
#div1{
color: greenyellow;
}
/*
按照选择器搜索精确度来编写:
行内样式 > ID选择器 > 类选择器 > 元素选择器
*/
.first{
color: green;
}
.second{
color: blue;
}
/*就近原则*/
/*
使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
*/
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
</style>
</head>
<body>
<div class="chifan" id="div1" style="color: goldenrod;">
扩展完,就可以去吃饭啦!
</div>
<div class="second first ">
字体颜色为蓝色,因为.second靠近这个元素选择器。
</div>
</body>
常用属性：
font-size:字号大小
font-family:字体--可以同时指定多个字体，中间以逗号隔开，
表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体
font-weight:字体粗细
其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）
font-style:字体风格
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
color:文本颜色
letter-spacing:字间距
word-spacing:单词间距
line-height:行间距
text-decoration:文本装饰
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
text-align:水平对齐方式
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
CSS浮动
浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
<body>
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局
<div style="float:left;">1</div>
<div style="clear: both;">4</div>
</body>
span标签
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异；
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
选择器扩展
后代选择器
<style>
/*这个规则会把作为 h1 元素后代的 em(字体会显示为斜体) 元素的文本变为 红色。其他 em
文本（如段落或块引用中的em）则不会被这个规则选中：*/
h1 > em {color:red;}
</style>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
属性选择器
<head>
<style>
a[href][title]{
color: yellow;
}
</style>
</head>
<body>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="aaa">张三</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >李四</a>
</body>
伪类选择器
<head>
<style>
a:link {color: red} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
</style>
</head>
<body>
<a href="/index.html" target="_blank" rel="external nofollow" target="_blank">
这是一个链接。
</a>
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！
</body>
引用外部样式
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" target="_blank" rel="external nofollow" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
</body>
type="text/css"
这段标签内包含的内容是css或text，
也就是说如果某种浏览器（特别是wap等手机浏览器械、）不能识别css的，
会将代码认为text，从而不显示也不报错。
盒子模型
padding 属性定义元素的内边距
<style>
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
等同于
h1 { padding ：10px 0.25em 2ex 20% } -顺序是上右下左（顺时针）
</style>
![没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)