CSS3带来了些什么

css3简介

html5 html4的升级版
   html-->html5
   css2.0 -->css3.0  属性   动画  渐变  阴影

   渐进增强: 让低版本浏览器 可以使用最基本的功能,高版本的浏览器具有更好的用户体验

css3选择器

css2中的选择器:
    div{} 标签选择器
    .box 类名选择器
    #box  id选择器
    div .box 后代选择器
    div>.box  子代选择器
    div,p,span 并集选择器
    div.box  交集选择器
    * 通配符选择器

    div+p  选中div后面的第一个p标签
    div~p  选中div后面所有的p标签  (兄弟级别)
属性选择器
id 通过id进行筛选的  #
类名 通过类名进行筛选的  .
属性 通过属性进行筛选的  []

语法:
    符号:^ :开始   $:结束  *:包含
E[title]  选中带有title属性的E标签
E[title="box" ] 选中带有title属性的E标签,并且值为box
E[title^="box"] 选中带有title属性的E标签,并且值以box开始
E[title$="box"] 选中带有title属性的E标签,并且值以box结尾
E[title*="box"] 选中带有title属性的E标签,并且值包含box

结构伪类选择器

通过结构进行筛选
伪类:   :hover  :active    符号 :
E:first-child 选中父盒子中的第一个子元素
E:last-child 选中父盒子中的最后一个子元素
E:nth-child(n) 选中父盒子中的第N个子元素
E:nth-last-child(n) 从后向前选中第n个
n:表示 从0开始的正整数,取值 0,1,2,3,4...  如果n小于1无效

偶数: 2n  even
奇数: 2n+1  odd
-n+5  选中前5个


其他伪类:

E:empty 选中内容为空的E元素
E:not('.box'); 排除 类名的为box的E元素
E:target   表示E元素被激活是的 状态 ,配合锚点使用

伪元素

符号 ::
 伪   假的  元素:标签
 使用css模拟出标签的效果
 ::before
 ::after
 必须有content:"";
 默认是行内元素

 伪元素选择器:
 ::first-line 第一行
 ::first-letter 第一字母
 ::selection  表示选中的区域 (背景颜色和字体颜色)

文字阴影

text-shadow: 阴影水平偏移  阴影垂直偏移  模糊程度  阴影颜色;
可以设置多个阴影,多个阴影之间使用逗号隔开

### css3中的颜色模式
css2中透明存在的问题:
opacity: 设置透明度
opacity 问题: 给父盒子设置透明度会影响子盒子 并且子盒子无法清除
transparent: 透明色
不能改变透明度

css3中新增的颜色模式:

css3中所有设置颜色的地方都可以使用
RGBA:
    r:red
    g:green
    b:blue    0-255
    a: alpha 透明度  0-1
HSLA:
    h:色调 0-360
    s:饱和度 0-100%
    l:亮度  0-100%
    a:alpha  0-1

css3中的盒子模型

box-sizing:

   content-box(外加模式)  设置的是content-box的大小,设置padding和border会撑大盒子
   盒模型
   border-box (内减模式)   设置的是border-box的大小,设置padding和border 会减小内容区域的大小

浏览器私有前缀

css3在浏览器中的支持 有兼容性问题: 解决办法:加私有前缀
谷歌 、苹果: -webkit-
ie: -ms-
火狐:-moz-
欧朋:-o-

渐变

线性渐变:
    linear-gradient(方向,起始颜色,结束颜色);
    方向: to left  right  top bottom  45deg

      
1
2
3
4
5
6
7
8
9
10
background-image: linear-gradient(135deg,
red 0%,
red 25%,
blue 25%,
blue 50%,
green 50%,
green 75%,
pink 75%,
pink 100%
);

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. css3简介
    1. 1.1. css3选择器
      1. 1.1.0.1. 属性选择器
    2. 1.1.1. 结构伪类选择器
    3. 1.1.2. 伪元素
  2. 1.2. 文字阴影
  3. 1.3. css3中新增的颜色模式:
  4. 1.4. css3中的盒子模型
  5. 1.5. 浏览器私有前缀
  6. 1.6. 渐变