CSS选择器和CSS3属性

本文主要介绍CSS选择器和CSS3属性


1、CSS3的概念和优势

A、CSS3的概念:

CSS3并不是一门语言,我们知道css是层叠样式表,是一种样式语言,是用来告诉浏览器如何渲染页面的。css3是css规范的最新版本,在css2.1上增加了很多强大的新功能,用来帮助开发人员解决一些问题,并且不再需要非语义化标签,复杂的js脚本和图片,例如圆角、多背景、透明度、阴影等等。css2.1是单一的规范,而css3被划分成几个模块组,每个模块组都有自己的规范。这样的好处就是整个css3的规范发布不会因为部分而印象其他模块的推进。

B、css3的优势:

1)让页面效果看起来非常炫酷,用户体验更高。
2)有利于开发和维护,还能提高网站的性能,增加网站的可访问性,可用性。
3)使网站能适配更多的设备,利于seo网站优化,提高网站的搜索排名。

C、CSS新特性:

CSS3选择器、图片的视觉效果(圆角、阴影、渐变背景、图片边框等)、背景的应用(background-origin/background-clip/background-size)、盒模型的变化、阴影效果(文本阴影、盒子阴影)、多列布局和弹性盒布局、web文字和font图标、颜色和透明度、圆角和边框的新特效、2D和3D变形、CSS3过渡和动画效果、媒体查询和Responsive布局。

2、渐进增强和优雅降级的简介(扩展)

渐进增强(progressive enhancement):一开始只构建站点的最少特性,然后不断地对不同的浏览器追加不同的功能

优雅降级(graceful degradation):一开始就构建站点的完整功能,然后针对浏览器进行测试和修复

`“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。 关键的区别则在于它们各自关注于何处,以及这种关注如何影响工作的流程。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。`

“渐进增强”观点则认为应关注于内容本身。
区别

优雅降级即功能衰减是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强(pe)则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。功能衰减意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

3、CSS3 选择器——属性选择器

CSS选择器的优势:可以帮助开发人员在开发中减少对html类名和id名的依赖,以及对html结构的依赖,使编写代码更加简单轻松。

1、E[attr]:只使用属性名,但没有确定任何属性值;

2、E[attr=”value”]:指定属性名,并指定了该属性的属性值;

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

4、E[attr^=”value”]:指定了属性名,并且有属性值,属性值是以value开头的;

5、E[attr$=”value”]:指定了属性名,并且有属性值,而且属性值是以value结束的

6、E[attr*=”value”]:指定了属性名,并且有属性值,而且属值中包含了value;

7、E[attr|=”value”]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

这些属性选择器除了IE6不支持。

4、CSS3 选择器——伪类选择器

1)动态伪类

动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如”:link”,”:visited”;另外一种被称作用户行为伪类
最常见的锚点伪类

1
2
3
4
.demo a:link {color:gray;}/*链接没有被访问时*/
.demo a:visited{color:yellow;}/*链接被访问过后*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下*/

对于这四个锚点伪类的设置,有一点需要特别注意,那就是他们的先后顺序,要让他们遵守一个爱恨原则LoVe/HAte,也就是Link–visited–hover–active。

2)UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作。
IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

3)CSS3的:nth选择器

这个是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类,下面是他们的用法:

:first-child选择某个元素的第一个子元素;IE6不支持:first-child选择器

:last-child选择某个元素的最后一个子元素;

:nth-child()选择某个元素的一个或多个特定的子元素;

A、:nth-child(length);/参数是具体数字/

B、:nth-child(n);/参数是n,n从0开始计算/请注意了,这里的“n”只能是”n”,不能使用其他字母代替,不然会没有任何效果的。

C、:nth-child(nlength)/n的倍数选择,n从0开始算*/

D、:nth-child(n+length);/选择大于length后面的元素/

E、:nth-child(-n+length)/选择小于length前面的元素/

F、:nth-child(nlength+1);/表示隔几选一*/这种方法是实现隔几选一的效果。

//上面length为整数,IE6-8和FF3-浏览器不支持”:nth-child”选择器。

:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

:nth-of-type()选择指定的元素;
nth-of-type类似于:nth-child,不同的是他只计算选择器中指定的那个元素,唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;

:first-of-type选择一个上级元素下的第一个同类子元素;

:last-of-type选择一个上级元素的最后一个同类子元素;

:only-child选择的元素是它的父元素的唯一一个了元素;

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:empty选择的元素里面没有任何内容。

