CSS3开发文档

栏目: CSS3 · 发布时间: 4年前

内容简介:站点:原文:原文:

站点: 前端开发文档

原文: CSS选择器

原文: CSS继承属性

原文: CSS3核心模块

原文: CSS盒子模型

原文: CSS背景图像

原文: CSS清除浮动

原文: CSS定位

CSS选择器

  • 并集:对选择器进行分组,被分组的选择器可以分享相同的声明。用 逗号 将需要分组的选择器开分。

    • h1,h2,h3,h4,h5,h6{}
  • 交集:两种属性同属一个元素

    • p.name{}p#id{}.name1.name2{}
  • 后代(派生):根据元素在位置上的关系定义样式,使用 空格 隔开,后代选择器尽量不要超过3个,不必把每个层级都列出,只需要写关键点即可

    • li strong {}
  • 子代:只能选择作为某元素的子元素,只选择子代,往后孙子一代不选择

    • h1 > strong {}
  • 兄弟和相邻兄弟:选择紧接在另一元素后的,并且二者有相同父元素

    • h1 + p {}
  • 属性:对带有指定属性的HTML元素设置样式,权重为10

    • 属性选择器 :为带有 title 属性的所有元素设置样式, [title] {}
    • 属性和值选择器 :为 title="name" 的所有元素设置样式, [title=name] {}
    • 设置表单的样式input[type="text"] {}
  • 伪类:

    • :active :被激活的元素
    • :focus :有键盘输入焦点的元素
    • :hover :鼠标悬停
    • :link :未被访问的链接
    • :visited :已被访问的链接
    • :first-child :元素的第一个子元素
    • :lang :带有指定 lang 属性的元素
  • 权重:

    div
    class/类选择器
    id
    
  • 结构选择器(新增伪类(面试题))

    • :not :排除
    • :nth-child(n) :第几个元素 从1开始设置
    • :nth-child(2n) :偶数元素 从0开始设置
    • :nth-child(2n+1) :奇数元素
    • :nth-of-type(n) :某个元素下同类型的第几个元素
    • :nth-last-child :倒数第几个元素
    • :first-child->:nth-child(1)
    • :fisrt-of-type :第一个同级兄弟元素
    • :last-of-type :最后一个同级兄弟元素
    • :nth-of-type(n) :第几个同级兄弟元素
    • :last-child :最后一个子元素
    • :only-child :仅有一个子元素
    • :only-of-type :只有一个同类型的子元素
    • :empty :空内容
    • :checked :被选中 主要用在 input 表单元素
  • 属性选择器

    • E[attr=val]
    • E[attr|=val] :只能等于 val 或只能以 val- 开头
    • E[attr*=val] :包含 val 字符串
    • E[attr~=val] :属性值有多个,其中一个是 val
    • E[attr^=val] :以 val 开头
    • E[attr$=val] :以 val 结尾
  • 目标伪类选择器

    • :target() :用来匹配URL指向的目标元素(存在URL指向该匹配元素时,样式效果才会生效)
  • 伪元素:

    • :first-line :匹配首行文本,只能用于块级元素
    • :first-letter :匹配首字符
    • :before/:after :DOM元素前后插入额外的内容

      • 遇到伪元素 before/after 就要加上 content=''
      • display: block; :独占一行
      • display: inline-block; :不独占一行

CSS继承属性

  • 无继承性的属性

    1. display :规定元素应该生成的框的类型
    2. 文本属性:

      vertical-align
      text-decoration
      text-shadow
      white-space
      unicode-bidi
      
    3. 盒子模型的属性:

      • widthheight
      • marginmargin-top/right/bottom/left
      • borderborder-top/right/bottom/left
      • border-styleborder-top/right/bottom/left-style
      • border-widthborder-top/right/bottom/left-width
      • border-colorborder-top/right/bottom/left-color
      • paddingpadding-top/right/bottom/left
    4. 背景属性:

      background
      background-color
      background-image
      background-repeat
      background-position
      background-attachment
      
    5. 定位属性:

      • float
      • clear
      • position
      • top/right/bottom/left
      • min-width/min-heightmax-width/max-height
      • overflow
      • clip
      • z-index
    6. 生成内容属性:

      content
      counter-reset
      counter-increment
      
    7. 轮廓样式属性:

      outline-style
      outline-width
      counter-color
      outline
      
  • 有继承性的属性

    1. 字体系列属性

      • font :组合字体
      • font-family :字体系列
      • font-weight :字体粗细
      • font-size :字体尺寸
      • font-style :字体风格
      • font-variant :小写字母转换为大写,字体尺寸更小
      • font-stretch :对当前 font-family 进行伸缩变形。所有主流浏览器不支持。
      • font-size-adjust :为某个元素规定一个 aspect 值,保持首选字体的 x-height
    2. 文本系列属性

      text-indent
      text-align
      line-height
      word-spacing
      letter-spacing
      text-transform
      direction
      color
      
    3. 元素可见性: visibility
    4. 表格布局属性

      caption-side
      border-collapse
      border-spacing
      empty-cells
      table-layout
      
    5. 列表布局属性

      list-style-type
      list-style-image
      list-style-position
      list-style
      
    6. 生成内容属性: quotes
    7. 光标属性: cursor
    8. 页面样式属性

      page
      page-break-inside
      windows
      orphans
      

