版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
2.2
CSS3CSS概述CSS（CascadingStylesSheets，层叠样式表），是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS的主要用途
页面元素美化页面布局
HTMLCSS结构表现网页3.1.1CSS的语法CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。h1{ color:red; font-size:25px;}关羽{身高：185cm;体重：105kg}CSS样式规则的组成－选择器一条CSS样式规则由选择器(selector)和声明(declarations)组成。选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中h1color:red;font-size:25px;{}选择器属性值属性值声明声明CSS选择器的作用范围选择器可以是“标记名”、“.类名”或“#id名”，它们的作用范围如下p{…}.xx{…}#cc{…}h1{…}2.2.2引入CSS的方法在HTML中引入CSS的方法HTML和CSS是两种作用不同的语言，它们同时对一个网页产生作用，必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。在HTML中，引入CSS的方法有行内式嵌入式导入式链接式行内式html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如：
<pstyle="color:red;line-height:160%;"width="92%">一段</p>仅在调试个别元素样式，或网站后台编辑器中使用嵌入式将页面中所有CSS样式集中写在<style>和</style>之间<style>标记必须写在文档头部区域内链接式外部样式表是将CSS代码保存成一个单独的.css文件2.2.3选择器的分类标记选择器如：body{}div{}span{}h1{}等等例如：h1{color:red;}……<h1>……</h1><h1>……</h1>所有h1标记都被选中纠结的问题
??{color:?;}……<h1>我是红色的</h1><h1>我是蓝色的</h1>结论：相同的标记，怎么设置不同的样式class类选择器类选择器可选中具有相同类名的一类元素。类选择器以.开头，类名任意取。.blue{ color:blue;}……<h1class=“red”>……</h1><h1class=“blue”>……</h1><h3class=“blue”>……</h3>②根据类名定义类选择器①为元素定义类名id选择器可选中具有某个id的唯一元素。id选择器以#
开头。例如：#red{color:red;}……<h1id=“red”>……</h1> …… <h1id=“red”>……</h1>id选择符①为元素定义id名②根据id名定义id选择器id名不能重复类选择器与id选择器的区别一个元素可应用多个类名，但只能有一个id名<pclass=“onetwo”>……</p>
<pid="onetwo">……</p>
多个元素可应用相同的类名，但id名都不能相同<h2class=“red”>……</p><h2class=“red”>……</p><pid=“two”>……</p><pid="two">……</p>
元素的id名就如同人的身份证号一样，多个元素不能具有相同的id，一个元素也不能具有多个id随堂练习将两个h1元素的字体颜色分别设置为红色和蓝色CSS文本修饰举例h1{
font-size:16px; text-align:center;
letter-spacing:0.3em;}p{ font-size:12px; line-height:160%; text-indent:2em;}.source{ color:#999999; text-align:right;}
<h1>失败的权利</h1><pclass="source">2006年5月11日美国《侨报》</p><p>自从儿子进了足球队，……，不亲身经历是无法体会的。</p><p>他们队有个传统，……几乎是战无不胜的。</p><p>在我看来，……孩子们是当之无愧的。</p><p>接受孩子的失败，就给了他成功的机会。</p>CSS文本属性应用举例text-indent:2em; 段前空两格text-decoration:none;去掉下划线，line-height:150%;1.5倍行间距。text-overflow:ellipsis; 自动去除容纳不下的文本2.2CSS的层叠性和继承性引例如果元素同时被多个选择器选中，会怎么样？p{ font-size:14px;}.red{color:red;
}#k2{background-color:#ff9;
}……<pid="k2"class="red">被选中的元素</p>显示效果被选中的元素样式不冲突时引例如果元素同时被多个选择器选中，会怎么样？p{ color:yellow;}.red{color:red;
}#k2{color:blue;
}……<pid="k2"class="red">被选中的元素</p>显示效果被选中的元素样式冲突时CSS的层叠性层叠性：当HTML元素被多个选择器同时选中时1）如果多个选择器定义的样式不冲突，则元素将应用所有选择器定义的样式。2）如果多个选择器定义的样式冲突，则元素将应用优先级高的选择器定义的样式。CSS选择器的优先级CSS规定选择器的优先级从高到低为：行内样式
>ID选择器
>类选择器
>标记选择器总的原则是：
越特殊的样式，优先级越高。!important关键字!important:强制改变选择器的优先级!important>行内样式>ID样式>类别样式>标记样式p{color:yellow;}.red{color:red!important;
}#k2{color:blue;
}……<pid="k2"class="red">被选中的元素</p>则显示效果为：被选中的元素2.2CSS的继承性CSS的继承性继承性：指子元素会继承父元素定义的某些样式。例如：div{ font-size:
24px;color:
red;}……<div> <p>基于<b>TCP/IP</b>的网络编程</p></div>显示效果为：基于TCP/IP的网络编程CSS继承性例题<style>body{text-align:center;}p{font-size:24px;text-decoration:underline;}em{color:#F00;}.right{text-align:right;}</style><body><p><em>电子商务</em>教研室</p><pclass="right"><em>电子商务</em>教研室</p></body>继承关系树型图(DOM)要善于利用CSS继承性利用CSS继承性，可大大缩减代码的编写量。例如，如果网页中大部分文字的字体都是14px，则可以对body元素定义：
body{font-size:14px;}有些特殊的文本如果要求其他字体大小，则利用类选择器或id选择器对它们重新定义。不是所有的CSS属性都具有继承性color,font-*text-indenttext-alignline-heightletter-spacingborder-collapseopacity
有继承性text-decoration所有盒子属性border,margin,padding布局属性:float,display,position等
无继承性一般是CSS的文本、段落属性具有继承性，而其他属性（如背景属性、布局属性等）则不具有继承性
2.2.3选择器的组合选择器的组合每个选择器都有它的作用范围，前面介绍了三种基本的选择器，它们的作用范围都是一个单独的集合如果希望对几种选择器的作用范围取交集、并集、子集后对选中的元素再定义样式，就需要用到复合选择器了复合选择器就是两个或多个基本选择器，通过不同方式组合而成的选择器。主要有:交集选择器并集选择器后代选择器1交集选择器示例：选择所有类名为two的p元素：p.two{…}交集选择器：由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。例如：h1.one；p#intro。h1.oneh1
.one交集选择器举例例如由于所有的表单控件都是input标记，如果只希望某个表单控件（如提交按钮）受影响，则可用交集选择器input.red{color:#F00;}<inputtype="submit"name="Sub"class="red"value="提交"/>2并集选择器示例：选中所有h2,h3和类名为tit的元素。h2,h3,.tit{…}并集选择器：就是对多个选择器进行集体声明，多个选择器之间用
,隔开。如h2,.tit{…}的选择范围如图所示：h2
.tit
h2,.tit并集选择器举例<style>h1,h2,h3,p{font-size:12px;color:purple;}h2.special,.special,#one{text-decoration:underline;}</style><body><h1>示例文字h1</h1><h2class="special">示例文字h2</h2><h3>示例文字h3</h3><h4id="one">示例文字h4</h4><pclass="special">示例文字p1</p>通配选择符如果要对网页中所有的元素进行集体声明可使用通配选择符**{ /*通配选择符*/ color:purple; /*文字颜色*/ font-size:15px; /*字体大小*/ }3后代选择器示例：选中所有位于#nav元素内的a元素。#nava{…}后代选择器：选择作为指定元素后代的元素。指定元素和其后代元素间用空格隔开。例如：
h1em{}：选择位于h1元素中的em元素
.cont*{}：选择类名为cont元素的所有后代元素
div.tit{}：选择div元素内的所有类名为tit的元素aab后代选择器例题<style>a{font-size:16px;color:red;}ab{color:mediumpurple;}</style><body><b>这是b标记中的文字</b><br/><ahref="#">这是<b>a标记中的b<span>标记</span></b></a>提示：span元素继承了父元素“ab”的颜色样式后代选择器举例后代选择器还能够进行多层嵌套。例如：.specialb{color
:red}#menuli{padding
:06px
;}td.top.ban1strong{font-size
:16px
;} #menua:hoverb
经验：选择器的嵌套在CSS的编写中可以大大减少对class或id的声明。因为在构建页面html框架时通常只给外层标记（父标记）定义class或id，内层标记（子标记）能通过嵌套表示的则利用后代选择器来选中。4.复合选择器的优先级复合选择器的优先级比组成它的单个选择器的优先级都要高。优先级权重：ID选择器=100，类选择器=10，
标记选择器=1
h1{color:red;} /*权重=1*/pem{color:blue;} /*权重=2*/p.noteem.dark{color:gray;} /*权重=22*/#main{color:black;} /*权重=100*/当权重值一样时，会采用“层叠原则”，一般后定义的会被应用
复合选择器优先级计算例题#aaulli{ color:red }.aa{ color:blue }……<divid="aa"><ul><liclass=“aa”>web标准常见问题大全之
<emclass="aa">复合选择器</em>的优先级</li></ul></div>注意：li元素同时被两个选择器选中优先级102优先级10CSS样式的优先级总图!important样式行内样式id选择器类选择器复合选择器标记选择器浏览器对标记预定义的样式继承的样式低高优先级复杂选择器名称的分解CSS选择器分解的原则是：先逗号，接着空格，再冒号，最后点号。例如：
#menua.clas:hoverb,.specialb.clas{…}就可先分解为：
#menua.clas:hoverb
和 .specialb.clas
三层后代选择器 两层后代选择器
2.2CSS高级选择器CSS2.1新增加的选择器关系选择器子选择器相邻选择器兄弟选择器属性选择器伪类选择器伪元素选择器1.子选择器子选择器用于选中元素的直接后代（即儿子），它的定义符号是大于号（>）
body>p{ color:green;}<body><p>这一段文字是绿色</p><div><p>这一段文字不是绿色</p></div><p>这一段文字是绿色</p></body>2相邻选择器和兄弟选择器相邻选择器（E+F）将选中紧跟在E后面的一个兄弟元素F（这两个元素具有共同的父元素）兄弟选择器（E~F）将选中跟在E后面的所有F元素h2+p{
color:red;}选中紧跟在h2元素后面的一个p元素h2~p{
color:red;}选中跟在h2元素后面的所有p元素相邻选择器和兄弟选择器举例在一组a元素中，选中除第1个a元素外的所有a元素a+a{…}选中h2元素后面所有的同级元素。h2~*{…}3.3.2属性选择器（1）匹配HTML属性
a[name] {color:purple;}/*具有name属性的a元素*/ img[border]{…} [special] {…} /*具有special属性的任意元素*/（2）匹配属性和值input[type="submit"] {background:purple;}（3）匹配单个属性值h2[class~="two"]{color:red;}<h2class="onetwothree">文字是红色</h2>属性选择器匹配部分属性值选择器功能E[att~="val"]选择att属性值为一用空格分隔的词列表，其中一个词是val的E元素E[att*="val"]选择att属性值中包含字符串val的E元素E[att|="val"]选择att属性值以“val-”开头或属性值为val的E元素E[att^="val"]选择att属性值为以val开头的E元素E[att$="val"]选择att属性值为以val结尾的E元素3.3.3伪类选择器示例：a:hover{color:
red;}
当鼠标悬停（hover）在a元素上时，a元素中的文本变成红色。链接伪类只能用于a元素例如：a:link、a:visited伪类选择器Pseudo-classes动态伪类可用于任何元素例如：p:hoverp:active
伪类选择器的写法伪类选择器：用来选中在某种特殊状态下的元素E:hover{}:表示鼠标悬停时元素的样式，是最常用的伪类伪类选择器的写法：p:hover{}a.red:hover{}#k2:hover{}通过伪类选择器制作动态超链接示例：当鼠标悬停时，超链接变色a:link{color:gray;} /*未访问的链接*/a:visited{color:#ccc;} /*已访问的链接*/a:hover{color:#900;} /*鼠标划过链接*/a:active{color:red;} /*已选中的链接*/示例：超链接默认没有下划线，当鼠标悬停时，出现下划线并变色
a{color:black;text-decoration:none
}
a:hover{color:red;text-decoration:underline
}:first-child伪类选择器:first-child :first-child伪类用于匹配它的父元素的第一个子元素，即：这个元素是它父元素的第一个儿子，而不管它的父元素是哪个。
p:first-child{ font-weight:bold; }
/*p是第1个子元素，而不是：p的第1个子元素*/ <body>
<p>这一段文字是粗体</p> <!--第1行，被选中--> <h2>下面哪些文字是粗体的呢</h2> <p>这一段文字不是粗体</p>……:focus伪类选择器:focus
用于定义元素获得焦点时的样式，常用于表单文本框，如
input:foucs{ …}:checked
用于为被选中的单选按钮和复选按钮添加样式
input:checked{…}瞬间改变过渡特征3.3.4使用过渡属性配合hover伪类初始状态终止状态触发器hover伪类能实现瞬间改变颜色等动态效果，但无法实现逐渐平滑改变。可见动态伪类没有中间状态，过渡(transition)就是让一个属性在两种状态之间平滑改变的动画。例如：div{width:100px;background:#fcc;
height:40px;
transition:all
1s;
}
div:hover{width:300px;background:#f00;
}2.transition属性的取值transition属性的取值可以为4,3,2个，含义如下transition:color.5sease-in.1s;
/*作用属性持续时间速度变化延迟*/transition:color.5s.1s;
/*作用属性持续时间延迟*/transition:color.5s;
/*作用属性持续时间*/transition属性的子属性transition属性实际上是4个属性的简写
transiton:
transition-property
transition-duration
transition-timing-function
transition-delay;transiton-property：过渡作用的属性，all或属性名
transition-duration：过渡的持续时间，如.5stransition-timing-function：过渡持续期间在速度上有变化，如ease、linear、ease-in、ease-out等
transition-delay：过渡效果前的延迟时间，如1s
3.多重过渡div{width:100px;height:40px;
background:#fcc;line-height:40px;
transition:width2s,height1.5s,padding-left4s;}div:hover{width:300px;padding-left:140px;height:80px;}……<div>演示过渡效果</div>
4.transition应用举例图像渐变列表文本移动图标变文字3.3.5伪元素选择器:first-letter :first-letter用于选中元素内容的首字符。例如：
p:first-letter{font-size:
2em;float:
left;}
它可以选中段落p中的第一个字母或中文字符。
:first-line :first-line用于选中元素中的首行文本。例如：
p:first-line{font-weight:
bold;letter-spacing:
.3em;}
:before和:after伪元素选择器:before和:after在元素内部的左右两侧产生两个伪元素内容:before:after内容:before:after伪元素默认是行内元素设置伪元素为块级元素5.伪元素选择器:before和:after必须配合content属性使用p:before,p:after{
content:"--";color:red;}……<p>看这一段文字的左右</p><p>这一段文字左右</p>:before和:after伪元素的应用:before和:after伪元素常配合绝对定位属性制作各种附加的小图标，这样不必修改HTML代码。before伪元素after伪元素CSS3标准推荐伪元素选择器用::开头，以便与伪类选择器:
相区别。CSS所有的选择器类型总结3.4.3CSS属性的值和单位CSS属性的值和html属性值的比较值是对属性的具体描述，而单位是值的基础。没有单位，浏览器将不知道一个边框是10厘米还是10像素。CSS中的颜色取值和长度单位比较复杂。注意：html标记的属性值一般不要写单位，这是因为html属性的取值只能是像素或百分比CSS中定义颜色的值可使用命名颜色、rgb颜色、rgba颜色和16进制颜色。a.命名颜色：
p{color:red;}b.rgb颜色：
h1{
color:rgb(139,31,185);
}
h1{color:rgb(12%,201,50%);}c.rgba颜色
div{color:rgba(240,0,0,0.3);}颜色的值红绿蓝透明度颜色的值d.16进制颜色将RGB颜色的数值转换成16进制的数字，如#ffcc33 #fc3
其参数取值范围为：00－FF（对应十进制仍为0－255），如果每个参数各自在两位上的数值相同，那么该值也可缩写成“#RGB”的方式。例如，#ffcc33可以缩写为#fc3。CSS长度单位为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。绝对单位绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pica（pc）。 由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会按显示器的比例去显示。所以绝对单位很少用。
相对单位相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。有5种相对长度单位，元素的字体高度(em)、根元素的字体高度(rem),字母x的高度(ex)和像素(px)em就是元素原来给定的字体font-size的值。ex是以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。像素px：象素指显示器按分辨率分割得到的小点，任意浏览器的默认字体高都是16px百分比百分比显得非常简单，也可看成是一个相对量。如：
td{font-size:12px;line-height:160%;} /*设定段落的行高为字体高度的160%*/ div{width:80%} /*线段长度是相对于浏览器窗口的80%*/2.2网页中的字体字体的设置h2{font-family:'幼圆';}h2{font-family:"方正姚体",'幼圆',"宋体";}@font-face可以为字体文件名定义一个变量，例如：@font-face{font-family:YT; /*声明字体变量*/src:local("方正姚体"),local("幼圆"),local("宋体");}h2{font-family:YT;}.tt{font-family:YT;}解决代码冗余本地字体注意（1）在@font-face规则中，font-family的作用是声明字体变量，与普通选择器中的font-family作用不同。（2）src属性定义字体的下载地址，其值可以是local（表示本机）或url（表示网址）。另外，每个local()或url
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 26年基础护理服务民族复兴贡献课件
- 2026年宁夏大学附中中考语文一模试卷(含详细答案解析)
- 剖宫产的护理查房
- 基层医疗机构慢性病管理工作规范
- 颅脑损伤恢复期护理查房
- 中小学教师中高级职称答辩备考试题及答案题
- 2025年中铁七局集团有限公司高校毕业生招聘笔试历年参考题库附带答案
- 全新家具商场门店超级销售技巧
- 2023年山东教师资格全国统考《小学综合素质》全真试卷及解析
- 年产3500万件制动系列活塞生产线技改项目可行性研究报告模板-申批备案
- 2026文化和旅游部恭王府博物馆招聘应届毕业生4人考试备考试题及答案解析
- 昆明供电局项目制用工招聘笔试真题2025
- 2026年新国考公共基础知识专项试题及答案
- 2024版公路工程工艺工序标准化手册-路面分册
- CPU性能测试实验报告
- 冰淇淋购买合同书模板
- 2025年光伏组件拆卸和更换施工技术方案
- 煤矿重大风险停产撤人制度
- 医疗机构患者隐私保护培训课件
- 腰痹的健康宣教
- 医院药学高质量发展规划（2026-2030 年）及 2026 年度实施要点
评论
0/150
提交评论