CSS样式表_语法规则
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ID选择器
<HEAD> <STYLE TYPE="text/css"> #fire ID选择器 { color:red; font-size: 24px; } </STYLE> ID选择器的定义格式为： ＃ID名 { …样式规则; } </HEAD> 应用ID选择器：ID＝”ID名“ <BODY> <H2 ID="fire">我是二级标题，火是这样的</H2> <P ID =“water”>我是段落，水是这样的</P> </BODY>
构造CSS规则
CSS的思想就是首先指定对什么“对象”进行设 置，然后指定对该对象的哪个方面的“属性”进 行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分—— “对象”、“属性”和“值”组成的。
基本CSS选择器
CSS选择器的构成: 1 标签选择器 2 类选择器 3 ID选择器 4 超链接伪类选择器
ID选择器：
#green{ font-size:30px; /* 字体大小 */ color:yellow; /* 颜色 */ } 网页中调用：<p id=“green">ID选择器</p>
声明 #id 声明
{
color: yellow; 属性 值
font-size: 30px; 属性 值
}
ID 选择器
CSS选择器的构成
标签选择器： 标签选择器 h1{
color: red; font-size: 25px;
}
声明 声明
h1
{
color: red; 属性 值
font-size: 25px; 属性 值
}
选择器
HTM标签选择器
/*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
/* 标记选择器 */
/* 标记.类选择器 */ /* 红色 */ /* 类选择器 */
font-size: 20px; 属性 值
}
类别选择器
<HEAD> <STYLE type="text/css">
class类选择器
.myinput
{ border: 1px solid; CLASS类选择器 border-color:#D4BFFF; color:#2A00FF } </STYLE> </HEAD> 类选择器的定义格式为： <BODY> .类名 <FORM > { <P>用户名 样式规则; <INPUT name="textfield" … type="text" class="myinput"></P> 应用类选择器： class＝”类名“ } <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> </P> </FORM > </BODY>
伪类选择器
在IE浏览器中，CSS中通过设置伪类来控 制链接的样式
伪类选择器：
<HEAD> <STYLE type="text/css"> HTML选择器 A { /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰：无*/ } 特殊的伪类：A代表超链接，hover代表鼠标悬停 A:hover {/*鼠标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线*/ } </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线</A> </BODY> </HTML>
HTML选择器
应用H2样式
应用P样式
类选择器：
.red{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } 网页中调用：<p class=“red”>class选择器</p>
类别名称 .class 声明 声明
{
来自百度文库
color: green; 属性 值
构造CSS规则
CSS的作用就是设置网页的各个组成部分的表现 形式。 因此，如果把上面的表格换成描述网页上一个标 题的属性表，可以设想应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }
构造CSS规则
再进一步，如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; }
CSS样式表-语法规则
WEB基础
目标
构造CSS规则 基本CSS选择器 在网页中添加CSS的方法 复合选择器 CSS的继承特性
构造CSS规则
在具体介绍CSS之前，先思考一个生活中的问题。 张飞 { 身高:185cm; 这个表实际上是由 体重:105kg; 3个要素组成的， 性别:男; 即姓名、属性和属 性格:暴躁; 性值。 民族:汉族; }
复合选择器
交集选择器
并集选择器 后代选择器
交集选择器
类别名称 声明 声明
h3.class
{
color: red; 属性 值
font-size: 23px; 属性 值
}
标记
选择器
h3
h3.special
.special
交集选择器
p{ color:blue; } p.special{ color:red; } .special{ color:green; }