CSS3核心模块

过渡动画

  • transition :过渡动画

    • transition-property :过渡属性 all[attr]
    • transition-duration :过渡时间
    • transition-delay :延迟时间
    • transition-timing-function :运行类型

      ease
      linear
      ease-in
      ease-out
      cubic-bezier
      

过渡动画效果思考步骤:

transition

2D变换

  • transform :变形属性

    • rotate() :旋转函数

      deg
      transform-origin
      
    • skew() :倾斜函数

      skewX()
      skewY()
      
    • scale() :缩放函数 默认值是1

      scaleX()
      scaleY()
      
    • translate() :位移函数

      translateX()
      translateY()
      

animation-声明关键帧

  • 关键帧—— @keyframes

    • 类似于 flash

      • 定义动画在每个阶段的样式,即帧动画
    • 关键帧的时间单位

      • 数字: 0%25%100% 等(设置某个时间段内任意时间点的样式)
      • 字符: from(0%)to(100%)
    • 格式

      @keyframes
      {动画状态}
      

animation-调用动画

  • 必要属性

    animation-name
    animation-duration
    
  • 可选属性:

    • animation-timing-function

      linear
      ease
      ease-in
      ease-out
      ease-in-out
      ease-bezier(num,num,num,num)
      
    • animation-delay :动画延迟
    • animation-iteration-count :重复次数
    • animation-direction :动画运行的方向 normal|reverse|alternate|alternate-reverse
    • animation-play-state :动画状态 running|paused
    • animation-fill-mode :动画结束后的状态 none|forwards|backwards|both

3D变换

  • transform-style: flat|preserve-3d :3D空间展示
  • perspective :景深效果
  • transform: persective(800px) :直接作用在子元素上
  • transform :新增函数

    • translate3d(tx, ty, tz)translateX() translateY() translateZ()
    • rotate3d(rx, ry, rz, a)rotateX() rotateY() rotateZ()
    • scale3d(sx, sy, sz)sacleX() sacleY() sacleZ()

圆角 border-radius

  • border-radius :1-4个数字/1-4个数字

    • 水平半径/垂直半径
    • 四个数字方向分别是 左上 右上 右下 左下
    • 没有 / 则水平半径和垂直半径一样

      border-radius: 10px/5px;
      

线性渐变 linear-gradient

  • linear-gradient :([<起点>||<角度>,]?<点>,<点>...)
  • 只能用在背景上
  • 颜色是沿着一条直线轴变化
  • 参数

    • 起点:开始渐变方向
    • 角度:开始渐变角度
    • 点:渐变点的颜色和位置
  • 重复线性渐变

径向渐变 radial-gradient

  • radial-gradient
  • 从“一点”向多个方向颜色渐变
  • shape 形状: ellipsecircle 或设置水平半径,垂直半径
  • size :渐变的大小,即渐变停止位置:

    closet-side
    farthest-side
    closet-corner
    farthest-corner
    
  • position :关键词|数值|百分比
  • 重复的径向渐变

背景

  • background-origin

    • padding-box :从 padding 区域显示
    • border-box :从 border 区域显示
    • content-box :从 content 区域显示
  • background-clip

    • padding-box :从 padding 区域向外裁剪
    • border- box :从 border 区域向外裁剪
    • content-box :从 content 区域向外裁剪
    • text :文本裁剪
  • background-size

    100% 100%
    10px 10px
    contain
    cover
    
  • background-attachment

    • 背景图片是滚动/固定 fixed (固定的) 默认是滚动的

盒子阴影

  • box-shadow :h v blur spread color inset;

    h
    v
    blur
    spread
    color
    inset
    

