版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
CSS的使用目录◎CSS样式设置规则◎CSS样式的调用◎CSS基础选择器1CSS样式设置规则CSS样式设置规则由选择器和声明部分组成。语法：选择器
{属性1:属性值1;属性2:属性值2;属性3:属性值3;}选择器绿色部分为选择器，大括号部分为声明部分，包括属性与属性值。声明由属性和值两部分组成。属性和值用英文冒号“：”链接。多个“键值对”之间用英文分号“；”进行区分，最后一个分号可以省略，为了规范最好保留。举例：
P{color:red;
font-size:18px;line-height:30px;}声明部分注意选择器命名统一使用英文、英文简写或者统一使用拼音。选择器命名尽量不缩写，除非是一看就懂得单词。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，可以使用/**/（斜杠和星号）或者使用<!---->进行注释。其中/**/（斜杠和星号）进行多行注释，而<!---->进行单行注释。CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后用的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
例如：p{font-family:microsoftyahei";}CSS常见命名规则名称含义名称含义header页头container容器footer页脚nav导航aside或sidebar侧边栏column栏目wrapper或wrap页面外围控制整体布局宽度left左侧right右侧center中间loginbar登录条logo标志banner广告main页面主体hot热点news新闻download下载subnav子导航menu菜单submenu子菜单search搜索friendlink友情链接copyright版权scroll滚动content内容tab标签页list列表msg提示信息title栏目标题joinus加入guild指南service服务register注册status状态vote投票partner合伙伙伴2CSS样式的调用插入样式表的方法：行内样式表、内部样式表、链入外部样式表。1.行内样式表语法：<标签名称style="样式属性1:属性值1;样式属性2:属性值2;样式属性…">举例：<pstyle="color:#fff;font-size:24px;">举例演示【实例4-1】行内样式表应用。注意：行内样式也可以通过标签的属性来控制样式，由于没有做到结构与表现的分离，所以，不建议使用。只有在样式规格较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。2.内部样式表语法：<head><styletype="text/css">选择器{样式属性:属性值;…}</style></head>内部样式表是将样式表嵌入到HTML文件的文件头<head>中的方式。举例：<head><styletype="text/css">p{color:red;}</style></head>举例演示【实例4-2】内部样式表。注意：行内样式表与内部样式表的引用方法都属于引用内部样式表，即样式表规则的有效范围只限于该HTML文件，在该文件以外将无法使用。但这也具有一定的局限性，对于一个网站的构建，不建议使用这种方式，因为它不能体现CSS代码的重用优势。3.链接样式表语法：<linkhref="*.css"type="text/css"rel="stylesheet">链接样式表将一个外部样式表链接到HTML文档中。链接的CSS文件的位置文档的类型链接样式表举例演示【实例4-3】链接样式表。3基础选择器1.标签选择器语法：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例：标签选择符也称为类型选择符，是指用HTML标签名称作为选择器，HTML中的所有标签都可以作为标签选择符。td{font-size:14px;color:#ff0000;line-height:18px;font-family:"微软雅黑";}2.类选择器语法：.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例：定义h3标签选择器为“.redtitle”，例如：类选择器能够把相同的元素分类定义成不同的样式。定义类选择符时，在自定义类的前面需要加一个英文点号“.”。.redtitle{font-size:20px;color:#ff0000;}调用的方法是通过标签的class属性调用，例如：<h3class="redtitle">类选择器</h3>举例演示【实例4-4】类选择器的使用。注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。3.ID选择器语法：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例：定义h3标签选择器为“.redtitle”，例如：id选择器是用来对某个单一元素定义单独的样式。id选择器使用“#”进行标识，后面紧跟id名。#redtitle{font-size:20px;color:#ff0000;}调用的方法是通过标签的class属性调用，例如：<h3id="redtitle">类选择器</h3>举例演示【实例4-5】id选择器的使用。4.标签指定式选择器语法：
标签名.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签名#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签指定选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。举例演示【实例4-6】标签指定式选择器的使用。5.包含选择器语法：
选择器1选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;}包含选择器用来选择元素或元素组的后代，也称后代选择器，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。注意中间的空格举例演示【实例4-7】包含选择器的使用。6.群组选择器语法：
选择器1，选择器2{属性1:属性值1;属性2:属性值2;属性3:属性值3;}群组选择器是各个选择器通过逗号连接而成的。注意中间的逗号“，”注意：如果某些选择器定义的样式完全相同或部分相同，就可以利用群组选择器为它们定义相同的CSS样式。7.通配符选择器语法：
*{属性1:属性值1;属性2:属性值2;
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年河南应用技术职业学院高职单招职业适应性测试考试题库附参考答案详解（能力提升）
- 2027年陕西国际商贸学院单招综合素质考试题库必考附答案详解
- 2027年河南河洛文化职业学院高职单招职业技能考试模拟试卷含完整答案详解【名师系列】
- 2027年山东商贸技师学院单招综合素质考试模拟试卷及答案详解（必刷）
- 2027年烟台南山学院高职单招职业适应性测试考试题库附完整答案详解【网校专用】
- 2026年湖南现代数字职业学院高职单招职业适应性测试考试模拟试卷及完整答案详解（夺冠系列）
- 2026年山东鲁南职业学院高职单招职业技能考试题库及完整答案详解（全优）
- 2026年秦盛职业学院高职单招职业适应性测试考试题库完整参考答案详解
- 2025年青海省西宁市高职单招职业技能考试模拟试卷【综合题】附答案详解
- 2026年商丘职业技术学院单招综合素质考试题库含答案详解【达标题】
- 2026年度全国教师入编考试教育公共基础知识复习题库及答案(共50题)
- 2026年教育政策理论测试题及答案
- 高中数学立体几何学习现状及教学策略
- 2026汇能控股集团有限公司内蒙古卓正煤化工有限公司人才招聘33人备考题库含答案详解
- 医院基建内部控制制度（2026版）
- 护理管理前沿动态与趋势
- 体育文化企业财务制度
- 华为基本法(更新)
- 城市基础设施应急抢修方案
- 深度解析(2026)《NBT 10684-2021风电场工程质量管理规程》
- 神经源膀胱功能训练技术
评论
0/150
提交评论