版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第3章CSS基础了解CSS的概念掌握CSS的语法掌握CSS选择器的种类以及用各种选择器的应用学习目标010203本章任务任务1CSS的语法和用法任务2基本选择器任务3复合选择器任务4属性选择器任务5伪元素选择器和伪类选择器任务6案例实战—再读火焰山任务1CSS的语法和用法任务描述
本案例是应用CSS样式改变标题、段落中的文字大小和颜色，以及设置层的大小和背景颜色。图4-1-1：设计元素颜色布局代码样式代码任务分析1.用h标签、p标签、span标签和div标签添加网页内容。2.通过CSS样式改变文本的大小和颜色、背景颜色。实现思路1.熟悉CSS颜色的多种表示方式以及设置字体大小的绝对单位和相对单位布局代码样式代码CSS语法语法：选择器{声明1；声明2；...声明n}CSS规则由选择器和声明两部分构成，选择器是指需要改变样式的HTML元素；声明使用花括号界定起来，用来设置元素的样式，可以是一条或多条，使用多条声明时用分号分隔，最后一个可不加分号。每条声明由属性和值组成。属性是将要设置的样式属性，每个属性有一个值，属性和值用冒号分开。属性值不加双引号，但是当属性值为若干个单词时，需要加上双引号。具体写法如下所示：选择器{属性1:值1；属性2:值2；...属性n:值n；}示例：h1｛font-size:16px;color:red｝其中，font-size和color是属性，分别表示设置文字的大小和颜色，red和14px是属性值，分别表示将文字的大小设置为14px，颜色设置为红色。书写CSS样式时是否包含空格不会影响CSS在浏览器在的解析效果，CSS对大小写也不敏感，但是调用CSS的class和id时，对名称的大小写是敏感的。方式描述及优缺点用英文单词表示优点：方便快捷而且特定颜色比较准确。缺点：表示颜色的数量有限，不容易记住，不支持透明度的表示。用十六进制表示以“#”开头的六位十六进制数表示，前两位表示红色的比例，中间两位表示绿色的比例，后两位表示蓝色的比例。优点：方便快捷而且特定颜色比较准确缺点：表示颜色数量有限，英文不好的不容易记住，不支持透明度的表示用RGB表示语法格式为：rgb(num1,num2,num3)num1,num2,num3三个参数的取值范围为0～255或0%～100%，其中num1表示红色，num2表示绿色，num3表示蓝色。颜色的表示方式方式描述及优缺点用RGBA表示语法格式为：rgba(num1,num2,num3,num4)与rgb(num1,num2,num3)相比，多了一个参数表示颜色透明度的参数num4，取值范围为0～1。用HSL表示语法格式为：hsl(num1,a%,b%)num1表示色调，取值范围为0～360，取值0或360表示红色，120表示绿色，240表示蓝色；a%表示饱和度，取值范围为0%～100%；b%表示亮度，取值范围为0%～100%。HSLA表示语法格式为：hsla(num1,a%,b%,num2)与hsl(num1,a%,b%)相比，多了一个参数表示颜色透明度的参数num2，取值范围为0～1。颜色的表示方式单位描述in英寸cm厘米mm毫米pt磅(1pt等于1/72英寸)pc12点活字(1pc等于12点)1.绝对单位CSS属性中使用的度量单位绝对单位在网页中很少使用，一般多用在传统平面印刷中，但在特殊场合使用绝对单位还是很必要的。单位描述px像素，计算机屏幕上的一个点，根据显示器屏幕分辨率而定。%百分比em1em等于当前的字体尺寸；2em等于当前字体尺寸的两倍；例如，如果某元素以12pt显示，那么2em是24pt。在CSS中，em是非常有用的单位，因为它可以自动适应用户所使用的字体。ex一个ex是一个字体的x-height。(x-height通常是字体尺寸的一半。)2.相对单位CSS属性中使用的度量单位相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等多种因素影响。任务实现<body><h3>CSS规则由选择器和声明两部分构成。</h3><p>CSS属性中使用的度量单位有<span>绝对单位(如：mm)和相对单位(如：px)</span></p><p>CSS表示颜色的方法有多种，英文单词表示是方法之一。</p><div></div></body>布局参考代码如下：任务描述任务分析任务实现<styletype="text/css">h3{font-size:20px;color:#ff0000;}p{font-size:16px;color:rgb(100,200,0);}CSS参考代码如下：span{font-size:7mm;color:blue;}div{width:100px;height:100px;background:rgba(0,0,255,0.5);}</style>任务描述任务分析任务2基本选择器任务描述本案例是将网页页面制作成信纸的样式，信纸是粉红色的，有横线，左上角和右下角均有插图。图4-2-1：设计信稿任务实现任务分析实现思路插入层，设置层的大小和边框。将左上角、右下角、横线的图片设置成层的背景，调整图片的大小与信纸相适应。横线和图片包括4行，因此横线图片的高度设置成4倍文本的高度，让每一行文字正好写在横线上。1.练习CSS外部文件样式表的应用任务实现1．通用选择器基本选择器“*”表示通用选择器，适用于文档中所有的元素。示例参考代码如下：<styletype="text/css">*{color:red;}</style><body><h1>网页设计与制作</h1><P>文本样式</P><p>列表样式</p></body>2.元素选择器基本选择器以HTML标签作为选择器，重新定义标签的样式。示例参考代码如下：<styletype="text/css">h1{color:red;}p{color:pink;}</style><body><h1>文字颜色为红色</h1><P>文字颜色为粉红色</P><p>文字颜色为粉红色</p></body>如下图将h1标签的文字颜色设置为红色，p标签的文字颜色设置为粉红色。3.类别选择器基本选择器自定义的样式，可以为不同元素多次套用。类别选择器以“.”作为前缀，元素套用格式为class=“类别选择器”。示例参考代码如下：<styletype="text/css">.layout{font-family:"方正舒体";font-size:24px;color:red;}.layout11{font-size:36px;font-style:italic;color:blue;}</style><body><pclass="layout">套用layout样式</p><h1class="layout">套用layout样式</h1><h2class="layout11">套用layout1样式</p></body>如下图所示：类别选择器layout分别被p标签和h标签套用，类别选择器layout11被h2标签套用。类别选择器的命名规则：要以小写字母开头，不能以数字开头，不能使用中文命名，要见名知意。4.ID选择器基本选择器为标有特定id的HTML元素指定特定的样式，ID选择器以“#”作为前缀。示例参考代码如下：<styletype="text/css">#page{margin:0auto;width:1000px;height:100px;line-height:100px;text-align:center;border:3pxsolidblue;}</style><body><divid="page">盒子套用page样式，在页面居中，宽为1000px，高为1600px，1px蓝色边框</div></body>如下图所示：ID选择器page，被div标签套用。基本选择器不同点类别选择器ID选择器语法选择器前缀为“.”选择器前缀为“#”（棋盘号）使用方法用class属性套用<h1class=“important”>用ID属性套用<h1id=“important”>套用语法多个类别选择器可以同时被套用语法：class=“选择器1选择器2”选择器之间用空格分隔不能结合使用使用次数在一个HTML文档中，可以多次使用ID选择器一般使用一次何时使用同一个页面要多次用到时使用在同一个页面只会出现一次的，如网页的页头、页体、页脚制作说明：类别选择器和ID选择器的区别表在文档中的位置和调用方法择器使用标签的style属性，将样式表定义在<html>标签内。示例：<pstyle="font-family:Verdana;font-size:3;color:red;">行内调用</p>1.行内调用如果样式表中只有少数几行代码，可以直接用<style>元素，放在页面的<head>区段中，称为内嵌样式表。示例：2.内部调用内部调用示例参考代码如下：<styletype="text/css">p{color:red;font-size:16px;}h1{color:blue;}.style1{font-size:18px;color:#00f;}</style><body><p>网页设计与与制作</p><pclass="style1">内部调用</p></body>3.外部文件调用基本选择器（1）外部样式表调用方法外部样式表用link语句调用。<link>必须放在<head>区段中指定，且必须有rel,type,href三个属性。rel属性指定文件的类型，type标示出连接文件的形式，href指向文件的位置。示例：（2）外部样式表文件外部样式表文件是将多个CSS样式写在一个扩展名为.css的文件中，可以用记事本等文本编辑器编写，文件中不包含html的任何标签。如右所示<linkrel=“stylesheet”type=“text/css”href=“example.css”>.mylayout{font-size:36px;color:#6699FF;}hr{color:#ff0000;height:5px;width:500;}.yy{font-size:36px;color:#6699FF;}任务实现布局代码CSS代码任务描述任务分析任务3复合选择器任务描述本案例通过复合选择器的应用实现元素的样式。图4-3-1：设计元素样式任务实现任务分析实现思路不同级别的关系，选择“空格”、“>”、“+”、“～”、“逗号”来实现元素的样式。掌握复合选择器的应用实现元素的样式任务实现知识点导入一、后代选择器（包含选择器）语法：元素之间添加空格功能：给元素的后代元素添加样式示例：ulli{color:red;border:1pxsolidblue;}给ul所有的后代元素（包括孙元素）li添加样式二、子元素选择器语法：父元素和子元素之间用“>”联接功能：给元素的直接后代添加样式示例：ul>li{color:red}给ul的直接子元素li添加样式，不包括孙元素（但是字体、颜色样式会继承）知识点导入三、相邻选择器语法：元素之间用“+”联接功能：给紧贴在E元素后面的F元素添加样式示例：h2+p{color:green}给紧跟在h2标签后面的p元素添加样式四、兄弟选择器语法：元素之间用“～”联接功能：给E元素所有后面的兄弟元素F添加样式示例：h3～p{color:red}给h3标签后面的同级p元素添加样式五、并列选择器语法：元素之间用“，”联接功能：同时对多个元素添加样式示例：h1,p,a{color:red}给h1、p、a元素同时添加样式任务实现<body><p>不在盒子中的P</p><!--文字大小为30px--><divclass="sec1"><!--300*200，蓝色边框--><h3>在sec1盒子中的h3标题</h3><p>在sec1盒子中的p1</p><!--文字大小为25px--><p>在sec1盒子中的p2</p><!--文字大小为25px--><p>在sec1盒子中的p3</p><!--文字大小为25px--></div><divclass="sec2"><!--300*200，蓝色边框--><h3>在sec2盒子中的h3标题</h3><p>在sec2盒子中的p1</p><!--文字大小为20px--><p>在sec2盒子中的p2</p><!--文字大小为15px--><p>在sec2盒子中的p3</p><!--文字大小为20px--><divclass="sec21"><h3>在sec21盒子中的h3标题</h3><p>在sec21盒子中的p3</p><!--文字大小为15px--><p>在sec21盒子中的p2</p><!--文字大小为20px--></div></div>布局代码<divclass="sec3"><!--300*200，蓝色边框--><h3>在sec3盒子中的h3标题</h3><p>在sec3盒子中的p1</p><!--文字大小为10px--><p>在sec3盒子中的p2</p><!--文字大小为10px--><p>在sec3盒子中的p3</p><!--文字大小为10px--><divclass="sec31"><h3>在sec31盒子中的h3标题</h3><p>在sec31盒子中的p3</p><!--文字大小为30px--><p>在sec31盒子中的p2</p><!--文字大小为30px--></div></div></body><styletype="text/css">.sec1,.sec2,.sec3{width:600px;height:250px;border:2pxsolidblue;}/*并列选择器*/p{font-size:30px;line-height:0.6;}.sec1>p{font-size:25px;}/*子元素选择器*/.sec2p{font-size:20px;}/*后代选择器*/.sec2>h3+p{font-size:15px;}/*相邻选择器*/.sec3>h3~p{font-size:10px;;}/*兄弟选择器*/</style>CSS代码任务描述任务分析任务4属性选择器任务描述本案例通过属性选择器来设置表单控件、提交按钮和重置按钮的样式。图4-4-1：设计注册信息表单任务实现任务分析实现思路插入表单元素。用“input[type="submit"],input[type="reset"]”属性选择器写按钮的样式。掌握通过属性选择器来设置表单控件、提交按钮和重置按钮的样式任务实现一、element[attibute]知识点导入功能：给具有attibute属性的element元素添加样式。示例：给有value属性或style属性的input元素添加绿色的背景颜色input[value][style]{background:green}二、element[attibute=“val”]功能：给attibute属性等于val的element元素添加样式示例：给value=“vip”的E元素添加红色的背景input[value=“vip1”]{background:red}三、element[attibute～=“val”]知识点导入功能：当attibute属性有多个值时，给值等val的element元素添加样式示例：当input元素的style有多个属性值，只给style属性值为15px的input元素添加蓝色背景。input[style～=“15px”]{background:blue}四、element[attibute|=“val”]功能：当attibute属性值中有“-”连接符时，给element元素添加样式示例：如果html代码为：<plang=“en-us”>，则给该P元素添加文字颜色为红色的样式p[lang|=“en”]{color:red}五、element[attibute^=“val”]知识点导入功能：给attibute属性值以“val”开头的element元素添加属性示例：给val属性值以vip开头的input元素添加绿色背景input[value^=“vip”]{background:green}六、element[attibute$=“val”]功能：给attibute属性值以“val“结尾的E元素添加属性示例：给href属性值以.cn结尾的a元素设置红色字体a[href$=“.cn”]{color:red}知识点导入七、element[attibute*=“val”]功能：给attibute属性值包含“val”的element元素添加属性；示例：给val属性值包含“vip”的input元素添加红色背景input[value*=“vip”]{background:red}CSS代码任务实现部分布局代码任务描述任务分析任务5伪元素选择器和
伪类选择器任务描述本案例运用伪元素选择器和伪类选择器来进行页面文字设置图4-5-1：设计文字格式排版任务实现任务分析实现思路设计两个div盒子，设置宽高。对两个盒子分别放入文字“改革”和“开放”两段内容，标题用h2标签，其余文字用p标签“在坚持社会主义制度的前提下”用两个p标签里。对“改革”内容使用伪类选择器进行设置文字样式，对“开放”内容使用伪元素选择器进行文字设置，如何使用伪类和伪元素选择器，我们来看一下相关的知识点。任务实现伪元素选择器设置元素内容第一个字符的样式语法：示例：设置元素内容第一行字符的样式语法：示例：在每个element元素的内容之前插入内容，用来和content属性一起使用语法：示例：element：first-letter/element：：first-letter；element：first-line/element：：first-line；p::first-line{color:green}element：before/element：：beforea::before{content:"点击"
}p::first-letter{font-size:50px}伪元素选择器在每个element元素的内容之后插入内容，用来和content属性一起使用语法：示例：在a元素之后插入图片设置对象被选择时的样式语法：示例：设置段落被选择时的背景颜色element：after/element：：afterelement：：selectiona::after{
content:url(../img/ss.png)}p::selection{background:red}1.结构伪类选择器伪类选择器（1）给父元素的第一个子元素element设置样式语法：element：first-child（2）给父元素的最后一个子元素element设置样式语法：element：last-child（3）给仅有的一个子元素element设置样式语法：element：only-child（4）给元素的第n个子元素element设置样式语法：element:nth-child(n):说明：n可以数字、奇数（odd）、偶数(even)或者用公式（5）给倒数第n个子元素element设置样式语法：element:nth-last-child(n)：tr:nth-child(3)表示第三行tr:nth-child(odd)表示奇数行tr:nth-child(even)表示偶数行tr:nth-child(2n)表示2的倍数行2.UI伪类选择器伪类选择器（1）向被激活的元素添加样式语法：element：active（2）当鼠标悬浮在元素止方时，向元素添加样式语法：element：hover（3）向未被访问的链接添加样式语法：element：link（4）向已被访问的链接添加样式语法：element：visited（5）向拥有键盘输入焦点的元素添加样式语法：element：focus（6）向带有指定lang属性的元素添加样式语法：element：lang（7）选择每个被选中的input元素时的样式语法：input:checked（8）选择每个禁用的input元素时的样式语法：input:disabled（9）选择每个启用的input元素时的样式语法：input:enabled（10）选择当前活动的锚点元素的样式语法：#E:target（11）选择element元素之外的每个元素的样式语法：:not(element)1.就近原则CSS样式的优先级离要修饰目标越近的样式优先级越高。如以下示例中，h1标签套用了离它更近的htmlh1样式，因而文字的颜色是紫色的。示例：示例参考代码如下：<styletype="tex
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年全年班车租赁服务合同3篇
- 手术室脑出血护理查房
- 2024年度虚拟现实技术应用合作协议
- 2024【合同范本】外墙干挂石材合同
- 2024购买房屋协议合同范本
- 2024年度广告发布合同标的及广告内容具体要求3篇
- 2024年度医疗设备采购及维护服务合同
- 2024年临时劳务分包协议3篇
- 恶性肿瘤靶向治疗的护理
- 2024年度消防设施维修与保养合同2篇
- 2024届北京市西城区数学九年级第一学期期末监测试题含解析
- 2024年中考英语考纲词汇重点单词800词（复习必背）
- 李子坪乡村旅游基地建设项目招标文件
- 科研伦理与学术规范期末考试
- 环境科学专业大学生职业生涯规划书
- 英语语言学（山东大学）智慧树知到课后章节答案2023年下山东大学（威海）
- 监理人员考勤表
- 基于单片机的电子跑表设计
- 第十四章 机械通气(急危重症护理学)
- 中小学班会课评价表
- GB/T 10000-2023中国成年人人体尺寸
评论
0/150
提交评论