• web前端CSS3学习2017.6.24


    选择器
    简单选择器
    关系选择器
    组合选择器
    属性选择器
    伪类选择器
    伪元素选择器
    ...
    css2选择器:
    属性选择器:
    1 E[att]:E泛指所有元素,选择具有att属性的E元素---IE7
    2 E[att="val"]:选择具有att属性且属性值为val的E元素---IE7
    3 E[att~="val"]:选择具有att属性且属性值为用空格分隔的字词列表,其中一个等于val的E元素---IE7
    4 E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素---IE7
    字符串:凡是用单引号或者双引号包着内容,我们都可以叫做字符串
    伪类选择器:
    1 E:first-child:匹配父元素的第一个子元素E。
    注意:要使该属性生效,E元素必须是某个元素的子元素
    2 E:link E:visited E:hover E:active---ie6
    E:focus 在输入焦点时发生的样式变化,一般用于表单元素---ie8

    ****************华丽分割线*****************
    css3选择器

    一 关系选择器
    1 兄弟选择器(E~F):选择E元素后面的所有兄弟元素F(ie7)
    二 属性选择器
    1 E[att^="val"]:选择具有att属性且属性值以val开头的字符串的E元素(ie7)
    2 E[att$="val"]:选择具有att属性且属性值以val结尾的字符串的E元素(ie7)
    3 E[att*="val"]:选择具有att属性且属性值包含val的字符串的E元素(ie7)
    三 伪类选择器
    1 E:not(s):匹配不含有s选择器的元素E---(ie9)
    2 E:last-child:匹配父元素的最后一个子元素E---(ie9)
    3 E:only-child:匹配父元素仅有的一个子元素E---(ie9)
    4 E:nth-child(n):匹配父元素的第n个子元素E---(ie9)
    odd:奇数
    even:偶数
    以上伪类选择器只能写在子元素上面,不能写在父元素上面
    5 E:empty:匹配没有任何子元素的元素E---(ie9)
    其中子元素中如果有文本的话,那么认为文本也是子元素
    6 E:enabled:匹配用户界面上处于可用状态的元素E---(ie9)
    E:disabled:匹配用户界面上处于禁用状态的元素E---(ie9)
    7 E:checked:匹配用户界面上处于选中状态的元素E---(ie9)

    四 伪元素选择器---(ie8)
    1 E:before
    2 E:after
    ****************华丽分割线*****************

    css3属性

    一 颜色表示法
    英文单词
    十六进制
    rgb(10,25,30)
    第一个值表示的是红色占比
    第二个值表示的是绿色占比
    第三个值表示的是蓝色占比
    占比取0-255

    透明度
    rgba(红色,绿色,蓝色,透明度)---(ie9)
    透明度的取值:0---1,如果值越大,透明度越低

    opacity:0.5---(ie9)
    后面跟一个0---1的值,如果值越大,透明度越低
    opacity对整个元素的所有内容都会透明,而rgba只是设置元素的颜色透明

    filter:alpha(opacity=50);---滤镜(支持ie8及更早版本),取值为(0---100)%,如果值越大,透明度越低
    opacity:0.5;

    二 设置圆角边框---(ie9)
    -webkit-/-moz-
    border-radius:5px/5%;
    border-top-left-radius:150px;
    border-bottom-right-radius:150px;

    缩写:
    border-radius: 左上 右上 右下 左下;
    border-radius: (左上/右下) (右上/左下);
    border-radius: (左上) (右上/左下) (右下);

    ----前缀----
    为什么会产生前缀:在标准为确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容
    加了前缀的作用:可以兼容到浏览器更早的版本
    -webkit- chrome
    -moz- firfox
    -o- opara
    -ms- IE

    三 设置盒阴影---ie9
    -webkit-/-moz-/-o-
    box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影尺寸 颜色 inset/outset;

    四 过渡效果---ie10
    -webkit-/-moz-/-o-
    transition:参与属性 过渡时间 动画类型 延迟时间;
    当参与的css属性发生变化时,才能产生过渡效果
    动画类型:
    默认,ease---以慢速开始,然后变快,最后以慢速结束
    linear---从始至终都是相同的速度
    五 2D转换---ie9
    -webkit-/-moz-/-o-/-ms-
    transform:
    translate(x,y) 沿着X和Y轴移动,在初始位置的左上角开始偏移
    translateX(n)/translateY(n)
    scale(width,height) 改变元素的宽度和高度
    scale(n) 宽度和高度都是以n的倍数进行放大或缩小
    scaleX(n)/scaleY(n),以中心点为坐标进行放大或缩小
    rotate(deg) 规定元素旋转多少度,以顺时针的方向旋转
    skew(x-deg,y-deg) 沿着x和y轴倾斜

  • 相关阅读:
    在模板生成页面的时候,页面里的标签可能会生成多个id,这时候使用id选择器,往往只能取到第一个id的元素。
    后台返回model里的时间格式,用@JsonFormat是没用的,它只有在返回JSON数据的时候生效,我脑抽了
    thymeleaf关于 Error resolving template “index”, template might not exist or might not be accessible by any of the configured Template Resolvers
    thymeleaf 配合 Spring Security 权限判断时,sec:authentication无法取到值(null)
    MySQL 常用30种SQL查询语句优化方法
    Linux常用命令
    APP微信登录---第三方登录
    关于文件的工具类例子
    Java时间戳与日期格式字符串的互转
    Java字符串与文件的互转操作
  • 原文地址:https://www.cnblogs.com/jiandandeboke/p/7124550.html
Copyright © 2020-2023  润新知