html 20130822

Css：层叠样式表

语法：

Eg：

<!-- 自定义样式 -->

<style type="text/css">

       .mystyle{

              color:#ecaced;

              font-family:arial;

              background:blue;

       }

</style>

<!-- 分组样式 -->

<style type="text/css">

h1,h2,h3,h4,h5,h6{

         color: green;

        }

</style>

<!-- 分组样式 -->

<style type="text/css">

       div#did{color:red;}

</style>

 

 

使用元素来定义样式时：尽量用到文本节点的父节点来定义样式

 

 

外部样式文件.css

Eg:

.mystyle{

              color:#ecaced;

              font-family:arial;

              background:blue;

       }

h1,h2,h3,h4,h5,h6{

         color: green;

        }

div#did{color: red;}

 

页面引入外部css：

语法：

<link rel="stylesheet"href="外部样式表的全名"  type="text/css">

 

类选择器：

<fontclass="mystyle">ssss</font><!-- 类选择器 -->

<spanclass="mystyle">sssss</span>

 

派生选择器：

Eg：

元素  子元素{。。。。。。}

li strong{

   font-style: italic;

   font-weight: normal;

  }

样式重复时：先采用大范围样式,然后采用小范围所有样式

id选择器：

格式一：

#iiiddd{

       color:#808080;

}

表示所有页面元素的id=”iiiddd” 都采用这种样式。

 

格式一：

元素名称#iiiddd{

       color:#808080;

}

表示页面所有该元素的id=”iiiddd” 都采用这种样式。

 

 

 

属性选择器：

格式一：[属性名称]{……}

指定元素有这个属性都采用这种样式

 

格式二：[属性名称=xxxx]{……}

指定元素有这个属性值等于xxxx都采用这种样式

 

格式三：[属性名称~=xxxxx]{……}

指定元素有这个属性值包含xxxxx都采用这种样式

 

格式四：[属性名称|=xxxx]{…..}

指定元素有这个属性值为xxxx或者xxxx-开头都采用这种样式

 

 

内联样式

Eg：

<p style="color: sienna; margin-left:20px">

This isa paragraph

</p>

 

 

同级(相同元素且相同范围)样式:样式按照先后顺序（有的属性就覆盖，没有就添加）

eg:

h6 {

color: red;

  text-align: left;

  font-size: 8pt;

  }

h6 {

  text-align: right;

  font-size: 20pt;

  }

框模型：

h1{padding: 10px 0.25em 2ex 20%;}

顺序 上 右 下 左 即顺时针

0.25em等价于0.25%

2ex等价于自身高度2倍

单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距(元素到边框的距离)：

·        padding-top

·        padding-right

·        padding-bottom

·        padding-left

a:link {color:red;}没点之前 

a:visited {color:green;}：点了之后

a:hover {color:blue;}         ：获取焦点时

a:active {color:black;}：点的时候

border：

border-style 属性

p.aside {border-style: solid dotted dasheddouble;}

p元素class=“aside”的上 右 下 左

等价于：

p {border-top-style: solid; border-right-style：dotted；border-bottom-style：dashed；border-left-style: double;}

 

 

width 宽度

color 颜色（同上）

 

 

 

外边距：

div {background-color:gray;margin : 100px 100px 100px 100px;}（同上）

 

·        margin-top

·        margin-right

·        margin-bottom

·        margin-left

定位：

相对定位：

h2.pos_left

{

  position: relative;

  left: 30px;

  top: 20px}

}

 

绝对定位：

h2.pos_abs

{

  position: absolute;

  left: 30px;

  top: 20px;

}