学习【CSS权威指南】（一）

不要使用 <font>

行内元素 内不能包含 块级元素

<em><p>这里的p标签是不能在这里的</p></em>
<p><em>这样才正确</em></p>

要在<head>标签中引用

<link rel="stylesheet" type="text/css" href="my.css"/>

也可以在 <style> 中使用 @import

<style type="text/css">
   @import url("my.css")
</style>

通配符，与任意元素匹配

* {
  color: red;
}

<div class="warning  urgent">   可以使用

.urgent {
  font-style: italic; /*斜体*/
} 
.warning {
  color: red;
}
.urgent.warning {
  font-size: 20px; /**/
}
.warning.urgent {
  font-size: 30px; /*匹配 class 同时含有 warning urgent*/
}
/* .urgent.warning 和 .warning.urgent 是一样的，没有先后之分*/

属性选择:

  *[title] { color: silver; }   匹配所有含有 title 属性的标签

  img[alt] { border: 3px solid red; }   匹配所有带 alt 属性的 img标签。例如 <img src="1.jpg" alt=""/> 就适用，但<img src="1.jpg"/>没有 alt属性就不匹配

  a[href][title]  { font-weight: bold; }  匹配同时含有 href ,title 属性的 a 标签

居然还可以选择某个具体的属性值：     a[href="http://www.baidu.com"] { }

使用这种方法，必须保证 属性值完全匹配，例如：

<p class="urgent warning"> </p> 就必须使用  p[class="urgent warning"] , 只使用 p[class="urgent"] 是不行的

那么如何 匹配 含有 属性warnig 的？ 可以使用之前的点号   p.warning { font-size: 20px; }

也可以使用 波浪号    p[class~="warning"] { font-size: 20px; }  表示 class属性含有 warnig就行，不必完全匹配

                                  p[class="warning"]  { font-size: 20px; } 表示 class属性只能含有一个 warnig 值

后代选择器，使用空格

   <table>
       <thead>
         <tr>
             <th>姓名</th>
             <th>年龄</th>
         </tr>
       </thead>
       <tbody>
         <tr>
             <td>12</td>
             <td>why</td>
         </tr>
       </tbody>
   </table>

使用   table thead tr th {
           color: red;  
       }  

之前的使用 逗号 是匹配所有  h1,h2,h3 {
                     color: yellow;  
                   }

选择子元素 h1 > strong { color: red; }  /*这个规则会匹配 h1 下的 strong 元素（必须是 直接的子元素，例如 <h1><strong></strong></h1>是可以的，但<h1><em><strong></strong></em></h1> 是不会匹配的）*/

   h1 > strong {
      color: red;   
   }
   <h1>
       <strong>第一个</strong>             <!--红色--> 
       <strong>第二个</strong>             <!--红色--> 
       <strong>第三个</strong>             <!--红色--> 
       <em><strong>第四个</strong></em>    <!--不影响--> 
   </h1>

   h1 strong {
      color: red;   
   }
   <h1>
       <strong>第一个</strong>             <!--红色--> 
       <strong>第二个</strong>             <!--红色--> 
       <strong>第三个</strong>             <!--红色--> 
       <em><strong>第四个</strong></em>    <!--红色--> 
   </h1>

选择相邻兄弟元素  li + li { color:red;}  /*例如 <li>1</li> <li>2</li> <li>3</li> 则只匹配第2，3个，第1个不匹配*/

 

伪类元素，使用冒号

对于锚 <a></a>  未访问的超链接 为蓝色，已访问的超链接为 红色，使用：

a:link {color:blue;}
a:visited {color:red;}

这里不用 a {color:blue;} 而是使用  a:link {color:blue;} 则只匹配有href属性的

顺序是   link - visited - focus - hover - active

 

p:first-child { text-transform: uppercase; }  注意： 这里是指 作为某元素第一个子元素的所有p元素，

而不是 p的 第一个子元素。  :first-child 是指p

*:lang(fr) { font-style: italic; }  指所有的法语元素变成 斜体

综合伪类，例如   a:visited:hover {color: red;} 表示鼠标停留在已访问的链接上时，显示红色

p:first-letter {text-transform: uppercase; }  p标签的首字母 大写

p:first-line {color: purple;}   p标签所显示的文本的第一行

p:before { content: '==前缀=='; }   在 p 元素 前 插入

p:after { content: '==后缀=='; }  在 p 元素 后插入

同样权重的 ， 加了 !important 会胜出

h1 strong {
  color: red !important;  /*胜出*/
}
h1 strong {
  color: black;
}

 

颜色：值位于 0 ~ 255之间  ， 0% ~ 100% 之间

color: rgb(0,0,0)   /*黑色*/    
    等价于  color: rgb(0%,0%,0%); 
    等价于  color: #000000;
color: rgb(255,255,255)   /*白色*/  
    等价于  color: rgb(100%,100%,100%);
    等价于  color: #FFFFFF;

