码迷,mamicode.com
首页 > Web开发 > 详细

CSS3的基础用法

时间:2017-01-05 21:43:23      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:识别   val   hover   空格   disable   back   效果   图片   倒数   

CSS3的现状:1、浏览器支持程度差,需要添加私有前缀  2、移动端支持优于PC端  3、不断改进中  4、应用相对广泛

在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。

一.属性选择器:

ele[attr] 元素包含该attr属性就可以捕获到 ([]前面的ele可以不写,如果不写的话按通配*[attr])
ele[attr=value] 元素包含该attr属性,且该attr的value有且只有一个并且完全相等的时候可以捕获。
ele[attr~=value] 元素包含该attr属性,并且该attr的值可以以空格分隔,只要其中一个属性全等与value就可以捕获
ele[attr^=value] 元素包含该attr属性,并且该attr的值中以value开头就可以(开头如果有空格的话空格也会占位)
ele[attr$=value] 元素包含该attr属性,并且该attr的值中以value结尾就可以(结尾如果有空格的话空格也会占位)
ele[attr*=value] 元素包含该attr属性,并且该attr的值中包含value就可以(中间如果有空格的话空格也会占位)
ele[attr|=value] 元素包含该attr属性,并且该attr的值中以value开头或者以value-开头都可以捕获到

二.伪类选择器:

  除了以前的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器

  所有的伪类:前面的ele也可以不写,不写的话按照通配
  ele:first-child 该ele元素的兄弟级元素中的第一个
  ele:first-of-type 该ele元素的兄弟元素中同类型的第一个

  ele:last-child 该ele元素的兄弟级元素中的最后一个
  ele:last-of-type 该ele元素的兄弟元素中同类型的最后一个

  ele:nth-child(xn+y) 该ele元素的兄弟级元素中的第xn+y个
  n的取值范围是0到正无穷 0 1 2 3 4 5 6 ...
  元素的索引是从1开始的 1 2 3 4 5 6 ...
  x可以是负值
  ele:nth-of-type(xn+y) 该ele元素的兄弟级元素中同类型的第xn+y个
  n的取值范围是0到正无穷 0 1 2 3 4 5 6 ...
  元素的索引是从1开始的 1 2 3 4 5 6 ...
  x可以是负值

  ele:nth-last-child(xn+y) 该ele元素的兄弟级元素中的倒数第xn+y个
  ele:nth-last-of-type(xn+y) 该ele元素的兄弟级元素中同类型的倒数第xn+y个

  ele:empty 该元素下没有任何元素(可以有注释,空格是站位的)
  ele:checked 单选框和复选框在选中状态下会被捕获
  ele:disabled 禁用状态下的按钮
  ele:enabled 不禁用状态下的按钮

三.目标伪类:

  ele:target 结合锚点进行使用,处于当前锚点的元素会被选中;

四.伪元素选择器:    

    ele::first-letter 文本的第一个单词或字
    ele::first-line 文本第一行
    ele::selection 被选中区块的样式(只能添加背景颜色,字体颜色,字体阴影)
    ele::placeholder 占位符样式

    重点:  ele::before、ele::after  是一个行内元素,需要转换成块元素 必须设置 content属性.

ele:after、ele:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下ele:after、ele:before会被自动识别为ele::after、

ele::before,这样做的目的是用来做兼容处理。 

":" 与 "::" 区别在于区分伪类和伪元素.

五.颜色 :  

     新增了RGBA、HSLA模式,其中的A 表示透明度通道,即可以设置颜色值的透明度,相较opacity,它们不具有继承性,即不会影响子元素的透明度。

     rgba() r,g,b的取值范围在0-255  a表示透明度取值范围在0-1.

     hsla()  H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色  h: 0-255  s:0-100%  l:0-100%; 

       opacity 设置的透明度会被子级盒子继承.

       rgba 或者 hsla 设置的透明度不会被继承.

     transparent 不能进行调整,要不就全透明,要不就全不透明.

六.文字阴影:

     text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。阴影的大小默认跟文字一样大.

     如果要设置多个 直接使用 逗号分隔 继续往后写即可.

     1、水平偏移量  X轴 正值向右 负值向左;

     2、垂直偏移量 Y轴 正值向下 负值向上;

     3、模糊度是不能为负值;

     可设置四个参数:第一个参数 X方向的移动 正值是X轴正方向
     第二个参数 Y方向的移动 正值是Y轴正方向
     第三个参数 阴影模糊度 数值不能为负值 越大越模糊
     第四个参数 阴影的颜色
     四个参数为一套,一套可以出一个阴影,用“,”分割可以出多套阴影

七.边框圆角:

     border-radius. 以0px位例子. border-radius:0px 0px 0px 0px.可设置4个参数 分别表示左上、右上、左下、右下.

                   border-radius:0px 0px 0px.可设置3个参数 分别表示左上、右上、左下右下

                   border-radius:0px 0px.可设置2个参数 分别表示左上右上、左下右下.

                   border-radius:0px 可设置1个参数 表示左上右上左下右下

技术分享

八.盒子阴影 box-shadow:

     box-shadow 盒子阴影

     第零个参数 inset 向内扩散的意思(选填)

     第一个参数 X方向的移动 正值是X轴正方向
     第二个参数 Y方向的移动 正值是Y轴正方向
     第三个参数 阴影模糊度 数值不能为负值 越大越模糊
     第四个参数 阴影的扩散 数值不能为负值
     第五个参数 阴影的颜色
     一套可以出一个阴影,用“,”分割可以出多套阴影,可以设置多重边框阴影,实现更好的效果,增强立体感.                                                                                           所有的阴影都只是视觉上的效果,不会影响文档流的站位 不会改变盒子大小.

 九.盒模型 box-sizing:

     兼容性比较好

     box-sizing 如果不设置 默认的值 就是                                                                                                                                                                    content-box: 优先保证内容的大小 对盒子进行缩放;

     border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;

     盒子的计算是 内容+padding+border
     box-sizing: content-box; width和height代表的是内容的宽高
     box-sizing: border-box; width和height代表的是盒子的宽高

     如果在实际开发中 需要保证 元素所占的 区域大小 优先级要高于 内容的大小 可以选用该属性

 十.背景图片属性:

     1、background-size设置背景图片的尺寸:包含两个属性 cover contain. 也可以使用长度单位或者百分比设置

     cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。

     contain会自动调整缩放比例,保证图片始终完整显示在背景区域。

     可以设置多张背景图片:例 用","号隔开即可

background-image: url(‘images/xxx.jpg‘),url(‘images/xxx.png‘)

     设置多张图片的位置用","号隔开即可 也可以用长度单位

background-position: top left,bottom right;

     复合属性中设置图片大小 注意需要用"/"号分隔

url(‘images/dog.gif‘) no-repeat 115px 70px / 200px 200px

    

    2、background-origin设置背景定位的原点 包含三个属性

      border-box以边框做为参考原点;

      padding-box以内边距做为参考原点;

      content-box以内容区做为参考点;

    3、background-clip设置背景区域裁切 包含三个属性

      border-box裁切边框以内为背景区域;

      padding-box裁切内边距以内为背景区域;

      content-box裁切内容区做为背景区域;

CSS3的基础用法

标签:识别   val   hover   空格   disable   back   效果   图片   倒数   

原文地址:http://www.cnblogs.com/blackz/p/6254010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!