4)否定选择器(:not)

否定选择器 :not(),可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器。

5):root 选择文档的根元素

:root{ background:green;}将样式绑定到页面的根元素中。所谓根元素,是指位于文档树中最顶层结构的元素,在HTML页面中就是值包含着整个页面的html部分

6):target 选择器可用于选取当前活动的目标元素。

使用该选择器来对页面中的某个target元素(该元素的id当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。

7):lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:

图7

5、CSS3 选择器–伪元素

1)伪元素

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after;那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。

::selection用来改变浏览网页选中文的默认效果。::selection在IE家族中,只有IE9+版本支持,在Firefox中需要加上其前缀“-moz”

6、CSS3 选择器——层次选择器

1)后代选择器(E F)

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:

2)子元素选择器(E>F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。

IE6不支持子元素选择器。

3)相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

IE6不支持这个选择器

4)通用兄弟选择器(E 〜 F)

通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。
通用兄弟选择器和相邻兄弟选择器极其相似,只不过,相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元素);而通用兄弟元素选择器,选中的是元素相邻的后面兄弟元素。IE6不支持这种选择器的用法。

7、CSS3私有属性

什么是浏览器私有属性前缀?

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。
以下是几种常用前缀

1
2
-webkit- 谷歌 -moz- 火狐 -ms- IE浏览器 -o- 欧朋
-khtml-(现在基本都没有用了,被-webkit-取代)

举例来说,一个CSS3圆角的代码是:

1
2
3
4
5
6
7
-webkit-border-radius: 50%;

-o-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

CSS3前缀+标准代码的顺序是什么?

结论:是先写私有的CSS3属性,再写标准的CSS3属性。

1
2
3
4
5
6
7
8
9
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/

-moz-transform:rotate(-3deg); /*为Firefox*/

-ms-transform:rotate(-3deg); /*为IE*/

-o-transform:rotate(-3deg); /*为Opera*/

transform:rotate(-3deg); /*为nothing*/

什么时候我们可以去掉一个属性的CSS3前缀呢?

答案是,当一个属性成为标准,并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。

8、CSS3新增属性

1)text-shadow:5px 5px 5px #f66; 文字阴影

语法:

  1. text-shadow: h-shadow v-shadow blur color;
  2. h-shadow 必需。水平阴影的位置。允许负值。为正值,阴影在对象的右边,反之阴影在对象的左边。
  3. v-shadow 必需。垂直阴影的位置。允许负值。如果为正值,阴影在对象的底部,反之阴影在对象的顶部。
  4. blur 可选。模糊的距离。 这个值只能是正值
  5. color 可选。阴影的颜色。

:Internet Explorer 9 以及更早版本的浏览器不支持

可是让我们头痛的是IE是不支持text-shadow效果,但为了在兼容这一问题,我们只好使用滤镜filter:shadow来处理(不提倡使用滤镜)。filter:shadow滤镜作用,也能使用对象产生阴影效果,不同的是shadow可产生渐近效果,使用阴影更平滑实现。

滤镜语法:E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}

其中E是元素选择器,Color用于设定对象的阴影色;Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;Strength就是强度,类似于text-shadow中的blur值。

2)box-shadow:让盒子在显示的时候产生阴影效果

写法:box-shadow:length length length length color inset;

1
2
3
4
5
6
7
8
9
10
11
第一个参数表示阴影离开盒子的横向距离

第二个参数表示阴影离开盒子的纵向距离

第三个参数表示阴影的模糊半径

第四个参数表示阴影的延伸半径 (可省略)

第五个参数表示阴影的颜色

第六个参数表示是否使用内阴影 (可省略,默认是外阴影)

Box-shadow:inset 1px 1px 1px 1px #000, color inset的顺序可以改变

3)word-break:使用该属性自己决定自动换行的处理方法

通过对其的指定,不仅仅可以让浏览器实现半角空格或连字符后面的换行,而且可以让浏览器实现任意位置的换行。

参数:normal/keep-all/break-all

normal:使用浏览器默认换行规则,根据语言自己的规则确定换行方式,中文到边界上的汉字换行,英文从整个单词换行

keep-all:不允许字断开。在低版本的Chrome和Safari浏览器下不起任何效果

break-all:允许在单词内换行(对于标点符号来说,允许标点符号位于行首,不过在IE中是不可以的)可以强行截断英文单词,达到词内换行效果。

