您的位置：首页 > Web前端 > CSS

学习笔记 css3--选择器&新增颜色模式&文本相关

2013-08-07 20:57 609 查看

Css3 选择器 --属性选择器

E[attr]只使用属性名，但没有确定任何属性值，
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的（注意：这个方法会把attr的属性值当做一个整体字符串处理，即如果有多个值，中间用空格隔开，空格也算作'value的一部分'）
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的（注意：这个方法会把attr的属性值当做一个整体字符串处理，即如果有多个值，中间用空格隔开，空格也算作'value的一部分'）
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li,p{height:30px; border:1px solid #000;margin:5px 0;}
li:nth-child(2n+1){background: red}
li:nth-last-child(2){background: yellow}
li:nth-of-type(3){background:grey}
li:empty{background: black;}
li:first-child{background: blue;}
li:last-child{background: blue;}
p:first-of-type{background: green;}
div div:last-of-type{background:green;}
p span:only-child{background:pink;}
strong:only-of-type{background:orange}
</style>
</head>
<body>
<ol>
<li> </li>
<li> </li>
<li> </li>
<li></li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
<div>

<p><span>1</span></p>
<div>div</div>
<p><span></span></p>
<div>div</div>
<p><span>p3</span></p>
<p><span></span></p>
<p></p>
<div>div</div>
<strong>strong</strong>
</div>
</body>
</html>

View Code
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元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配（s可以是css基本的选择器，例如#id，.class，tag）
E~F表示E元素毗邻的F元素

新增颜色模式

rgba

r Red 红 0-255

g Green 绿 0-255

b Blue 蓝 0-255

a Alpha 透明 0-1

Hsl(基本用不到，因为太专业了。。)

H Hue 色调任意数值

S saturation 饱和度

0%-100%

L Lightness 亮度 0%-100%

文字阴影

text-shadow：x y blur color, …

参数 x 横向偏移

y 纵向偏移

blur 模糊距离

color 阴影颜色

文本阴影如果加很多层，会很卡很卡很卡

阴影叠加 text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的

文字相关内容

文字描边
-webkit-text-stroke:宽度颜色

新增文本功能

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

Rtl 从右向左排列

Ltr 从右向左排列

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{ width:400px; border:1px solid #000;direction:rtl;unicode-bidi:bidi-override;}
</style>
</head>
<body>
<p>独家：美国与数千公司合作获取情报</p>
</body>
</html>

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

clip 无省略号

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{ width:300px;border:1px solid #000; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
</style>
</head>
<body>
<p>元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。</p>
</body>
</html>

自定义文字

格式

@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;

}

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航