文本阴影

  • text-shadow :x y blur color

    • x 轴偏移 y 轴偏移 模糊度 颜色
    • 多层阴影制作文字立体效果,设置多种颜色,中间以逗号隔开
  • 文字添加边框

    • text-stroke :2px blue

      1px
      

滤镜

-webkit-filter:normal;
-webkit-filter:grayscale(1);
-webkit-filter:brightness(0);
-webkit-filter:invert(1);
-webkit-filter:sepia(0.5);
-webkit-filter:hue-rotate(30deg);
-webkit-filter:saturate(4);
-webkit-filter:contrast(2);
-webkit-filter:opacity(0.8);

遮罩

mask-image
mask-position
mask-repeat

CSS盒子模型

border 边框

  • 三角形箭头:

    • 正方形的任意相邻两条边,然后旋转一定的角度,得到我们需要的任意方向的箭头
    • borderborder-widthborder-styleborder-color
  • 三角形:

    • border 的3个属性: border-width/border-style/border-color ,宽度和高度都为 0 ,三角形箭头方向设定颜色,其余方向颜色设为透明 transparent

margin 边距

  • margin 边距重叠 : 取大值,不是两者相加之和。
  • margin-top 的传递 :大盒嵌套小盒,小盒加 margin-top 值,传递到大盒,导致整体下移。

    • 解决 margin 的兼容性问题:

      float: left;
      overflow: hidden;
      padding-top: 0/1px;
      border-top: 1px solid transparent;
      

CSS背景图像

background 背景

主要属性:

  • background-color :背景颜色,简写 background

    transparent
    inherit
    
  • background-image :背景图片

    • url :图片URL地址
    • node :默认值 背景上未放置图片
    • inherit :指定背景图片从父元素继承
    • 一个元素可以引入多张背景图片;

      • 指定要使用的一个或多个背景图片,默认情况下, background-image 放置在元素的左上角,并重复垂直和水平方向
    • 属性不能继承
  • background-repeat :背景重复

    background-image
    repeat
    repeat-x
    repear-y
    no-repeat
    inherit
    
  • background-position :背景定位

    • 设置背景图片的起始位置
    • xy 水平位置,垂直位置。左上角是 0 。单位(px,关键字,百分数)
    • 关键字成对出现 left right top bottom center ,仅指定一个关键字,其他值将会是 center
    • 只设定 x 轴方向,默认 y 轴为 center
    • inherit 从父元素继承
  • background-attachment :背景关联

    scroll
    fixed
    inherit
    
  • background-size :背景图像的尺寸大小

    <length>
    <percentage>
    auto
    cover
    contain
    
  • background-origin :设置背景图像的参考原点(位置)

    • padding-box :从 padding 区域(含 padding )开始显示背景
    • border-box :从 border 区域(含 border )开始显示背景
    • content-box :从 content 区域开始显示背景
  • background-clip :设置对象的背景图像向外裁剪的区域

    • padding-box :从 padding 区域(不含 padding )开始向外裁剪背景
    • border-box :从 border 区域(不含 border )开始向外裁剪背景
    • content-box :从 content 区域开始向外裁剪背景
    • text :从前景内容的形状(比如文字)作为裁剪区向外裁剪,实现使用背景作为填充色之类的遮罩效果。
  • 雪碧图: background-position: x y

CSS清除浮动

overflow: hidden

overflow
margin-top

(面试题):

  • 单行文本出现省略号(4个必备条件,缺一不可)

    width
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
  • 多行文本出现省略号(必备条件,主要应用在移动端)

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    
  • 多个元素在一行显示的方法

    display: inline;
    display: inline-block;
    float: left/right;
    

display: inline-block; 元素的特点

  • 盒子横向排列
  • verticle-align 属性会影响 inline-block 元素,值可能会设为 top
  • 需要设置每一列的宽度
  • 如果HTML源码中元素间有空格,列与列之间会产生空隙

    • 解决方法:

      • 如果元素添加了 dispay: inline-block; ,父元素增加一个属性 font-size: 0; ,同时在元素本身增加 font-size 属性进行覆盖
  • display:inline-block; 在IE6/7下不兼容的解决方法

    • 增加 display: inline; zoom: 1; 属性

IE7下块元素兼容display: inline-block;写法?

  • 直接让块元素设置为内联对象(设置属性 display: inline; ),然后触发块元素的 layout (如: zoom: 1; 等)。
  • 兼容各浏览器的代码如下: div {display: inline-block; *display: inline; *zoom: 1;}

float 浮动

float 元素的特点

left
display: block;

