css样式学习.doc
文本预览下载声明
CSS（层叠样式表:Cascading Style Sheets）
样式表的核心规则 选择符{属性1：值；属性2：值2；} 例：h1{color:green;}
样式表放在那个地方 内部的CSS、外部的CSS 内部的CSS:
直接在html代码行中加入样式规则。例题:first.html 语法格式如下：标签名 style=”样式属性:属性值;样式属性:属性值;….” h1 style=”color:red;font-size:35px;font-family:隶书”样式表/h1 p style=”background:yellow;color:blue;font-size:25px;”这是在行内加入样式的效果/p
将样式表嵌入到html文件的文件头中。例题：first2.html html headtitle/title style type=”text/css” !-- 选择符1{样式属性:属性值;样式属性:属性值;…} 选择符2{样式属性:属性值;样式属性:属性值;…} 选择符3{样式属性:属性值;样式属性:属性值;…} - - /style /head body /body /html
将一个外部样式表连接到html文件中例题:first3.html html headtitle/title link rel=”stylesheet” href=”*.css” type=”text/css” /head body/body /html
将一个外部样式表输入到html文件中：例题:first4.html html headtitle/title style type=”text/css” !-- @import url(外部样式表的文件名); - - /style /head body/body /html
(1)CSS样式的编写 选择符组(可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义) 例如：p,table,td,th{font-size:9pt;} (2)类选择符 用类选择符能把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。(一种是：html标记名+“。”+类名。第二种：“。”+类名,第二种是经常使用的方式) 例如：p.right{text-align:right;} .right{text-align:right;} p class=”right”这个段落向右对齐的/p (3)ID选择符 与CLASS选择符类似，把CLASS换成ID就可以了 定义ID选择符要在ID名称前加上一个“#”号。 (4)包含选择符 可以单独对某种元素包含关系定义的样式表，例如元素1里包含元素2 例如： table a{font-size:12px;}这条样式只对表格内的链接改变了样式后，文字的大小为12像素，而表格外的链接的文字不变
样式的优先级 ID样式的优先级高于CLASS，再其次是html标签选择符，如果想超越这三者之间的关系可以使用!import提升样式表的优先权。实例:css_jibie.html
样式表的继承性 所在元素中嵌套的元素都会继承外层元素指定的属性值 例如： div{color:red;font-size:9pt;} ……. divp这个段落的文字为红色9号字/p/div
CSS的注释 /**/
伪类 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符，它的最大好处就是可以对链接在不同状态下定义不同的样式效果 书写顺序: a:link,a:visited,a:hover,a:actived
a:link { /*未访问的链接*/
color:#FF0000;
text-decoration:none;
}
a:visited{
/*已访问的链接*/
color:#00ff00;
text-decoration:none;
}
a:hover{
/*鼠标在链接上*/
color:#FF00FF;
text-decoration:underline;
}
a:active{
/*激活链接*/
color:#0000ff;
text-decoration:underline;
} 将伪类和类组合起来用，就可以在同一个页面中做几组不同的链接效果： 例如：
a.red:link{color:#FF0000;} a.r
显示全部