CSS summary

来源：互联网发布：thinkphp打印sql语句编辑：程序博客网时间：2024/06/16 17:42

CSS 总结
1.当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

    浏览器缺省设置
    外部样式表
    内部样式表（位于 <head> 标签内部）
    内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
=================================================================================================================================================
2.selector {declaration1; declaration2; ... declarationN }
=================================================================================================================================================
3.
值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

p { color: #ff0000; }

为了节约字节，我们可以使用 CSS 的缩写形式：

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
记得写引号

提示：如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}
=================================================================================================================================================

4.选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
h1,h2,h3,h4,h5,h6 share 同一个 declarement.
=================================================================================================================================================
5.继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {
     font-family: Verdana, sans-serif;
     }

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。
创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd {
     font-family: Verdana, sans-serif;
     }

p {
     font-family: Times, "Times New Roman", serif;
     }
   //因为可以被继承，因此可以overwrite

如果元素不可继承，，比如 background-color,
如果在父元素定义了background-color,,子元素所有的都跟父元素一样的background-color, 如果子元素也定义了background-color,是不能起作用的,
<body>
<div id="e1">
.................
<div id='e2'>
   ...............
</div>
</div>
<body>
if e1 has define bg-color, and e2 also define bg-color, then e2's bg-color will not take effect.
if body also define bg-color, the body's will take effect, also e1 take effect, e2 NOT take effect

=================================================================================================================================================

6.派生选择器
li strong {
    font-style: italic;
    font-weight: normal;
}
li 选择器基础上在派生出strong 选择器,,,
li 元素的子元素strong 才会选择到这个css

7.id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

注意：id 属性只能在每个 HTML 文档中出现一次

id 选择器和派生选择器

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
   font-style: italic;
   text-align: right;
   margin-top: 0.5em;
   }

选择器，多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

#sidebar p {
   font-style: italic;
   text-align: right;
   margin-top: 0.5em;
   }

#sidebar h2 {
   font-size: 1em;
   font-weight: normal;
   font-style: italic;
   margin: 0;
   line-height: 1.5;
   text-align: right;
   }

=================================================================================================================================================
7.类选择器
在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

和 id 一样，class 也可被用作派生选择器：

.fancy td {
   color: #f60;
   background: #666;
   }

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：

td.fancy {
   color: #f60;
   background: #666;
   }

=================================================================================================================================================
8.属性选择器
下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

属性和值选择器

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

属性和值选择器 - 多个值

下面的例子为包含(XXX 注意是包含)指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：（空格分隔）

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：（连字符分隔）

[lang|=en] { color:red; }

设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

================
static position and relative position;

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
div{
border-style:solid;
border-width:1;
margin:2;

}
div.relativePos
{
position: relative;
left: 30px;
top: 20px;
}
</style>
</head>

<body>
<h1>asfasfasdf</h1>
<div style="width:750;height:100">
111111
   <div class="relativePos">
           abc
   </div>
</div>

<div>

222222
</div>

<div>

333333
</div>

</body>

</html>