有趣的现象：如果三个值都一样，灰度改变：

   <h1>          h1 {  color: rgb(0%,0%,0%);  }     </h1>
   <h2>          h2 {  color: rgb(20%,20%,20%);  }  </h2>
   <h3>          h3 {  color: rgb(40%,40%,40%);  }  </h3>
   <h4>          h4 {  color: rgb(60%,60%,60%);  }  </h4>
   <h5>          h5 {  color: rgb(80%,80%,80%);  }  </h5>

三个值都一样就成了灰度变浅，如果改变某个值，则就变颜色

长度， 1em 表示 14像素

background: url("../1.jpg")

text-decoration: none;   清除文本样式

 

inherit 表示继承父类的属性，大多数属性本身会自然的继承，所以不用指定，但有些情况还是需要指定的，例如：

#toolbar {
  background: black;
  color: white;
}

<div id="toolbar">
  <a href="1.html">链接一</a> | <a href="1.html">链接二</a>
</div>

这里的 链接a 还是会按照浏览器的首选项来设置样式，需要设定inherit

#toolbar a {
  color: inherit;
}

 

设置字体：  

body {
   font-family: sans-serif;
}

可以列举多个具体的字体，如果在电脑上都找不到这些字体的话，就使用默认的,名字中间有空格的用引号圈起来
body {
   font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, serif; }
}

font-weight: normal 等于  font-weight: 400 ,

font-weight: bold 等于  font-weight: 700 , 如果设置成  font-weight: border; 必须确定从父元素继承的font-weight值。

font-variant: small-caps;  不同大小的 大写字母

font 属性： 前三个是   font-style   font-weight  font-variant 随意排序，如果未normal 可以省略。这三个可以省略。

                   后两个的顺序就必须是 font-size 和 font-family.  这两个不能省略。 例如。

font: itaiic bold small-caps 30px Verdana, Helvetica, Arial, sans-serif;

 

 

文本缩进，适用于 块级元素

文本对齐，也是只适用于 块级元素

text-align: justify;   调整单词和字母间的间隔，使各行的长度恰好相等。

line-height： normal;   通常都是字体大小 font-size 的 1.2倍。

<div style="line-height: 150%;font-size: 16px;">
  <p style="font-size: 30px;"></p>
</div>

如果父元素的  line-height 是 150% , 则子元素  从父元素那继承来的 line-height值是  16px * 150% = 24px; 

如果父元素的  line-height 是 1.5em , 则子元素  从父元素那继承来的 line-height值是  16px * 1.5 = 24px;

注意，如果父元素的  line-height 是 1.5 , 则子元素是根据自己的 font-size 来计算 line-height  30px * 1.5 = 45px;

 

垂直对齐文本：

vertical-align: baseline;   基线对齐     vertical-align:  sub;  下标   vertical-align: super; 上标

<p>We can either 
   <sup style="vertical-align: 100%;">sup </sup> 
   or 
   <sub style="vertical-align: -100%;">sub</sub>
</p>

使用 vertical-align: 100%;  正百分数会把基线升高，也就会使元素升高。vertical-align: -100%; 负百分数会把基线降低，会使元素降低。

vertical-align:  5px;  它把一个元素升高或降低指定的距离。

word-spacing: 0.5em;  word-spacing: -0.5em;  是 字符串 之间的间隔

letter-spacing: 0.5em; 是 字母 之间的间隔

text-transform: capitalize;   每隔单词的 首字母大写

text-decoration:  underline;  下划线     overline  在头顶的线   line-through 在中间的线（删除线），和<s></s> 效果是一样的

可以支持多个效果 text-decoration: underline overline line-through;

blink 闪烁效果，已不支持

如果想去掉 <a></a> 的默认下划线样式，可以使用   a { text-decoration: none; }

注意：  

<p style="text-decoration: underline;">
  asd cfd sDSA DASd <strong style="text-decoration: none;">Strong</strong> das1
</p>

这里看起来 <strong> 有下划线，但它的 text-decoration为none，这个下划线是 父元素 <p>的，没办法去掉

文本阴影：

  阴影的字体大小和 原来的是一样的

text-shadow: 5px  5px  5px  green;   阴影 水平向右5px , 垂直向下5px , 模糊度 5px , 颜色green.  如果为负数表示相反方向。

white-spaces: normal;  丢掉多余的空白符，回车会转为空白符，一行中多个空格会转为一个空格。

pre  保留空白符，只有遇到换行符才会换行（不会自动换行）

pre-wrap  保留空白符，会自动换行

pre-line  多个空白符合并成一个，会自动换行

no-wrap 多个空白符合并成一个,  不会自动换行，除非遇到 <br/> 才会换行

这个单看名字还真记不住。。

direction: ltr;  从左到右，  rtl 从右到左，

 

 

