CSS整理笔记

css的表现形式

css样式表采用覆盖的形式来表现定义的样式，就像土地原来是黄色的，后来长草变成绿色的，冬天下雪又变成白色。css就像草皮，雪层一样，多个选择器表现的形式是覆盖而不是替换。

基本选择器

通配器可以选择所有标签；
元素选择器选择指定标签；
ID选择器选择指定标签，但ID必须在该页面唯一；
类选择器选择相同的一类元素，同一个页面中可以有很多个相同的类名；
群组选择器将具有相同样式的元素之间用逗号隔开，表示这几个不同选择器使用了相同的样式。

通配选择器 *

*{margin:0;padding:0}
选择所有标签，并设置内边距外边距都为0

元素选择器 E

p{background:grey}
p标签下的元素样式背景为灰色

ID选择器 #ID

#my{background:grey}
my标签下的背景为灰色

类选择器 .class

.item{background:green}
item标签下的背景为绿色

群组选择器 selector1，selectorN

selector1,selector2,selector3,...selectorN{
  margin:10px;
  ...
}

层次选择器

层次选择器通过HTML的DOM元素间的关系获取元素

E F 后代选择器(包含选择器)：选择匹配的F元素，匹配的F元素包含在匹配的元素E内，这里F元素不管是E元素的子元素，孙辈元素，或者是更深层次的元素都会被选中。
E>F 子选择器：选择匹配的F元素，匹配的F元素是匹配E元素的子元素，即只选择E的子元素。
E+F 相邻兄弟选择器：选择匹配的F元素，匹配的元素位于E元素后，E，F是同辈分元素，F位于E后面，并且相邻。
E~F 通用选择器：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素，选择所有兄弟元素，选择位于E后的所有兄弟。

<html>
  <head>
    <title>演示</title>
    <meta content="">
    <style type="text/css">
      *{margin: 0;padding: 0;}
      body{width: 300px;margin: 0 auto;}
      div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
      /*后代选择器*/
      div div{background: orange;}
      /*子选择器*/
      body > div {background: green;}
      /*相邻兄弟选择器*/
      .active + div{background: lime;}
      .active ~ div{background: red;}
    </style>
  </head>
  <body>
    <div class="active">1</div>
    <div> 2</div>
    <div> 3</div>
    <div>4
        <div> 5</div>
        <div> 6</div>
     </div>
     <div> 7
        <div> 8
          <div> 9
              <div>10 </div>
          </div>
        </div>
     </div>
  </body>
</html>

动态伪类选择器（仅交互时才显现）

E:link 链接伪类选择器：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上。
E:visited 链接伪类选择器：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上。
E:active 用户行为伪类选择器：选择匹配的E元素，且匹配元素被激活。常用于锚点和按钮。
E:hover 用户行为伪类选择器：选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下，仅支持a:hover。
E:focus 用户行为伪类选择器：选择匹配的E元素，且匹配元素获得焦点。
锚点伪类的设置必须遵守一个原则——“link-visited-hover-active”

示例
/*按键获得焦点*/
.btn:focus{
	outline:thin dotted #333;
	outline:5px auto;
	outline-offset:-2px;
	}

目标伪类选择器

用来匹配文档的URI（URL子集）中的某个标志符号的目标元素

E:target 选择匹配E的所有元素，且匹配元素被相关URL指向。

使用目标伪类选择器制作网页
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>垂直手风琴</title>
  <style type="text/css">