4)word-wrap: normal break-word;属性用来标明是否允许浏览器在单词内进行断句

normal 只在允许的断字点换行(浏览器保持默认处理)。

break-word 在长单词或 URL 地址内部进行换行。将内容在边界内换行(不截断英文单词换行)。

5)服务器字体:

1
2
3
4
5
6
7
8
9
@font-face:字体语法 在网页上显示服务端字体

font-family: 规定字体的名称。

src:url 定义字体文件的 URL。

font-stretch: 不常用,没有兼容 定义如何拉伸字体

font-weight: 设置加粗

:在IE中使用时,只能使用微软自带的Embedded OpenType字体文件,扩展名为.eot,同时不需要使用format属性值,用法如下

1
2
3
@font-face{font-family:BorderWeb;
src:url(BORDERW0.eot);
}

在项目文件夹中的fonts文件内容分别包括粗体、斜体、粗斜体、小型大写字体

6)background-clip 指定背景的显示范围 border padding content

概念:在HTML页面中,一个具有背景的元素通常由元素的内容,内部补白(padding),边框,外部补白(margin)构成

border-box 背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。

text 在Webkit内核下,background-clip还有一个text属性,配合Webkit内核的私有属性text-fill-color:transparent可以制作背景图片填充文本的效果

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;只有Webkit浏览器支持。

7)、background-origin 指定绘制背景图像时的起点

规定 :background-position属性相对于什么位置来定位。

参数

padding-box背景图像相对于内边距框来定位。

border-box背景图像相对于边框盒来定位。

content-box背景图像相对于内容框来定位。

8)扩展知识点:background-clip与background-origin的用法区别?

background-clip:border|padding|content

background-origin属性是用来控制元素背景图片定位
点(background-position)的起始位置。

background-clip属性是用来控制元素背景图片(background-image)的展示区域。

该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

background-origin:padding|border|content

该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了

background-origin 属性规定 background-position 属性相对于什么位置来定位。

9):background-size 指定背景中图像的尺寸

参数

length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。

percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。

cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。但这种方法会致使背景图片失真。

contain保持背景图像本身的宽高比例,将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。

如何添加多个背景图

使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置的位置

10)background-break 指定内联元素的背景图像进行平铺时的循环方式,浏览器支持不友好,

bounding-box:背景图像在整个内联元素中进行平铺。

each-box:背景图像在行内中进行平铺。

continuous:下一行的背景图像紧接着上一行中的图像继续平铺。

background-break属性受限于浏览器的支持力度,目前使用度极低,仅
在Firefox下能实现,而且还需要修改属性写法,在此仅让大家参考。

11)border-raidus 设置圆角

语法:border-radius: none | {1,4}[/{1,4}] ?

border-radius是一种缩写方法。

如果反斜杠符号“/”存在,“/”前面的值是设置元素圆角的水平方向半径,“/”后面的值是设置元素圆角的垂直方向的半径;
如果没有“/”,则元素圆角的水平和垂直方向的半径值相等。另外四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的

1
2
3
4
border-top-left-radius:<length>/<length>;定义元素左上角圆角。
border-top-right-radius:<length>/<length>;定义元素右上角圆角。
border-bottom-right–radius:<length>/<length>;定义元素右下角圆角。
border-bottom-left-radius:<length>/<length>;定义元素左下角圆角。

上面四个子属性取值和border-radius是一样的,只不过水平和垂直方向仅一个值,“/”前面的值为水平方向半径,后面的值为垂直方向半径。如果第二个值省略,元素水平和垂直方向半径,其实就是以“”为半径的四分之一圆。如果任意一个值为“0”,这个角就不是圆角

12):border-image 属性,可以使用图片来创建边框

border-image-source 用在边框的图片的路径。

border-image-slice :number(没有单位)|percentage

border-image-slice是用来分解引入进来的背景图片,图片边框向内偏移。
例如边框图片的大小是 300px×240px,取百分比为25%,30%,15%,20%,
它们实际对应的效果就是剪切了图片的60px,90px,36px,60px的四边大小

border-image-width 图片边框的宽度。

border-image-repeat图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。

13):颜色特性

图13

本文标题:CSS选择器和CSS3属性

文章作者:pinbolei

发布时间:2018年12月18日 - 09:00

原始链接:https://pinbolei.cn/CSS选择器和CSS3属性/

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

坚持原创技术分享,您的支持将鼓励我继续创作!
0%