600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > CSS中伪元素 伪类选择器和字体 文本相关属性

CSS中伪元素 伪类选择器和字体 文本相关属性

时间:2019-08-21 06:52:54

相关推荐

CSS中伪元素 伪类选择器和字体 文本相关属性

CSS中伪元素、伪类选择器

伪元素选择器

伪元素选择器只能针对CSS中已有的伪元素起作用。

CSS提供的伪元素选择器有如下几个:

:first-letter:对指定对象的第一个字符起作用。:first-line:对指定对象的第一行内容起作用。:before:与内容相关的属性结合使用,用于在指定对象内部的前端插入内容。:after:与内容相关的属性结合使用,用于在指定对象内部的尾端增加内容。

下面代码示范用法:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>:first-letter</title><style type="text/css">span{display:block;}span:first-letter{color:yellow;font-size:20pt}span:first-line{color:#0f0;font-size:25pt}#clern:first-line{color:#f00;font-size:15pt;}section:first-letter{color:#00f;font-size:30pt;font-weight:blod;}/*指定向div元素内部的前端插入content属性对应的内容*/div>p:before{content:'努力奋斗';color:blue;font-size:30pt;background-color:gray;}</style></head><body><span>ABC<br>ZXC</span><section id="clern">其实我是一个程序员,<br>你是一个设计师,</section><br/><span id="clern">然而我们都是打工的,<br>老板还是一个。</span><div><p>才能活得精彩,</p><p>才能创造价值。</p></div></body></html>

所示效果如下:

其中关于div中的before和after处理运用到了内容相关的属性:content,content该属性的值可以是字符串,用于向指定元素之前或之后插入内容。此外,content还可使用url(url)格式的值,这种格式的值可用于插入图像。如:

<head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>插入图片</title><style type="text/css">/*指定向div元素内部的尾端插入content属性对应的内容*/div>div:after{content:url("pic.jpg");}</style></head>

伪类选择器

伪类选择器主要用于对已有选择器做进一步的限制,对已有选择器能匹配的元素进一步的过滤。伪类选择器主要分为如下三类:

结构性伪类选择器UI元素状态伪类选择器其他伪类选择器

1.结构性伪类选择器

结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器主要有以下几个:

Selector:root:匹配文档的根元素。在HTML中根元素永远是<html…/>元素。Selector:first-child:匹配符合Selector选择器,而且必须是其父元素的第一个子节点的元素。Selector:last-child:匹配符合Selector选择器,而且必须是其父元素的最后一个子节点的元素。Selector:nth-child(n):匹配符合Selector选择器,而且必须是其父元素的第n个子节点的元素。Selector:nth-last-child(n):匹配符合Selector选择器,而且必须是其父元素的倒数第n个子节点的元素。Selector:only-child:匹配符合Selector选择器,而且必须是其父元素的唯一子节点的元素。

下面代码示范用法:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>:first-letter</title><style type="text/css">li:first-child{border:1px soild black;}li:last-child{background-color:#aaa;}li:nth-child(2){color:#888;}li:nth-last-child(2){font-size:20pt;}span:only-child{color:#fff;font-size:25pt;}</style></head><body><ol><li>一名数学家</li><li>一名化学家</li><li>一名科学家</li><li>一名物理学家</li><li>一名哲学家</li></ol><ul><li id="a">他是一名数学家</li><li id="s">他是一名化学家</li><li id="d">他是一名科学家</li><li id="z">他是一名物理学家</li><li id="x">他是一名哲学家</li><li><span id="c">他是一名哲学家</span></li></ul></body></html>

效果如下:

此外,对于:nth-child和:nth-last-child两个伪类选择器,它们的功能还支持如下用法。

Selector:nth-child(odd/even):匹配符合Selector选择器,而且必须是其父元素的第奇数/偶数个子节点的元素。Selector:nth-last-child(odd/even):匹配符合Selector选择器,而且必须是其父元素的倒数第奇数/偶数个子节点的元素。Selector:nth-child(xn+y):匹配符合Selector选择器,而且必须是其父元素的第xn+y个子节点的元素。Selector:nth-last-child(xn+y):匹配符合Selector选择器,而且必须是其父元素的倒数第xn+y个子节点的元素。

2.UI元素状态伪类选择器

UI元素状态选择器主要用于根据UI元素的状态进行筛选。UI元素状态选择器主要有如下几个:

Selector:link:匹配 Selector选择器且未被访问前的元素(通常只能是超链接)。Selector:visited:匹配 Selector选择器且已被访问过的元素(通常只能是超链接)。Selector:active:匹配 Selector选择器且处于被用户激活(在鼠标点击与释放之间的事件)状态的元素。Selector:hover:匹配 Selector选择器且处于鼠标悬停状态的元素。Selector:focus:匹配 Selector选择器且已得到焦点的元素。Selector:enabled:匹配 Selector选择器且当前处于可用状态的元素。Selector:diabled:匹配 Selector选择器且当前处于不可用状态的元素。Selector:read-only:匹配 Selector选择器且处于只读状态的元素。Selector:read-write:匹配 Selector选择器且处于读写状态的元素。Selector:required:匹配 Selector选择器且具有必填要求的元素。Selector:optional:匹配 Selector选择器且无必填要求的元素。

下面代码示范用法:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>UI元素状态的伪类选择器</title><style type="text/css">td{border:1px solid black;padding:4px;}tr:hover{background-color:#aaa;}input:active{background-color:blue;}:focus{text-decoration:underline;}:enabled{font-family:"黑体";font-weight:bold;font-size:14pt;}:diabled{font-family:"隶书";font-size:14pt;}:checked{outline:red solid 5px;}:default{outline:#bbb solid 5px;}</style></head><body><table style="width:400px;border-collapse:collapse"><tr><td>疯狂Java讲义</td><td>109</td></tr><tr><td>轻量级Java实战</td><td>108</td></tr><tr contentEditable="true"><td>疯狂C++讲义</td><td>108</td></tr></table><button disabled>不可用的按钮</button><input type="text" disabled value="不可用的文本框"/><button>可用的按钮</button><input type="text" value="可用的文本框"/>男:<input type="radio" value="male" name="gender"/>女:<input type="radio" value="female" name="gender"/>未知:<input type="radio" checked value="unknown" name="gender"/></body></html>

效果如下:

3.其他伪类选择器

: target伪类选择器

Selector:target:匹配符合Seletor选择器且必须是命名锚点目标的元素。

:not伪类选择器

Selector1:not(Selector2):匹配符合Seletor1选择器,但不符合Selector2选择器的元素,相当于用Selector1减去Selector2。

下面代码示范用法:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>:not</title><style type="text/css">li:not(#z){color:#999;font-weight:bold;}</style></head><body><ul><li id="a">他是一名数学家</li><li id="s">他是一名化学家</li><li id="d">他是一名科学家</li><li id="z">他是一名物理学家</li><li id="x">他是一名哲学家</li><li id="c">他是一名哲学家</li></ul></body></html>

效果如下:

从运行结果来看,浏览器为除了id为z的所有<li…/>元素都设置了字体颜色、粗体字效果。

在脚本中修改显示样式

如果需要在脚本中动态控制页面的显示效果,使用脚本动态设置CSS样式也非常简单,按如下步骤可动态修改目标元素的CSS样式。

获取到需要设置CSS样式的目标元素,如可用getElementById()的方法。修改目标元素的CSS样式。常用的方式有两种。

(1)修改行内CSS属性值:使用如“obj.style.属性名=属性值”的JavaScript代码即可。

(2)修改HTML元素的class属性值:使用如“obj.className=class选择器”的JavaScript代码即可。

随机改变页面的背景色

随机改变页面的背景色,只要生产一个随机的6位数,并将该值赋给body元素中的backgroundColor CSS属性即可。

下面代码示范用法:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>随机改变页面背景色</title><script type="text/javascript">function changeBg(){//将背景色的值定义成空字符串var bgColor="";//循环6次,生产一个随机的6位数for (var i = 0 ; i < 6 ; i++){bgColor += "" + Math.round(Math.random() * 9);}//将随机生产的背景颜色值赋给页面的背景色document.body.style.backgroundColor="#" + bgColor;}document.onclick = changeBg;</script></head><body></body></html>

运行效果是单击页面会随机改变页面的背景色。

动态增加立体效果

立体效果原来是通过为其增加4个边框实现的,其中左、上边框颜色稍浅,下、右颜色稍深。

下面代码示范用法:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>随机改变页面背景色</title><script type="text/javascript">function chg(){document.getElementById("up").className="solid";}</script><style type="text/css">.solid{width:160px;padding:6pxtext-align:center;border-right:#222 4px solid;border-top:#ddd 4px solid;border-left:#ddd 4px solid;border-bottom:#222 4px solid;background-color:#ccc;}</style></head><body><input type="button" onclick='chg()' value="增加立体效果" /><div id="up">有立体效果的层</div></body></html>

效果如下:

单击页面上的“增加立体效果”按钮,页面会出现如图所示的效果。

字体与文本相关属性

字体相关属性

CSS为控制文本的字体提供了大量属性,主要用于控制文本的字体、颜色、修饰等外观。字体相关属性如下:

font:这是个复合属性,通常不建议使用该属性。color:该属性用于控制字体颜色。font-family:设置文字的字体。font-size:设置文字的大小。font-stretch:用于改变文字横向的拉伸。font-style:设置文字的风格,是否采用斜体等。font-weight:设置文字是否加粗,该属性的值表示加粗的程度。text-decoration:用于控制文字是否有修饰线。font-variant:用于设置文字的大写字母的格式。text-transform:用于设置文字的大小写。line-height:该属性用于设置字体的行高。letter-spacing:用于设置字符之间的间隔。word-spacing:用于设置单词之间的间隔。text-shadow:用于设置文字是否有阴影效果,可添加多个阴影。

代码示范如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>字体相关属性</title></head><body>color:#888888:<span style="color:#888888">测试文字</span><br />color:red:<span style="color:red">测试文字</span><br /><span style="font-family:'隶书'">测试文字</span><br /><span style="font-size:20pt">测试文字</span><br /><span style="font-size:xx-large">测试文字</span><br /><span style="font-stretch:narrower">测试文字</span><br /><span style="font-stretch:wider">测试文字</span><br /><span style="font-style:italic">测试文字</span><br /><span style="text-decoration:blink">测试文字</span><br /><span style="text-decoration:underline">测试文字</span><br /><span style="text-decoration:line-through">测试文字</span><br /><span style="font-variant:small-caps">hello</span><br /><span style="text-transform:uppercase">hello</span><br /><span style="text-transform:capitalize">hello</span><br /><span style="line-height:30pt">测试文字</span><br /><span style="letter-spacing:15pt">hello world</span><br /><span style="letter-spacing:5pt">hello world</span><br /><span style="word-spacing:20pt">hello world</span><br /><span style="word-spacing:60pt">hello world</span><br /></body></html>

效果如下:

CSS3支持的颜色表示方法

CSS3中常用的几种颜色表示方法如下:

用颜色名表示,如white(白色)、red(红色)等。这种方式简单易用,但能表示的颜色数量有限。用十六进制的颜色值表示,这就是典型的三原色混合原理,例如#123456,其中前两位表示红光的值,中间两位表示绿光的值,后两位表示蓝光的值。用rgb(r,g,b)函数表示,也是运用三原色混合原理。顺序也是红绿蓝的值。用rgba(r,g,b,a)函数表示,还是运用三原色混合原理。只是多了一个a参数,用于指定该颜色的透明度,a参数可以是0~1之间的任意数。

文本相关属性

文本相关属性用于控制整个段、整个<div…/>元素内文本的显示效果。相关属性如下:

text-indent:用于设置段落文本的缩进,默认值为0。被另一个元素断开的元素不能应用本属性。text-overflow:用于控制溢出文本的处理方法。该属性支持两个属性值,clip和ellipsis。vertical-align:用于设置目标元素里内容的垂直对齐方式。text-align:用于设置目标元素中文本的水平对齐方式。direction:用于设置文本流入的方向,合法值有ltr(从左向右)和rtl(从右向左)。white-space:用于设置目标元素对文本内容中空白的处理方式。word-break:用于设置目标元素中文本内容的换行方式。word-wrap:用于设置目标元素中文本内容的换行方式。

其中text-overflow属性的代码示例如下:

<!DOCTYPE html><html><head><meta http-equiv="Content-Ttpe" content="text/html; charset=utf-8" /><title>文本相关属性</title><style>div{border:1px solid #000000;height:30px;width:200px;}</style></head><body><div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div><div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div></body></html

效果如下:

主要介绍CSS中字体和文本相关属性,通过这些属性可以控制字体颜色、字体大小、字体样式、字体阴影、文本对齐方式、文本缩进、文本溢出显示方式等。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。