.accordionMenu {
  background: #fff;
  color:#424242;
  font: 12px Arial, Verdana, sans-serif;
  margin:0 auto;
  padding: 10px;
  width: 500px;
}
.accordionMenu h2 {
  margin:5px 0;
  padding:0;
  position: relative;
}
.accordionMenu h2:before {/*制作向下三角效果*/
border: 5px solid #fff;
border-color: #fff  transparent  transparent;
content:"";
height: 0;
position: absolute;
right: 10px;
top: 15px;
width: 0;
}
.accordionMenu h2 a {/*制作手风琴标题栏效果*/
background: #8f8f8f;
background: -moz-linear-gradient( top, #cecece, #8f8f8f);
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
background: -o-linear-gradient( top, #cecece, #8f8f8f);
background: linear-gradient( top, #cecece, #8f8f8f);
border-radius: 5px;
color:#424242;
display: block;
font-size: 13px;
  font-weight: normal;
  margin:0;
  padding:10px 10px;
  text-shadow: 2px 2px 2px #aeaeae;
  text-decoration:none;
}
.accordionMenu :target h2 a, /*目标标题的效果*/
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
  background: #2288dd;
  background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
  background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
  background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
  background: -o-linear-gradient( top, #6bb2ff, #2288dd);
  background: linear-gradient( top, #6bb2ff, #2288dd);
  color:#FFF;
}
.accordionMenu p {/*标题栏对应的内容*/
  margin:0;
  height: 0;/*默认栏目内容高度为0，达到隐藏效果*/
  overflow: hidden;
  padding:0 10px;
  -moz-transition: height 0.5s ease-in;
  -webkit-transition: height 0.5s ease-in;
  -o-transition: height 0.5s ease-in;
  transition: height 0.5s ease-in;
}
/*这部分是显示内容的关键代码*/
.accordionMenu :target p {/*展开对应目标内容*/
  height:100px;/*显示对应目标栏内容*/
  overflow: auto;
}
.accordionMenu :target h2:before {/*展开时标题三角效果*/
  border-color: transparent transparent transparent #fff;
}
  </style>
</head>
<body>
  <div class="accordionMenu">
        <div class="menuSection" id="brand">
      <h2><a href="#brand">Brand</a ></h2>
      <p>Lorem ipsum dolor...</p >
        </div>
        <div class="menuSection" id="promotion">
            <h2><a href="#promotion">Promotion</a ></h2>
            <p>Lorem ipsum dolor sit amet...</p >
        </div>
        <div class="menuSection" id="event">
            <h2><a href="#event">Event</a ></h2>
            <p>Lorem ipsum dolor sit amet...</p >
        </div>
  </div>
</body>
</html>

语言伪类选择器

指定语言方法：

html lang=“en-US”
body lang=“fr”
E:lang(language)：表示选择E的所有元素且匹配元素指定了lang属性，而且其值为language。

UI元素状态伪类选择器

UI元素的状态一般包括：启用，禁用，选中，未选中，获得焦点，失去焦点，锁定，待机等

E:checked(选中状态伪类选择器）：匹配选中的复选按钮或单选按钮表单元素。
E:enable（启用状态伪类选择器）：匹配所有启用的表单元素。
E:disable（不可用状态伪类选择器）：匹配所有禁用的表单元素。

如：
.btn:disable{
	......
	}

结构伪类选择器

伪类可以将一段并不存在的html当做独立的元素来定位，或者找到无法使用其他简单选择器就能够定位到的切实存在的元素。结构伪类选择器可以根据元素在文档树中的某些特性定位到他们。

E:first-child
E:last-child
E:root
E F:nth-child(n)(选择父元素E的第n个元素。）
E F:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:empty 选择没有子元素的元素而且该元素也不包含任何文本节点。
n可以是整数，关键字（odd，even），公式

否定伪类选择器

E：not(F) 匹配所有除元素F外的E元素

伪元素

伪元素可用于定位于文档中包含的文本，但无法在文档树中定位，伪类一般无法准确检测某个元素的属性和状态，而伪元素弥补其不足，另外伪元素表示DOM外部的某种文档结构。

::first-letter
::first-line
::before
::after
::selection

CSS3演示伪元素——首字母下沉
p:first-child::first-letter {
  float: left; 
  color: #903; 
  padding: 4px 8px 0 3px; 
  font:75px/60px  Georgia; 
}

属性选择器

E[attr] 选择匹配具有attr的E元素，E可省略
E[attr=val] 选择匹配具有attr的E元素且其属性值为val
E[attr|=val] 选择匹配具有attr的E元素且其属性值为val或以val-开头
E[attr~=val] 选择匹配具有attr的E元素，且其拥有多个值，其中包含val值
E[attr*=val] 选择匹配具有attr的E元素，其属性值任意位置包含了“val”
E[attr^=val] 选择匹配具有attr的E元素，其属性值以“val”开头
E[attr$=val] 选择匹配具有attr的E元素，其属性值以“val”结尾

如：
a[id=first]{background-color:red;}定义a标签属性值为first的样式。

样式优先级

方法一：important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符通配符 > 继承
方法二：
计算指定选择器的优先级:使用CSS的权重
通配选择符的权值 0,0,0,0
标签的权值为 0,0,0,1
类的权值为 0,0,1,0
属性选择的权值为 0,0,1,0
伪类选择的权值为 0,0,1,0
伪对象选择的权值为 0,0,0,1
ID的权值为 0,1,0,0
important的权值为最高 1,0,0,0
使用规则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。

Box模型与CSS布局

Box模型，又称盒子模型或框模型，是DIV+CSS布局基础

Box模型包括边框（border），内边距（padding），内容，外边距（margin），宽和高等属性。从内到外依次为：内容——内边距——边框——外边距。宽和高指的是内容区属性。
内容：展示各种信息。
内边距：内容区与边框之间的空间。
边框：用于标识盒子边界，介于内边距和外边距之间。
外边距：外边距位于边框外部，是边框与周围之间的空间。
Box三维立体模型中，边框位于第一层；元素内容，内边距位于第二层；背景图位于第三层；背景色位于第四层；外边框位于底层（第五层）

Div+CSS布局

div（division）标签是一个块级元素，块级元素的内容会自动开始一个新行。可以通过选择器的方式设置样式。 目前的大部分网站都使用Div+CSS布局设计，使用Div标签进行区域划分，使用CSS对不同内容设置样式。

示例：
<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <title>网上书城</title>
    <style type="text/css">
      body{margin:0px;padding:0px;}
      div{font:bold 32px 隶书;color:red;text-align:center;text-decoration:underline;}
      #container {width:800px;padding:5px;}
      #header{width:100%; height:80px; background:#DDDDDD;}
      #content{width:100%;height:500px; background:#BBBBBB;}
      #footer{width:100%; height:80px; background:#999999;}
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header">
        header
      </div>
      <div  id="content">
        content
      </div>
      <div id="footer">
        footer
      </div>
    </div>
  </body>
</html>

注意事项
- Div中的绝对定位与相对定位（position:[absolute,relative）
  绝对定位是相对于元素最近的已定位的祖先元素（设置了绝对或相对定位的祖先元素），如果没有已定位的祖先元素，则位置相对与最初的包含块。
  相对定位是相对于元素在文档中的初始位置，使用相对定位时，无论是否进行移动，元素依然占据原来的空间，因此移动元素会导致它覆盖其他边框。
- 浮动属性与清除
  在对HTML进行布局时，不需要设置各元素位置坐标，而是通过浮动的形式，采用常规文档流的方式自动排列各元素（由上而下，由左及右；块级元素换行，行级元素同行水平排列）。
  可以使用float进行浮动设置（letf，right）。
  可以使用clear进行浮动清除，设置了浮动清除属性直接向下移动。

前端———中级篇（2）