- 1、本文档共23页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
样式学习笔记:
派生选择器:通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。
例子:
{
:;
:;
}
请注意标记为的蓝色代码的上下文关系:
我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用
我是斜体字。这是因为元素位于元素内。
我是正常的字体。
选择器:选择器可以为标有特定的元素指定特定的样式。
选择器以“”来定义。
{;}
{;}
下面的代码中,属性为的元素显示为红色,而属性为的元素显示为绿色。
这个段落是红色。
这个段落是绿色。
选择器和派生选择器
在现代布局中,选择器常常用于建立派生选择器。
{
:;
:;
:;
}
上面的样式只会应用于出现在是的元素内的段落。这个元素很可能是或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如或者,不过这样的用法是非法的,因为不可以在内联元素中嵌入
一个选择器,多种用法
即使被标注为的元素只能在文档中出现一次,这个选择器作为派生选择器也可以被使用很多次:
{
:;
:;
:;
}
{
:;
:;
:;
:;
:;
:;
}
在这里,与页面中的其他元素明显不同的是,内的元素得到了特殊的处理,同时,与页面中其他所有元素明显不同的是,中的元素也得到了不同的特殊处理。
单独的选择器
选择器即使不被用来创建派生选择器,它也可以独立发挥作用:
{
:;
:;
}
根据这条规则,为的元素将拥有一个像素宽的黑色点状边框,同时其周围会有个像素宽的内边距(,内部空白)。老版本的浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:
{
:;
:;
}
类选择器:
在中类选择器以一个点号显示:
{}
在下面的例子中,和元素都有类。这意味着两者都将遵守选择器中的规则。
.
注意:类名的第一个字符不能使用数字!它无法在或中起作用。
和一样,也可被用作派生选择器:
{
:;
:;
}
在上面这个例子中,类名为的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为的更大的元素可能是一个表格或者一个)
元素也可以基于它们的类而被选择:
{
:;
:;
}
在上面的例子中,类名为的表格单元将是带有灰色背景的橙色。
属性选择器
对带有指定属性的元素设置样式。
可以为拥有指定属性的元素设置样式,而不仅限于和属性。
注释:只有在规定了时,和才支持属性选择器。在及更低的版本中,不支持属性选择。
属性选择器
下面的例子为带有属性的所有元素设置样式:
[]
{
;
}
属性和值选择器
下面的例子为的所有元素设置样式:
[]
{
;
}
属性和值选择器多个值
下面的例子为包含指定值的属性的所有元素设置样式。适用于由空格分隔的属性值:
[]{;}
下面的例子为带有包含指定值的属性的所有元素设置样式。适用于由连字符分隔的属性值:
[]{;}
设置表单的样式
属性选择器在为不带有或的表单设置样式时特别有用:
[]
{
;
;
;
;
:,;
}
[]
{
;
;
;
:,;
}
选择器参考手册
选择器
描述
[]
用于选取带有指定属性的元素。
[]
用于选取带有指定属性和值的元素。
[]
用于选取属性值中包含指定词汇的元素。
[]
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[^]
匹配属性值以指定值开头的每个元素。
[$]
匹配属性值以指定值结尾的每个元素。
[*]
匹配属性值中包含指定值的每个元素。
如何创建
如何插入样式表
当读到一个样式表时,浏览器会根据它来格式化文档。插入样式表的方法有三种:
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在(文档的)头部:
浏览器会从文件中读到样式声明,并根据它来格式文档。
{:;}
{:;}
{:();}
不要在属性值与单位之间留有空格。假如你使用“:”而不是“:”,它仅在中有效,但是在或中却无法正常工作。
内部样式表
{:;}
{:;}
{:();}
内联样式
您可能关注的文档
最近下载
- (新版)道路交通运输安全管理培训课件.pptx VIP
- 人教版小学六年级上册数学教学反思全册.pdf
- 快速康复在骨科护理中的应用.pptx
- 雷达原理.ppt VIP
- 华大九天EDA工具使用说明-全国工业和信息化技术技能大赛-集成电路EDA赛项技术资料.doc
- 儿科护理学练习题.doc
- 黑龙江中医药大学2022-2023学年《细胞生物学》期末考试试卷(A卷)附参考答案.docx
- 部编版四年级语文上册期末测试卷(八套)(附答案).docx
- 辽宁省营口市2023-2024学年九年级上学期期末数学试题.pdf VIP
- 电大《学前儿童卫生与保健》课程实践二:课程相关新闻(或身边)事件发现与点评 .doc VIP
文档评论(0)