css3选择器&文字与字体相关样式

最新推荐文章于 2025-06-12 17:08:28 发布

冬男zdn

最新推荐文章于 2025-06-12 17:08:28 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3

本文链接：https://blog.youkuaiyun.com/LikeStudyBoy/article/details/78916389

css3 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS3的新增功能，包括选择器、渐进增强和优雅降级的概念，新增文本属性及其应用场景等内容，帮助读者深入理解并掌握CSS3。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录
一、css3的概念、优势及应用
二、渐进增强和优雅降级的简介
三、css3部分新增选择器的语法及应用场景
四、css3层级选择器的语法及应用场景
五、css3新增关于文本属性的语法及应用场景

一、css3的概念、优势及应用

1.1 css3的概念
	css3即层叠样式表（cascading stylesheet）
1.2 css3的优势
	css3是css技术的升级版本，css3语言开发是朝着模块化发展的
	模块包括：盒子模型、列表模型、超链接方式、语言模块、背景和边框、
	文字特效、多栏布局等
1.3 css3的应用
	css用于控制网页的样式和布局、css3是最新的css标准
	css3完全向后兼容，因此您不必改变现有的设计。浏览器通常支持css2
1.4 css3的选择器
	选择器是css3中的一个重要内容。使用它可大幅度提高开发人员书写或修改样式表时的工作效率
	在css3中，提倡使用选择器来让样式与元素直接绑定起来
	这样的话，在样式表中什么样式与什么元素匹配变得一目了然，修改起来也很方便。
	不仅如此，通过选择器，我们还可以实现各种机构复杂的制定，
	同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。

二、渐进增强和优雅降级的简介

2.1 简介
	渐进增强一个概念和优雅降级印象中是随着css3流出来的一个概念
	由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，
	所以在高级浏览器中使用css3，而低级浏览器只保证最基本的功能。
	乍一看两个概念差不多，都是关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容
	以及这种不同造成的工作流程的差异
2.2 渐进增强
	什么是渐进增强呢？渐进增强 progressive enhancement
	针对低级浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互
	等改进和追加功能达到更好的用户体验
2.3 优雅降级
	优雅降级 graceful degration
	一开始就构建完整的功能，然后在针对低浏览器进行兼容。
2.4 区别
	优雅降级是从复杂的现状开始，并试图减少用户体验的供给
	而渐进增强则是从一个非常基础的，能够起作用额版本开始，并不断扩充，以适应未来环境的需要
	优雅降级意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
2.5 语法
	渐进增强的写法
	.transtion{
		-wenkit-transtion:all .5s;
		-moz-transtion:all .5s;
		-o-transtion:all .5s;
		transtion:all .5s;}
	优雅降级的写法
	.transtion{
		transtion:all .5s;
		-o-transtion:all .5s;
		-moz-transtion:all .5s;
		-webkit-transtion:all .5s;}

三、css部分新增选择器的语法及应用场景

