CSS3选择器和新增属性

第一节 CSS3选择器

1、属性选择器

语法:E[att]{sRules}
说明:用于选取带有指定属性的元素

语法:E[att]="val"]{sRules}
说明:用于选取带有指定属性和值的元素

语法:E[att]~="val"]{sRules}
说明:用于选取属性值中包含指定词汇的元素。

语法:E[att |= "val"]{sRules}
说明:用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

语法:E[att ^= "val"]{sRules}
说明:匹配属性值以指定值开头的每个元素。

语法:E[att $= "val"]{sRules}
说明:匹配属性值以指定值结尾的每个元素。

语法:E[att *= "val"]{sRules}
说明:匹配属性值中包含指定值的每个元素。

2、伪类选择器

1)结构性伪类选择器

语法::first-child与:last-child
说明:单独指定第一个子元素和最后一个子元素的样式。

语法::nth-child与:nth-last-child
说明:对指定序号的子元素使用样式

对所有第奇数个子元素或第偶数个子元素使用样式

:nth-child(odd){}//所有正数下第奇数个子元素

:nth-child(even){}//所有正数下第偶数个子元素

:nth-last-child(odd){}//所有倒数上去第奇数个子元素

:nth-last-child(even){}//所有倒数上去第偶数个子元素

语法::nth-of-type与:nth-last-of-type
说明:使用这两种选择器时,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算。

语法::only-child
说明:只有一个元素的时候使用

2)目标伪类选择器

语法::target
说明:突出显示活动的HTML锚
URL带有后面跟有锚点名称#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素
使用该选择器来对页面中的某个target元素(该元素的id当做页面中的超链接来使用)指定样式,该样式只在用户点击页面中的超链接,并且跳转到target元素后起作用。

3、层级选择器

语法:E>F{sRules}
说明:子元素选择器(child selectors)只能选择作为某元素子元素的元素,选择匹配的F元素,且匹配的F元素为所匹配的E元素的子元素。

语法:E+F{sRules}
说明:相邻兄弟选择器可以选择紧接在另一个元素后的元素,而且他们具有一个相同的父元素,E F两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻。

语法:E~F{sRules}
说明:
用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。
选择某元素后面的所有兄弟元素,需要再同一个父元素之中,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E~F选择器将选中所有
E元素后面的F元素。

以下是几种常用前缀
-webkit-
-moz-
-ms-
-o-


第二节 服务器端字体和iconfont

1、服务器端字体

在CSS3之前,页面字体所使用的字体必须已经在客户端中被安装才能正常显示,在样式表中允许指定当前字体不能正常显示时使用的替代字体,但是如果这个替代字体在客户端中也没有安装时,使用这个字体的文字就不能正常显示了。

为了解决这个问题,在CSS3中,新增了Web Fonts功能,网页中可以使用安装在服务器端的字体,只要某个字体在服务器端已经安装,网页中就能够正常显示了。

语法:@font-face
说明:
@font-face{
font-family:WebFont;
src:url("fonts/Fontin_Sans_B_45b.otf") format("opentype");
}
div{font-family:WebFont;}
WebFont用来声明使用服务端的字体。
format用来声明字体文本的格式,可以省略文件格式的声明而单独使用src属性值。
字体文件的格式有OpenType与TrueType,前者的属性值是opentype,后者的属性值为truetype;前者的文件扩展名为.otf,后者的为.ttf

2、iconfont

什么是iconfont?
我们现在通常所指的iconfont,是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。

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

第三节 CSS3新增属性

1、背景属性

语法:background-clip:border-box/padding-box/content-box
说明:在CSS2中,背景的显示范围是指内部补白之内的范围,不包括边框;而在CSS2.1乃至CSS3中,背景的显示范围是指包括边框在内的范围。在CSS3中,可以使用background-clip来修改背景的显示范围,如果将background-clip属性值设定为border,则背景范围包括边框,如果设定为padding,则不包括边框。
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框。
content-box:背景被裁剪到内容框。

语法:background-origin:border-box/padding-box/content-box
说明:在绘制背景图像时,默认是从内部padding区域的左上角开始,但是可以利用background-origin属性来指定绘制时从边框的左上角开始,或者从内容的左上角开始。

语法:background-size:length/percentage/cover/contain
说明:在CSS3中,可以使用background-size属性来指定背景图像的大小。
length:设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为"auto"。
percentage:以父元素的百分比来设置背景图像的宽度和高度。
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain:把背景图像扩展至最大尺寸,以使其宽度和高度完全自适应内容区域。

在一个元素中添加多张背景图片
语法:div{background-image:url(flower-red.png), url(flower-green.png),url(sky.jpg);background-repeat:no-repeat,repear-x,no-repeat;background-position:3% 98%,center center,right top;width:300px;}
说明:第一个定义的背景图片在最上面,最后定义的是在最下面。使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置位置。

允许多重指定并配合着多个图像文件一起利用的属性有如下几个:
background-image
background-repeat
background-position
background-clip
background-origin
background-size

2、边框属性

语法:border-radius
说明:圆角边框
border-radius:左上角 右上角 右下角 左下角
border-radius:左上角右下角 右上角左下角(对角线)
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角

语法:border-image:url("url") A B C D/border-image-width border-image-repeat
说明:让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来描绘。
第一个参数作为边框使用图像的路径,
A B C D表示当浏览器自动把边框所使用到的图像进行分隔时的上边距,右边距,下边距,左边距,四个边距相同时可以缩写成一个,不需要单位
border-width:表示边框的宽度
border-image-repeat:表示图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

3、盒阴影

语法:box-shadow:h-shadow v-shadow blur spread color inset
说明:让盒在显示时产生阴影效果。
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:可选。阴影的尺寸。
color:可选。阴影的颜色。
inset:可选。将外部阴影(outset)改为内部阴影。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,615评论 0 7
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,552评论 1 13
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0 0
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,304评论 2 66
  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 1,472评论 0 6