本文详细介绍了CSS样式表的基础知识，包括内联、嵌入、引用三种使用方法，常见样式单位，显示与隐藏元素，鼠标光标变化，列表样式，页面加载时光标样式，以及样式选择器的应用。此外，还提供了多个实例来加深理解。
-----------------------------Windows Phone 7手机开发、.Net培训期待与您交流！ ------------------------------------
Css样式表基础知识学习笔记
1.css样式表（叠层样式表）是用来美化页面用的，css主要有元素内联，页面嵌入，外部引用三种使用方法；
2.元素内联：直接将样式写入元素的style属性中，使用与样式没有可复用的场合；单独控制标签样式；
例：<input type=”text” readonly=”readonly” style=”background-color:#FF00FF”;
3.页面嵌入：在head中加入表示页面中所有input都是采用指定样式，适用于页面复用，减小页面体积；整个页面的此标签都为设定的样式
例：<style type=”text/css”>
Input{border-color:Yellow,color:Red}
</style>
4.外部引用，将css内容写入css后缀的文件，然后再页面中引用，在head中加入引用：
<link type=”text/css” rel=”stylesheet” href=”样式表文件名.css”/> 使用于多个页面共享css样式。
5.常见的样式：css中表示宽度距离的计量单位：px（像素），30%（百分比），em（相对单位） background-color：背景颜色；color：文本颜色；border-style(边框风格，默认为没有边框）：solid实线，dotted点；border-color：边框颜色；border-width边框宽度，默认为0px；
Display：元素是否显示，可选值为“none”不显示，block显示块级元素，此元素前后会带有换行符，inline显示为内联元素元素前后没有换行符；
Cursor：鼠标在元素上时显示的光标图标，可选值为：cursor默认光标，pointer超链接上的手，text输入Bean，wait漏斗，help帮助；
6.列表<ul><li></li></ul>:li不显示圆点的方法：LIST-style-type：none；一般设在li或ul上；
7.页面加载的时候光标变图案的实现方法：
设定cursor：url（指定的图标）//图标格式为.cur或.ari样式。
8.样式选择器
对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适用于哪些元素，标签选择器，class选择器和id选择器
标签选择器：Input{border-color:Yellow;color:Red}对于指定的标签采用统一的样式；
Class选择器:以定义一个命名的样式，然后再用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格，样式名称开头加“.”
例：<head>
<title></title>
<style type=”text/css”>
.warning{background:Yellow;}
.highlight{font-size：xx-large；cursor:help;}
</head>
</style>
<body>
<div class=”highlight”>你好</div>
<div class=”highlight warning”>你们好</div>//同时引用两个样式
</body>
如果引用的样式中背景为黄色，但后面又自己设定了背景色黑色，显示出的效果为黑色，自己的样式优先级比较高，<div class=”highlight warning” style=”background-color:Black”>你们好</div>style覆盖class。
Class选择器也可以对不同的标签，实现同样的样式名，对于不同的标签有不同的样式，只要在样式名 前加标签名即可。
例：input.accountno{text-align:right;color:Red;}
label.accountno{font-style:italic;}
<input class=”accountno” type=”text” value=”abcd”/>
<lable class=”accountno”>abcd</label>
Id选择器：为指定id的元素设定样式，id前加#
例：#username
{font-size：xx-large；}
<input id=”username” type=”text” value=”a”/>
关联选择器：
P strong{background-color：Yellow}
P标签内的strong标签的内容使用的样式
例：<strong>我是谁<strong>
<p><strong>我是谁</strong></p>//两个样式不同。
组合选择器：同时为多个标签设定一个样式
例：H1，H2，input{background-color：Green}
<h1>你好</h1>
<input type=”text” value=”你好”/>//两个样式相同
伪选择器：为标签的不同状态设定不同样式
超链接的例：A:visited;//点击过的样式
A:active;//选中超链接时的样式
A:link;//超链接未被访问时的状态
A:hover;//鼠标移到超链接的状态
A:visited{TEXT-DECORATION:none}//表示没有下划线
A:active{TEXT-DECORATION:none}
A:link{TEXT-DECORATION:none}
A:hover{TEXT-DECORATION:none}
-----------------------------Windows Phone 7手机开发、.Net培训期待与您交流！ ------------------------------------
扫一扫
1383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