文档流和脱离文档流

  • 文档流:元素排版布局过程中,元素自动从左往右,从上往下的流式排列。
  • 每个非浮动元素块级元素独占一行,浮动元素按规则浮在行的一端。当前行容量满则另起一行浮动。
  • 内联元素不会独占一行
  • 几乎所有元素(包括块级、内敛和列表元素)均可生成子行,用于摆放子元素
  • 标准文档流等级:分为两个等级,块级元素和行内元素
  • 脱离文档流:文档流内的正常元素识别不到这个元素(脱离文档流的元素相当于平行漂浮于文档流之上)

float 元素产生的影响

background-color
padding
border

清除浮动 float

清除浮动的方法

  1. 给浮动元素的父级元素添加固定的高度 height (不推荐)
  2. 给浮动元素的父级元素添加溢出隐藏属性 overflow: hidden;
  3. 给最后一个浮动元素后面添加一个块级元素,这个块级元素带有 clear: both; 属性

    • clear 清除浮动元素对文档流内元素的影响(可以让文档流内的元素识别到浮动元素的高度)
    • left 清除 floatleft 的影响
    • right 清除 floatright 的影响
    • both 清除 float 所有的影响
    • inherit 从父级元素上继承该属性值
  4. clearfix 清除浮动(固定代码)

    • 利用伪元素 :after 清除浮动必备条件,缺一不可
    • display: block; 确保元素是一个块级元素
    • clear: both; 不允许左右两边有浮动对象
    • content: ''; 伪元素 :brfore/:after 自带的属性,如果不写,伪元素不起作用
    • 写全的样式属性;不是必备条件
    • height: 0; 防止在低版本浏览器中默认 height: 1px; 的情况,用 height: 0; 去覆盖
    • font-size: 0; 字体大小
    • overflow: hidden; 溢出隐藏
    • visibility: hidden; 让所有可见性的元素隐藏

overflow: hidden;visibility: hidden; 有什么区别?

(面试题):如何让一个元素消失?

opacity: 0;
display: none;
widht/height/line-height + overflow
visibility: hidden;

clear: both; 的特点

  1. 元素需要是块级元素
  2. 元素不能带有浮动属性
  3. 元素必须放在最后一个浮动元素的后面

CSS定位

  • 相对定位- position: relative;

    • 没有脱离文档流
    • 参照物是元素本身位置
    • topbottom 同时有值的情况下, top 值生效,支持负值
    • leftright 同时有值的情况下, left 值生效,支持负值
    • 任何元素都可以设置相对定位属性
    • 相对定位元素位移发生改变,但元素原来的位置还会被占用,其他元素还是正常识别这个元素原来的位置
  • 绝对定位- position: absolute;

    • 脱离文档流
    • 可以设置参照物,参照物必须是其父级元素(直系父级),如果没有直接父级会一直往上查找直到找到最外层的根元素为止;
    • 有宽度和高度的情况下, topbottom 同时有值, top 生效; leftright 同时有值, left 生效。
    • 没有宽度和高度的情况下, topbottom 同时设置值的情况下,会将这个盒子拉大,上下值都起作用,左右同理。
    • 可以设置层级关系 z-index 属性,必须要和定位元素(绝对,相对,固定)同时使用,才会起作用。
    • 一个元素定位在另一个元素上或者两个元素叠加的情况,都可以使用定位(绝对定位)
    • 绝对定位一定要设置相对参照物
  • 固定定位- position: fixed;

    top/bottom/left/right
    z-index
    
  • z-index 属性的特点

    • 默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
    • 可以使用 z-index 属性修改定位元素的层级关系
    • 所有定位元素的 z-index 默认值都一样
    • z-index 值是数字没有单位,支持负数
    • 一般都是同级元素进行层级的比较
    • 当参照物是相对定位或绝对定位的时候,父级元素之间没有 z-index 值,子元素的 z-index 值进行比较

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

项目管理艺术

项目管理艺术

Scott Berkun / 东南大学出版社 / 2006-4-1 / 58.00

《项目管理艺术(英文影印版)(2006年度Jolt获奖图书)》 “该书内容涵盖了项目管理的各个方面:保证项目按时按质交付的有效方法,如何激励项目成员全力以赴地工作,如何成为一名有影响力的领导者等等。通过阅读本书,您会详细地了解微软公司的最优秀的项目管理方法。衷心希望书中的经验能够被付诸于实践!” -Joe Belfiore,General Manager,E-home Divisi......一起来看看 《项目管理艺术》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具