包含块  <div> <p></p>  <a/> </div>   其中  p标签的包含块就是  div

正常流  从左到右，从上到下

替换元素  例如 img 元素，指向一个图像文件，这个文件将插入到 文档流 中 该img所占的位置

非替换元素

根元素   <html></html>

块级元素：

width 影响的是 内容区的宽度，而不是整个可见框，如果还指定内边距、边框或外边距，这些都会增加宽度值。

正常流中块级元素框的水平部分总和就等于父元素的width

margin-left, border-left, padding-left, width, padding-right, border-right, margin-right

这7个属性只有内容的width, 左右外边距 margin-left, margin-right 可以设置为auto, 其它属性必须设置特定的值，或者默认宽度为0， 如果设置为auto ，会确定设置为auto的属性的长度，从而使元素框的宽度等于父元素的width

    <div style="width: 400px;"> 
       <!--父元素内容的宽度是400px, 这里会把margin-right的宽度设为auto,计算过后变为200px-->
        <p style="width:100px;margin-left: 100px;margin-right: 100px;">段落段落段落段落</p>
    </div>

    <div style="width: 400px;"> 
       <!--这里width会计算出占300px, margin-left为0-->
        <p style="width:auto;margin-left: auto;margin-right: 100px;">段落段落段落段落</p>
    </div>

    <div style="width: 400px;"> 
       <!--3个都为auto,左右外边距都会默认为0，这里width计算为400px-->
        <p style="width:auto;margin-left: auto;margin-right: auto;">段落段落段落段落</p>
    </div>

有一个例外: 替换元素的width如果为auto，则元素的宽度是内容的固有宽度，例如<img src="1.png">

只有 外边距可以为负数， 内边距不能为负数，如果为负数的话直接忽略。

margin-right或者margin-bottom是负值：它不会移动该元素(该元素不变化)，但会使该元素后面的元素往前移动。也就是说，如果margin-bottom为负值，那么该元素下面的元素会网上移动；如果margin-right为负值，那么该元素右边的元素会往左移动，从而覆盖该元素。

可以这么理解： margin 为正值，是将 两个元素 互相推开， 为负值，则是将两个元素拉近

margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom 这7个属性的值必须等于元素包含快的height

border-style: solid dashed none dashed;   是按照顺时针方向设置 top-right-bottom-left，可以单独设置：

也可以单独设置：

单独设置border-width: 2px;  没有任何效果，因为border-style为none，需要设置 border-style: solid; 也可以增加 颜色 border-style: red;  可以将三者写在一块：  border: 1px solid red;               border: thick solid silver

前景色  color: red;   
背景色   background-color: red;  其默认值是 background-color: transparent; 透明的

需要添加 url:   其中 url() 中间无需引号

background-image: url(/Image/1.png);

repeat  在水平竖直方向都平铺  repeat-x 在水平 repeat-y 在竖直方向平铺   no-repeat 不平铺

background-position: top left;  左上角

background-attachment: scroll;  背景跟随着文档滚动而滚动，  fixed  背景不滚动，相对于可视区是固定的。

 

background: white url(1.png) repeat fixed top left;

 

第10章 浮动和定位

浮动元素：会以某种方式从文档的正常流中删除。一个元素浮动时，其它内容会“环绕”该元素。

并且，浮动元素周围的外边距不会合并

浮动元素会生成一个 块级框，不论这个元素本身是什么，它会像块级元素一样摆放和表现，这里没必要加display:block;

浮动元素必须准守的规则：

1. 浮动元素的 左右外边界 不能超过其 包含快 的左右内边界
2. 浮动元素的左右外边界，必须是源文档之前出现的左右浮动元素的左右外边界。这条规则可以防止浮动元素彼此“覆盖”。
3. 如果一行放不下，会另起一行。例如 body宽500px,第一个图像float:left;  第二个图像fload: right;  图片宽度300px; 但它们之间不会重叠那100像素，它会要求第二个图像向下浮动。换行。

其它规则不知道在讲啥子东西。。大意就是 不能超越 包含快

但如果外边距 为负数的话，会看起来像 超出了 父元素的界限。。不想去深究这个奇葩问题，知道就好

清除  h1 { clear: left; } 表示“确保h3的左边没有浮动元素”

h2 {clear: both; }   防止 h2左右两边出现浮素

 

偏移量：

overflow: hidden; 溢出隐藏，   overflow: scroll;  溢出部分使用滚动条

visibility: visible; 可见    visibility: hidden; 不可见   display:none; 不仅不可见，还被删除

这点很重要： position: absolute; 的 包含块 是 最近的 position不为static的祖先元素，通常使用 position: relative;

（外话：我说呢，每次看见 position: absolute; 前面就有个 relative），如果找不到 包含块 的话，那就是以<body>为包含块。

position: absolute; 使用 top:  right: bottom:  left: 来定位。 注意为auto的情况就是按原先的位置 定位。