总结：
- 前端的兼容性：JS、CSS、html的兼容性都是很头疼的问题；
- 节点、标签、样式、树；
- css玩的最多的是选择器，选择器+样式：
- href 链接:
- # = id; > 只想控制子这一级的关系 ；不是爷孙关系 ；
- 选择器必须懂，样式表 可以学习一下；
CSS（Cascading Style Sheet）
层叠样式表，控制HTML的布局和样式。
CSS2 现在的浏览器基本都支持；CSS3一直在更新，兼容性太差；
1. 使用方式
内联样式：在标签内使用属性stype
页内样式：在<head> 标签中使用 <style type="text/css"></style>
外部样式：使用CSS文件，使用 <link rel="stylesheet" type="text/css" href="mystyle.css">
2. 基本语法
selector {property1: value1, ..., propertyN:valueN}
例如 a {color:red; text-decoration:line-through} ，将链接标签文字颜色变成红色且有横线穿过。
3. 颜色写法
p { color: #ff0000; } /*大小写无所谓*/
p { color: #f00; } /*FF0000的缩写*/
p { color: rgb(255,0,0); } /*三原色表示，0~255*/
4. 选择器
4.1 标签选择器
body {text-align: center}
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css">
body {
color:red;
}
</style>
</head>
文本颜色-红色；链接不变色
上例直接使用HTML标签的选择器，就是 标签选择器，元素选择器。
注意 如果将标签改为*，表示统配所有HTML标签;
图解CSS padding、margin、border属性
4.2 id选择器
id选择器是CSS中另一个功能最强大的通用选择器。使用＃符号后跟ID名称，您可以按ID定位，并将样式应用于具有选定ID的所有指定元素。使用此选择器听起来很不错，因为它很简单，但是请记住，id对于整个网页应该是唯一的。这意味着您不允许为多个元素分配ID选择器。
id指的是HTML标签内的属性id，
例如 `<div id="menu">`
// div#menu —— div标签内有menu
#menu { // menu 部分改变
background-color: rgb(255, 255, 255);
width: 100%;
border-bottom: #f0f0f0 solid 1px;
margin: 0px 0px 5px 0px;
}
4.3 类选择器
类，指的是标签中的class属性，
<style type="text/css">
body {
color:red;
text-align: center; // 文本居中
}
例如 <div class='main center'>
.center {
width: 80%;
margin: auto;
}
4.4 选择器分组
分组的选择就可以使用同样的样式声明
// 大家使用同样的 color ;
h1,h2,h3,h4,h5,h6 {
color: green;
}
4.5 层次选择器
1、后代选择器
只要 这个 li 在 div 里面，就会收到它的影响；
div li {
display: inline;
}
所有div标签下任意层下的li标签
div#menu li { //div下的 id = menu元素；
display: inline; // 一行显示； 做菜单
}
2、子选择器
后代中；
ul > li { // >爸爸儿子关系；不是爷孙关系；
display: inline; // 一行显示； 做菜单
}
所有div标签下直接的子元素li标签
div#menu ul > li { // div 下id=menu 的ul 子 为 li ；
display: inline;
}
div#menu > ul li { //div 下id=menu 的子为ul中子子孙孙为 li
display: inline;
}
3、相邻兄弟选择器
class为detail的div标签下任意层下的近邻p标签的下一个p标签
div.detailp +p {
color: green;
}
<div id='detail' name='detail' class="detail">
<p>title</p>
<p>content</p>
<p>post content</p>>
</div>
# 例子1
div p + p {
color:darkviolet
}
p2,p3颜色都变化
4.6 伪类 pseudo-classes
伪类能增加样式，类似于class（假class ）
锚伪类，链接标签a的四种状态
| 伪类的4种 状态 | 说明 |
|---|---|
| a:link {color: red} | /* 未访问的链接 */ |
| a:visited {color: green} | /* 已访问的链接 */ |
| a:hover {color: blue} | /* 鼠标移动到链接上 */ |
| a:active {color: black} | /* 选定的链接 */ |
伪类可以和css类配合使用
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
4.7 伪元素pseudo-element
伪元素能增加元素（假的）
:before 和:after 可以在元素前后插入内容
#homepage:before {
content:url(http://www.magedu.com/kczx/images/why1.png);
}
属性选择器
| - | - |
|---|---|
| E [ attr ] { sRules } | 具有某属性 |
| E [ attr = value ] { sRules } | 具有某属性且等于value |
| E [ attr ~= value ] { sRules } | 具有某属性且属性值中的一个是value |
| E [ attr |= value ] { sRules } | 具有某属性且属性值使用了-，且-之前的部分是value的才匹配 *[class|="main"] 能和减号之前的部分匹配 |
img[alt=magedu_logo] {
height: 20px; /* logo 大小变成 20px */
}
*[class="main center"] {
color:black
}
*[class~="center"] { /* class 中有一个 为 center 就修改 color 为黑色 ； */
color:black
}
*[id]{
color:chocolate /* 所有id color 改为 chocolate */
}
5. 继承
body {
text-align: center;
color:red;
}
观察整个页面文字颜色，几乎都变成了红色。
页面中父元素中使用的样式，通过CSS继承，子孙元素将继承并使用祖先元素的属性，除非子元素重新定义了该属性。
6. 常见样式
http://www.w3school.com.cn/css/css_background.asp
背景 background复合属性
字体 font复合属性
表格border
table
{
border-collapse:collapse;
}
table,td
{
border: 1px solid black; // 边框 ；
}
margin外边距和padding内边距
padding: top right bottom left
padding:10px 5px 15px 20px; /*顺时针上右下左*/
padding:10px 5px 15px; /*上10px、左右5px、下15px*/
padding:10px 5px; /*上下10px、左右5px*/
padding:10px /*4方向全是10px*/
margin:auto /*浏览器计算外边距*/
内外边距都是顺时针设置4个方向，也可以单独设置。
网友评论