CSS3 学习+实践

huangwuming714
99 阅读10分钟

最近感觉css学习的知识点有点乱，蹭这个机会总结一下。

对于web开发者来说，css就是用来渲染html的语言，渲染相对应用的元素，那么这样我们选择相应的元素就很重要了。

CSS选择器

1：基本选择器（这是我们常用的部分）；

2：属性选择器；

3：伪类选择器

一：基本选择器

这部分基本就是我们经常使用的：类选择器(.class); ID选择器(#id); 通配符选择器(*); 元素选择器(E);

后代选择器(E F)：选择了E元素的所有后代F元素,不论F在E中有多少层关系，都将被选中,包含关系;

                           

子元素选择器(E>F)：子元素选择器E > F，其中F仅仅是E的子元素而以。

                     

相邻兄弟元素选择器(E + F) :相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素;IE6不支持这个选择器

**** ****

通用兄弟选择器（E ~ F): 这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选中所有Ｅ元素后面的Ｆ元素  IE6不支持这种选择器的用法

**** ****

群组选择器:群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

二：属性选择器

属性选择器：其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

 

CSS3的属性选择器主要包括以下几种：

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

~：表示几个以空格隔开的属性值中包含了“value”        ^:以value开头的值           $:以value结尾的值           *：包含了value的值       |： 以value或value-开头

**** ****

 

          

 七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

IE6不支持属性选择器。

 

三：伪类选择器

CSS的伪类语法主要有两种语法表达方式：

1：　　E :pseudo-class {property:value}             /*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/

2：　　E.class :pseudo-class{property:value}

A : 最常见的锚点伪类

.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

  1. :hover用于当用户把鼠标移动到元素上面时的效果；
  2. :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
  3. :focus用于元素成为焦点，这个经常用在表单元素上。

B : UI元素状态伪类：

　　":enabled",":disabled",":checked"   IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

C : CSS3的:nth选择器

  1. :fist-child选择某个元素的第一个子元素；
  2. :last-child选择某个元素的最后一个子元素；
  3. :nth-child() 选择某个元素的一个或多个特定的子元素；

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

　　　　:nth-child(n);/*参数是n,n从0开始计算*/

　　　　:nth-child(n*length)/*n的倍数选择，n从0开始算*/

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

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

　　　　:nth-child(n*length+1);/*表示隔几选一*/

  1. :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
  2. :nth-of-type() 选择指定的元素；
  3. :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
  4. :first-of-type选择一个上级元素下的第一个同类子元素；
  5. :last-of-type选择一个上级元素的最后一个同类子元素；
  6. :only-child选择的元素是它的父元素的唯一一个了元素；
  7. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  8. :empty选择的元素里面没有任何内容。

                      

IE6-8和FF3-浏览器不支持":nth-child"选择器。

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.contain下有好多p元素，div元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

            

:nth-last-of-type   和:nth-of-type一样，找到指定元素只是是倒着数过来的。

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能。

IE6-8浏览器不支持:only-child选择器；IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

D : :empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格也没有

IE6-8浏览器不支持:empty选择器

E : 否定选择器（:not）

否定选择器和jq中的:not选择器一模一样,

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

F : 伪元素

“::first-letter,::first-line,::before,::after,::selection”：

::first-line选择元素的第一行.

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动

::selection用来改变浏览网页选中文本的默认效果，“::selection”来改变在浏览器中选中文本后的背景色与前景色。::selection在IE家族中，只有IE9+版本支持，在Firefox中需要加上其前缀“-moz”，:“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。

                            

CSS3基本属性Gradient----渐变

现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera（Opera浏览器）、Trident（讨厌的IE浏览器）。

根据不同的内核，一些私有属性的css前缀不一样 

Mozilla内核　　 css前缀-moz;

WebKit内核　　css前缀-webkit ;

Opera 内核 　　css前缀 -o ;

Trident内核　　css前缀 -ms ;   

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。渐变一般是用来设置背景的-- background属性。

线性渐变: 是指从左到右、从右到左渐变或者从上到下、从下到上渐变。

径向渐变: 是指以某点为圆心根据指定的直径数实现的渐变。

linear-gradient(A,B,C) 线性渐变的参数 　A :角度或者left、top, 即给定一个渐变的角度； 左表示从左到右渐变；上表示从上到下渐变

　　　　　　　　　　　　　　　　　　　  B: 起始处的渐变颜色；  C: 终止处的渐变颜色

线性渐变在webkit下的应用：

   　　　　  

在Mozilla和在Opera下只需要换个前缀就可以

在Trident下需要通过滤镜filter才能实现。

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/

startColorstr表示起点的颜色，endColorstr表示终点颜色。GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

在Mozilla，Opera，webkit中方向也可以设置为左上到右下的渐变。

        

也可以设置渐变的颜色多样化：

      

以及渐变的颜色的宽度

      

角度：

如果不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，这时就可以设置角度。

当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变

 

  角度以逆时针方向转动

  

 渐变上应用透明─透明度(Transparency)：

CSS3的径向渐变:

径向渐变到目前还不支持Opera的内核浏览器 

radial-gradient :   radial-gradient([方向或角度,]? [形状或大小,]? 颜色1,  颜色2[,  颜色3]*);

除了在线性渐变中看到的起始位置，方向，和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点.

在径向渐变中虽然具有相同的起止色，但是在没有设置位置时，其默认颜色为均匀间隔，这一点和我们前面的线性渐变是一样的，但是设置了渐变位置就会按照渐变位置去渐变

       

  

注意：当你的div为正方形大小时，就算设置渐变形状为ellipse，它的渐变形状也只能按照circle来进行渐变。不能继续椭圆形渐变。

size:用来指定起始点(center)到圆|椭圆的近边的距离设定的，或从起始点到圆|椭圆远角的的距离决定的。

  

 

         

avatar
文章
阅读
粉丝