---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- ----------------------
CSS指层叠样式表
语法:selector{declaretion1;declaretion2;....... declaretionN ;}
selector:选择器
declaretion:由一个属性和一个值组成,如:property: vlaue
--------------------------------------------选择器的类型------------------------------------------
①id选择器: #id的名称
定义:#red {color: red;}
#green{color: green;}
引用:<p id="red" >这个是id选择器</p>
注意:id属性只能在每个HTML文档中出现一次。
特定使用:与派生选择器一起使用:
#red p{color: p ;} id为red的P标签。
②类选择器: .类的名称
定义: .center {text-align: center;}
引用: <p class="center" >类选择器的使用 </p>
特定使用:与派生类选择器一起使用:
.yanse td{color: red; }
引用:<table class="yanse" ><th>正常的</th><td>红色</td></table>
td.bianse{color: red; }
引用:<table ><td>正常的</td><td class="bianse">红色</td></table>
③属性选择器:
定义:[title]{color: red;} 设置带有title属性的所有样式。
引用:<h2 title="nihao">title属性的H2</h2>
定义: [title="teshu"]{color: red;} 设置带有title属性的标签,当title的值为 teshu时,采用的样式。
引用:<h2 title="teshu">title属性的值为teshu的H2</h2>
定义:[title~="kongge"]{color: red;} 设置带有title属性的标签,当title的值为 kongge时,可以在此字段的前后有空格隔开,采用的样式。
引用:<h2 title="kongge">title属性的值为kongge的H2</h2>
<h2 title="kongge you">title属性的值包括kongge的H2</h2>
定义:[title|="lianjie"]{color: red;} 设置带有title属性的标签,当title的值为 包含lianjie字段时,采用的样式。
引用:<h2 title="lianjiefuhao">title属性的值包含lianjie的H2</h2>
④标签选择器:
1.选择器的名称为标签: input{color: blue; }
2.多个选择器一起使用:input,p,h2{color: red;}
3.派生选择器:标签.属性 如: h2.strong{color: green;}
----------------------------------------使用方法-----------------------------------
①外部引用:在外部建立 .css结尾的文件,然后在其他文件中引用.
<head>
<link rel="stylesheet" type="text\css" href="css1.css" />
</head>
②内部样式表:使用<style>标签在文档头部定义内部样式表。
<head>
<style type="text/css">
h1 {color: red;}
h2 {color: green;}
</style>
</head>
③元素内联:直接将样式写入到元素的style属性中:
例子:<input type="text" style="color: red; align: center " />
--------------------------------------一些属性------------------------------------
背景属性:
background-image: url(/image/123.jpg); 设置背景图片
background-repeat:表示平铺 repeat-x:水平 repeat-y:垂直
background-attachment:图像是否固定,或随页面的其他部分滚动。
文本属性:
color:设置文本颜色
white-space:设置元素中空白的处理方式,normal:忽略换行符,合并空白符。
word-spacing:设置字间距。
列表属性:
list-style-image:将图像设置为列表项标志。
list-style-type:设置列表项标志的类型。
表格属性:
border-collapse:是否把表格边框合并单一的边框。
empty-style-type:设置列表项标志的类型。
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流! ---------------------- ----------------------