版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0
1标签选择器02类名选择器03ID选择器目录contents04通配符选择器PART1标签选择器如图，要把里面的小黄人分为2组怎么分？根据不同需求把不同标签选出来，CSS只有选对了标签才可以设置标签的样式选择器的作用标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}优点：能快速为页面中同类型的标签统一样式缺点：不能设计差异化样式div>span>
标签选择器标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：PART2类名选择器·
类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}优点：可以为元素对象定义单独或相同的样式，可以设置一个或者多个标签类名选择器类选择器使用“·”（英文点号）进行标识，后面紧跟类名，标签调用的时候用class="类名"即可，其基本语法格式如下：1.
长名称或词组可以使用中横线“-”来为选择器命名2.
不建议使用“_”下划线来命名CSS选择器3.
不要纯数字、中文等命名，尽量使用英文字母来表示4.驼峰命名法：每个单词的首字母大写，例如："myClassName"5.命名一定要有意义，尽量让别人能知道类名的目的选择器命名规则类名选择器案例<head><metacharset="utf-8"><style>
span{font-size:100px;}.blue{color:blue;}.red{color:red;}.orange{color:orange;}.green{color:green;}
</style></head><body>
<spanclass="blue">G</span><spanclass="red">o</span><spanclass="orange">o</span><spanclass="blue">g</span><spanclass="green">l</span><spanclass="red">e</span></body>用户可以给标签指定多个类名，从而达到更多的选择目的多类名选择器实际开发使用场景1.把标签元素相同的样式放在一个类里面2.调用公共类，在调用单个标签独有样式类名优点节省代码，修改方便多类名选择器使用---小贴士---1.样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。2.各个类名中间用空格隔开。<divclass="pink
fontWeight
font20">班长</div><divclass="font20">学习委员</div><divclass="font14
pink">团支书</div><divclass="font14">生活委员</div>PART3ID选择器#ID名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}ID选择器类选择器（class），好比人的名字，是可以多次重复使用的，比如“张伟”。id选择器，好比人的身份证号码，是唯一的，不得重复，只能使用一次。其基本语法格式如下：ID选择器ID选择器和类选择器最大的区别：ID选择器的唯一性id选择器用于页面唯一属性，常与JS搭配使用。PART4通配符选择器*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}通配符选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：通配符选择器作用一般使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2026年tod教材测试题及答案
- 英语牛津译林版 (2019)Unit 1 Lights,camera,action!教学设计
- 活动二 健康护航员-卵石路说课稿-2025-2026学年小学综合实践活动三年级下册沪科黔科版
- 5.1 我们的情感世界 教学设计-2023-2024学年统编版道德与法治七年级下册
- 小学2025表达兴趣主题班会说课稿
- 长春版三年级下册第10课 神奇的泡泡教学设计及反思
- 小学音乐打夯歌教案
- 高中长尾词科技伦理教学说课稿
- 建筑垃圾减量化目标及措施
- 小初中高中小学：2025年科普主题班会说课稿
- 测绘公司无人机管理制度
- 高考完形填空之满分解题思维
- 委托办理采矿证协议合同
- 挂名法人免责协议书
- 物流基础培训课件
- 电泳涂装生产线安全操作规程2025
- 微波治疗仪的使用
- 《人工智能导论》(第2版)高职全套教学课件
- 流体力学基本练习题
- 汽车设计驱动桥设计
- 5.1“九统一”继电保护装置设计一
评论
0/150
提交评论