3.1 属性选择的语法及应用
	在html中，通过各种各样的属性，我们可以给元素增加很多附加信息。
	例如：通过width属性，我们可以指定div元素的宽度
	通过id属性，我们可以将不同的div元素区分
	并且通过js来控制这个div元素的内容和状态。
	3.1.1 E[att]（css2.0） 语法：元素[属性]{css样式}
		用于选取带有指定属性的元素
		例如：
		css：<style type="text/css">
			img[alt]{border:1px black solid;}
		</style>
		结构：<img src="" alt=""/>
		<img src=""/>
		用过上面这样，css样式就只会作用于，里面有alt属性的img元素了。
	3.1.2 E[att="val"] （css2.0）语法：元素[属性="属性值"]{css样式}
		用于选取带有指定属性和值的元素
		例如：
		css：<style type="text/css">
			img[alt="piture"]{border:1px black solid;}
		</style>
		结构：<img src="" alt="piture"/>
		<img src="" alt=""/>
		当两个元素里面有相同的属性时，用属性值来区分。
		css样式就只会作用于，里面即有alt属性而且alt属性值是piture的元素了。
	3.1.3 E[att~="val"] （css2.0）语法：元素[属性~="属性值"]{css样式}
	用于选取属性值中包含指定词汇的元素，选取具有att属性且属性值为一用空格分隔的
		其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
		例如：
		css：<style>
			div[class~="a"] {border: 2px solid #000;}
		</style>
		结构：<div class="a">1</div>
		<div class="b">2</div>
		<div class="a b">3</div>
		上面这样css样式只会作用于，class属性值是a和属性值中有a且有空格的元素。
	3.1.4 E[att|="val"] （css2.0）语法：元素[属性|="属性值"]{css样式}
		用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
		例如：
		css：<style>
			div[class|="a"] {border: 2px solid #000;}
		</style>
		结构：<div class="a-test">1</div>
		<div class="b-test">2</div>
		<div class="c-test">3</div>
		上面这样css样式只会作用于属性值中有a且是整个单词的元素
	3.1.5 E[att^="val"]（css3.0）语法：元素[属性^="属性值"]{css样式}
		匹配属性值以指定值开头的每个元素
		例如：
		css：<style>
			div[class^="a"] {border: 2px solid #000;}
		</style>
		结构：<div class="abc">1</div>
		<div class="acb">2</div>
		<div class="bac">3</div>
		上面这样css样式作用于，属性值开头是a的元素
	3.1.6 E[att$="val"]（css3.0）语法：元素[属性$="属性值"]{css样式}
		匹配属性值以指定值结尾的每个元素
		例如：
		css：<style>
			div[class$="c"] {border: 2px solid #000;}
		</style>
		结构：<div class="abc">1</div>
		<div class="acb">2</div>
		<div class="bac">3</div>
		上面这样css样式只作用于，属性值以c结尾的元素。
	3.1.7 E[att*="val"]（css3.0）语法：元素[属性*="属性值"]{css样式}
		匹配属性值中包含指定值的每个元素。
		例如：
		css：<style>
			div[class*="b"] {border: 2px solid #000;}
		</style>
		结构：<div class="abc">1</div>
		<div class="acb">2</div>
		<div class="bac">3</div>
		上面这样css样式只会作用于属性值中包含b的元素。
3.2 结构性伪类选择器的语法及应用
	3.2.1 ：first-child与：last-child选择器
		单独指定第一个子元素和最后一个子元素的样式
		例如：
		css：<style type="text/css">
			li:first-child{background:#0f0}
			li:last-child{background:#f00}
		</style>
		结构:<ul>
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
			<li>第四个</li>
		</ul>
		上面这样css样式只会分别作用于，第一个li和最后一个li
	3.2.2 ：nth-child与：nth-last-child选择器
		对指定序号的子元素使用样式
		例如：
		css：<style type="text/css">
			li:nth-child(2){background:#0f0}
			li:nth-last-child(2){background:#f00}
		</style>
		结构:<ul>
			<li>第一个</li>
			<li>第二个</li>
			<li>第三个</li>
			<li>第四个</li>
		</ul>
		上面这样css样式只会分别作用于，正数第二个和倒数第二个元素。
	3.2.3
		对所有第奇数个子元素或第偶数个子元素使用样式
		：nth-child（odd）{}//所有正数下第奇数个子元素
		：nth-child（even）{}//所有正数下第偶数个子元素
		：nth-last-child（odd）{}//所有倒数上去第奇数个子元素
		：nth-last-child（even）{}//所有倒数上去第偶数个子元素
		例1：
		css：<style>
			h2:nth-child(odd){color:#f66}
			h2:nth-child(even){color:#f00}
		</style>
		结构：<div>
			<h2>标题</h2>
			<p>内容</p>
			<h2>标题</h2>
			<p>内容</p>
			<h2>标题</h2>
			<p>内容</p>
			<h2>标题</h2>
			<p>内容</p>
		</div>
		说明：nth-child选择器在计算子元素是第奇数个元素还是偶数个元素时
		是连同父元素的所有子元素一起计算的
		换句话说就是h2:nth-child(odd)指代的是当div中的第奇数个子元素
		如果是h2子元素的时候使用
		例2：
		css：<style>
			li:nth-child(odd){font-size: 18px;}
			li:nth-child(even){font-size: 36px;}
		</style>
		结构：<div >
			<h2>标题A</h2>
			<ul>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
				<li>标题</li>
			</ul>
		</div>
		说明：父元素是列表的时候，因为列表中只可能有列表项目一种子元素
		所以不会有问题，而当父元素是div的时候，因为div的子元素中有了不止一种子元素
		所以引起了问题的产生
	3.2.4 :nth-of-type与:nth-last-of-type选择器
		使用这两种选择器时，css3在计算子元素是第奇数个子元素还是第偶数个子元素
		就只针对同类型的子元素进行计算了。
		例1：
		css：<style>
			h2:nth-of-type(odd){color:#f66}
			h2:nth-of-type(even){color:#f00}
		</style>
		结构：<div>
			<h2>标题</h2>
			<p>内容</p>
			<h2>标题</h2>
			<p>内容</p>
			<h2>标题</h2>
			<p>内容</p>
			<h2>标题</h2>
			<p>内容</p>
		</div>
	3.2.5 循环使用样式
	语法：E：nth-child（n）{sRules} E：nth-last-child（n）{sRules}
	:nth-child(n){    } // 参数为n
		n:所有的行
		n+2:除第1行外所有的行
		2n:每2行选择一行
		3n:每3行选择一行
		2n+4:从第4行开始隔1行选择1行
	:nth-last-child(n) {   } 从后向前选择,n为参数
		n:所有行
		2:倒数第2行
		-n+3:最后3行
		
	αn+β形式，α表示每次循环中共包括几种样式，β表示指定的样式在循环中所处的位置
	3.2.5 ：only-child选择器 只有一个元素的时候使用
	例如：
	css：<style>
		.oul1 li:only-child{font-size:36px;}
	</style>
	结构：<ul class="oul1">
		<li>1111111</li>
		<li>2222222</li>
		<li>3333333</li>
		<li>4444444</li>
	</ul>
	<ul class="oul1">
		<li>1111111</li>
	</ul>
3.3 目标伪类选择器语法及应用
	3.3.1 ：target选择器
	突出显示活动的html锚点
	url带有后面跟有锚名称#，指向文档内某个具体的元素。
	这个被链接的元素就是目标元素
	：target选择器来对页面的某个target元素指定样式
	该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
3.4 UI元素状态伪类选择器语法及应用
	在css3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器
	这些选择器的共同特征是：
	指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。
	在css3中，共有11种UI元素状态伪类选择器：
	E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-onl
	E:read-write、E:checked、E:default、E:indeterminate、E:selection
	3.4.1 E:hover、E:active、E:focus
		E:hover 选择器用来指定当鼠标指针移动到元素上面是元素所使用的样式。
		E:active 选择器用来指定元素被激活时使用的样式。
		（鼠标在元素上按下还没有松开）
		E:focus 选择器用来指定元素获得光标焦点时使用的样式
		主要是在文本框控件获得焦点并进行文字输入的时候使用。
	3.4.2 E:enabled、E:disabled
		E:enabled选择器用来指定当元素处于可用状态时的样式
		E:disabled选择器用来指定元素处于不可用状态时的样式。
	3.4.3 E:read-only、E:read-write
		E:read-only选择器用来指定当元素处于只读状态时的样式。
		E:read-write选择器用来指定元素处于非只读状态时的样式。
	3.4.4  E:checked
		用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式
		在Firefox浏览器中，需要把它写成“ -moz-checked ”的形式。
	3.4.5 E:default
		用来指定当页面打开时默认处于选取状态的单选框或复选框空间的样式
		需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态
		E:default选择器中指定的样式仍然有效。
	3.4.6 E:indeterminate
		用来指定当页面打开时，如果一组单选框中任何一个单选框都没设定为选取状态时
		整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定
	3.4.7 E::selection
		用来指定当元素处于选中状态时的样式
3.5 语言伪类选择器语法及应用
	E:lang 伪类
	使你有能力为不同的语言定义特殊的规则。
	在下面的例子中，:lang 类为属性值为bb的 q 元素定义引号的类型
	例如：
	css：<style>
		p:lang(bb){background:#f00;}
	</style>
	结构：<body>
		<p>萌萌哒~</p>
		<p lang=“bb">萌萌哒~</p>
	</body>
3.6 否定伪类选择器语法及应用
	E:not选择器
	如果相对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用整个样式时，可以使用not选择器
3.7 动态伪类选择器语法及应用
	动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来
	动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种为用户行为伪类。

这里写图片描述

四、CSS3层级选择器的语法及应用场景

4.1 子选择器的语法及应用
	语法： E>F{sRules}
	子元素选择器只能选择作为某元素子元素的元素
	选择匹配的F元素，且匹配的F元素为所匹配的E元素的子元素
4.2 相邻兄弟选择器的语法及应用
	语法：E+F{sRules}
	相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素
	E F两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻
4.3 通用兄弟选择器的语法及应用
	语法：E~F{sRules}
用来指定位于同一个父元素之中，某个元素之后的所有其他某个种类的兄弟元素所使用的样式

五、CSS3新增关于文本属性的语法及应用场景

5.1 浏览器前缀的简介及应用
	有些时候，某些CSS属性还只是最新版的预览版，并未发布成最终的正式版
	而大部分浏览器已经成为这些属性提供了支持，但这些属性是小部分浏览器专有的
	有些时候，有些浏览器为了扩展某方面的功能，它们会选择新增的一些CSS属性
	这些自行扩展的CSS属性也是浏览器专属的
	为了让这些浏览器识别这些属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。

这里写图片描述

5.2 文本阴影属性 text-shadow：length length length color；
	前面三个length分别指阴影离开文字的横方向、竖方向，阴影的模糊半径
	color指阴影的颜色
	指定多个阴影：(参数形式为X坐标 Y坐标 阴影颜色)
	text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;
5.3 文本换行的相关属性
word-break：normal/keep-all/break-all
	使用该属性自己决定自动换行的处理方法，通过对其的指定
	可以让浏览器实现半角空格或连字符后面的换行，还可以让浏览器实现任意位置的换行
	参数可以为normal/keep-all/break-all
	normal:使用浏览器默认换行规则
	keep-all:只能在半角空格或连接字符处换行
	break-all:允许在单词内换行
	（对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的）
word-wrap：normal/break-word
	让长单词与URL地址自动换行
5.4 使用服务端字体，@font-face

在CSS3之前，页面文字所使用的的字体必须已经在客户端中被安装才能正常显示，在样式表中允许指定当前字体不能正常显示时使用的代替字体，但是如果这个代替字体在客户端也没有安装时，使用这个字体的文字就不能正常显示了。为了解决这个问题，在CSS3中，新增了web fonts功能。网页中可以使用安装在服务端的字体，只要某个字体在服务端已经安装，网页中就能正常显示了。

用法：@font-face{font-family：WebFont; src:url(路径); format=" "}
div{font-family:WebFont;}
//WebFont用来声明使用服务端的字体。
//format用来声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值。
字体文件个格式有哪些？
opentype与truetype,前者的属性值为opentype，后者的属性值为truetype
前者的文件扩展名为 .otf  后者的为 .ttf

注：在IE中使用时，只能使用微软自带的Embedded opentype 字体文件，扩展名为 .eot
同时不需要使用format属性值
用法如下
@font-face{ font-family:BorderWeb; src:url(路径); }
5.5 iconfont的使用
什么是iconfont？
我们现在通常所指的iconfont 是用字体取代图片，来展示图标、特殊字体等元素的方法。

这里写图片描述

iconfont都有什么优缺点？
首先它的体积要比图片小的多。不仅体积小，而且还具有更好的可维护性
（因为是矢量，所以拉伸不变形；颜色可以自行更换，支持一些CSS3对文字的效果）

这里写图片描述

5.6 background-clip：border-box/padding-box/content-box/
	在css2中，背景的显示范围是指内部补白之内的范围，不包括边框
	而在css2.1乃至css3中，背景的显示范围是指边框在内的范围
	在css3中，可以使用background-clip来修改背景的显示范围
	如果将属性值设定为border-box，则背景范围包括边框
	如果设定为padding-box，则不包括边框。
		border-box：背景被裁剪到边框盒
		padding-box：背景被裁剪到内边距框
		centent-box：背景被裁剪到内容框
5.7 background-origin：border-box/padding-box/content-box/
	在绘制背影图像时，默认是从内部padding区域的左上角开始
	但是可以利用background-origin属性来指定
	绘制时从边框的左上角开始或者从内容的左上角开始
5.8 background-size： length/percentage/cover/contain
	在c3中，可以使用background-size属性来指定背影图像的大小。
	length：设置背影图像的宽度和高度
	percentage：以父元素的百分比来设置背影图像的宽度和高度
	以上两种：第一个值设置宽度，第二个值设置高度
		如果只设置一个值，则第二个值会被设置为auto
	cover：把背影图像扩展至足够大，使背影图像完全覆盖背影区域。
		背影图像的某些部分也许无法显示在背影定位区域中。
	contain：把图像扩展至最大尺寸，使宽度和高度完全适应内容区域。
5.9 background-break：continuous/bounding-box/each-box/
	在c3中，可以使用background-break属性来指定平铺内联元素背影图像时的循环方式
	可以指定bounding-box、each-box和continuous这三种循环方式。
	continuous:此属性是默认值，忽视区域之间的间隔空隙
	（给它们应用图片就好像把它们看成一个区域一样）
	bounding-box：重新考虑区域之间的间隔
	each-box：对每个独立的标签区域进行背景的重新划分
允许多重指定并配合着多个图像文件一起利用的属性有如下几个：
background-images、background-repeat、background-position、background-clip
background-origin、background-size
5.10 css3颜色特性
	5.10.1 rgba颜色模式  rgba指的是红绿蓝和alpha透明度
	在rgba模式里，前三个参数分别是红绿蓝的强度值，取值从0~255或0%~100%。
	透明度的取值从0（完全透明）到1（完全不透明）
	5.10.2 hsl颜色模式  hsl色彩模式是工业界的一种颜色标准
	是通过对色调H、饱和度S、亮度L三个颜色通道的变化以及它们互相之间的叠加
	来得到各式各样的颜色的，hal即是代表色调、饱和度、亮度三个通道的颜色
	这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
	5.10.3 hsla颜色模式  hsla则代表了色调、饱和度、亮度和透明度
		在hsla模式里，前三个参数则分别代表色调、饱和度、亮度。透明度的取值从0到1
5.11 css3边框
	5.11.1 border-color  属性是一个简写属性
		可设置一个元素的所有边框中可见部分的颜色，或者为4个边分别设置不同的颜色
	5.11.2 border-images
		可以让处于随时变化状态的元素的长和宽的边框统一使用一个图像文件来绘制
	使用border-images属性，会让浏览器在显示图像边框时
	自动将所使用的图像分割为9部分进行处理，这样就不需要页面制作者再进行人工处理了。

这里写图片描述

	5.11.2 box-shadow属性
		在css3zhong，可以使用box-shadow属性让盒在显示时产生阴影效果。
		box-shadow：h-shadow、v-shadow、blur、spread、color、inset
		h-shadow：必需。水平阴影的位置。允许负值
		v-shadow：必需。垂直阴影的位置。允许负值
		blur：可选。模糊距离
		spread：可选。阴影的尺寸
		color：可选。阴影的颜色
		inset：可选。将外部阴影改为内部阴影