CSS3 选择器文字阴影

来源：互联网发布：vb.net crc16校验编辑：程序博客网时间：2024/06/11 20:52

Css3 选择器--属性选择器(1)

E[attr]只使用属性名，但没有确定任何属性值

E[attr="value"]指定属性名，并指定了该属性的属性值

E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

example：百度百科

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}p a[href*=text]{ background-image:url(img/text.gif);}p a[href*=pdf]{ background-image:url(img/swf.gif);}p a[href*=exl]{ background-image:url(img/x.gif);}</style></head><body><p><a href="http://www.miaov.com/doc/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/text/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/pdf/javascript.html">妙味课堂</a></p><p><a href="http://www.miaov.com/exl/javascript.html">妙味课堂</a></p></body></html>

Css3 选择器–结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点从1开始计数（eq从0开始）

•p:nth-child(odd){background:red}/*匹配奇数行*/

•p:nth-child(even){background:red}/*匹配偶数行*/

•p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个子节点

E:first-of-type表示E父元素中的第一个子节点且节点类型是E的

E:last-of-type表示E父元素中的最后一个子节点且节点类型是E的

E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

example：新浪头部导航

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>.list{margin:0;padding:0; list-style:none;}.list li{width:150px;border-right:1px solid #000;float:left;}.list li:last-of-type{border:none;}.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋体"; text-align:center;}.list li a:nth-of-type(3n+1){ font-weight:bold;}.list li:nth-child(3) a:nth-child(2){ color:red;}</style></head><body><ul class="list"><li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li>    <li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li>    <li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li>    <li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li>    <li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li>    <li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li>    <li>    <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>        <a href="#">妙味</a>    </li></ul></body></html>

Css3 选择器--伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E

E:disabled 表示不可点击的表单控件

E:enabled 表示可点击的表单控件

E:checked 表示已选中的checkbox或radio

E:first-line 表示E元素中的第一行

E:first-letter 表示E元素中的第一个字符

E::selection表示E元素在用户选中文字时

E::before 生成内容在E元素前（结合content使用）

E::after 生成内容在E元素后

E:not(s) 表示E元素不被匹配

E~F表示E元素毗邻的F元素（同级元素兄弟节点）

Content 属性

文字阴影

•text-shadow：x y blur color, …

•参数

–x 横向偏移

–y 纵向偏移

–blur 模糊距离

color 阴影颜色

文字描边

-webkit-text-stroke:宽度颜色

新增文本功能

Direction 定义文字排列方式(全兼容)

•Rtl从右向左排列

•Ltr从右向左排列

•注意要配合unicode-bidi一块使用

Text-overflow 定义省略文本的处理方式

•clip 无省略号

•Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

自定义文字

格式：

<span style="color:#CC0000;">@font-face {    font-family: ‘miaov';    src: url('111-webfont.eot');    src: url('111-webfont.eot?#iefix') format('embedded-opentype'),         url('111-webfont.woff') format('woff'),         url('111-webfont.ttf') format('truetype'),         url('111-webfont.svg#untitledregular') format('svg');    font-weight: normal;    font-style: normal;}</span>

}

转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator

0 0

CSS3 选择器 文字阴影