CSS3快速参考

CSS3基本知识总结.

CSS3学习笔记

1 选择器

1.1 属性选择器

  1. [att=val]
  2. [att*=val] 如果元素用att表示的属性之属性值中包含用val指定的字符的话,则该元 素使用这个样式。
  3. [att^=val] 如果元素用att表示的属性之属性值的开头字符为用val指定的字符的话, 则该元素使用这个样式。
  4. [att$=val] 如果元素用att表示的属性之属性值的结尾字符为用val指定的字符的话, 则该元素使用这个样式。

1.2 伪类选择器

伪类选择器是CSS中已经定义好的选择器,不能随便起名。 在CSS中,常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使 用方法如下:

a:link { }
a:visited { }
a:hover { }
a:active {}

1.2.1 伪元素选择器

伪元素选择器是针对CSS中已经定义好的伪元素使用的选择器,它的使用方 法如下:

选择器:伪元素{属性:值}

伪元素也可以与类配合使用,使用方法如下:

选择器 类名:伪元素{属性:值}

在CSS中,主要有如下4个伪元素选择器:

  • first-line 为元素中的第一行方案使用样式。
  • first-letter 为元素中的文字首字母或第一个字使用样式。
  • before 在某元素之前插入一些内容。
  • after 在某元素之后插入一些内容。

1.2.2 结构性伪类选择器

  1. root选择器 将样式绑定到页面的根元素中。
    <style type="text/css">
      :root{
      background-color: yellow;
      }
      body{
      background-color: limegreen;
      }
    </style>
    
  2. not选择器
    <style type="text/css">
      body *:not(h1) {
      background-color: yellow;
      }
    </style>
    
  3. empty选择器 指定当元素内容为空时的样式
    <style type="text/css">
      :empty {
      background-color: yellow;
      }
    </style>
    
  4. target选择器 对页面中某个target元素(该元素的id被当做页面中的超链接来使用) 指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target 元素后起作用。

1.2.3 子元素选择器

first-child, last-child, nth-child, nth-last-child.

nth-of-type, nth-last-type.

针对同类型的子元素

only-child

当父元素只有一个子元素才有的样式。

1.2.4 UI元素状态伪类选择器

共有11种:E:hover, E:active, E:focus, E:enabled, E:disabled, E:read-only, E:read-write, E:checked, E:default, E:indeterminate, E::selection.

1.2.5 通用兄弟元素选择器

子元素-兄弟元素{}

1.3 使用选择器插入内容

1.3.1 插入文字

h2:before {
content: 'COLUM';
}

指定个别元素不进行插入:

h2.sample.before {
 content: none
}

<h2 class="sample">标题2</h2>

none也可以改为 normal,但是none只能用于 before , after两种选择器, 而normal可用于其他用来插入内容的选择中。

1.3.2 播放图像文件

h2:before {
content: url(mark.png);
}

<h2>你好</h2>

1.3.3 使用content属性播放项目编号

h1:before {
content: counter(mycounter);
}
h1 {
counter-increment: mycounter;
}

2 文字与字体

2.1 文字阴影

text-shadow的使用方法如下:

textshadow length length length color

前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向 距离和阴影的模糊半径,color指阴影的颜色。

2.2 文本自动换行

使用 word-break 属性来自己决定自动换行的处理方法。

2.3 使用服务器端字体

@font-face属性的使用方法如下:

@font-face {
font-family: WebFont;
src: url('fonts/maotizi.ttf') format("truetype");
font-weight: normal;
}

本地端字体:

@font-face {
font-family: Arial;
src: local('Arial');
}

2.4 保持字体大小不变

使用 font-size-ajust 属性可以在字体发生变化的情况下,保持字体大小不 变。

3 盒相关样式

3.1 盒的类型

3.1.1 盒的基本类型

CSS中的盒分为block类型和inline类型.div与p元素属于block类型,而span 和a元素属于inline类型.

3.1.2 inline-block类型

属于block类型盒中的一种,但是在显示时具有inline类型盒的特点. 可用于在一行中并列显示多个block类型的元素.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <style type="text/css">
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            display: inline-block;
            width: 100px;
            padding: 10px 0;
            background-color: #00ccff;
            border: solid 1px #666666;
            text-align: center;
        }
        a {
            color: #000000;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>
</body>
</html>

3.1.3 inline-table类型

table默认是block类型,table与前后的文字不会显示在同一行,可以将table 的显示类型改为inline-table,就可以与前后的文字显示在同一行了.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style type="text/css">
        table {
            display: inline-table;
            border: solid 3px #00aaff;
            vertical-align: bottom;
        }
    </style>
</head>

<body>
    你好.
    <table>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
        <tr>
            <td>F</td>
            <td>G</td>
            <td>H</td>
            <td>I</td>
            <td>J</td>
        </tr>
        <tr>
            <td>K</td>
            <td>L</td>
            <td>M</td>
            <td>N</td>
            <td>O</td>
        </tr>
    </table>
    你好
</body>
</html>

3.1.4 list-item类型

如果在display属性中将元素的类型设置为list-item类型,则可以将多个元 素作为列表来显示,同时在元素的开头加上列表的标记.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div>示例1</div>
    <div>示例2</div>
    <div>示例3</div>
    <div>示例4</div>
</body>
</html>

3.1.5 run-in类型和compat类型

将元素指定为run-in类型或compact类型的时候,如果元素后面还有block元 素,则run-in元素将被包含在block类型的元素内部,而compact类型的元素将 被放置在block类型的元素左边.

3.2 对于盒中容纳不下的内容的显示

3.2.1 overflow属性

指定对于盒中容纳不下的内容的显示方法.

3.2.2 overflow-x和overflow-y属性

可以单独指定水平和垂直方向的显示方法:hidden, scroll, auto, visible.

3.2.3 text-overflow属性

当通过把overflow属性的属性值设定为"hidden"方法,将盒中容纳不下的内 容隐藏起来时,如果使用text-overflow属性,可以在盒的末尾显示一个代表 省略的符号"…".但是只在当盒子的内容在水平方向上超出盒的容纳范围时 有效.

3.3 对盒使用阴影

3.3.1 box-shadow属性的使用方法

box-shadow: length length length color

前三个length分别指阴影离开文字的横向距离,纵向距离和阴影的模糊半 径,color指阴影的颜色。

3.4 指定针对元素的宽度与高度的计算方法

3.4.1 box-sizing属性

值可以设置为 content-box(默认值)和border-box.border-box不包含内部 补白区域,以及边框的宽度与高度.

4 与背景和边框相关样式

4.1 与背景相关属性

4.1.1 background-clip

指定背景的显示范围,当设定为border-box时,则背景范围包括边框区域,如果设 定为padding-box,则不包括边框区域.

4.1.2 background-origin

指定绘制背景图像的绘制起点,默认是从内部补白区域的左上角开始,可以利 用该属性指定绘制时从边框的左上角开始或从内容的左上角开始,可取如下 三个值:

  • border
  • padding
  • content

4.1.3 background-size

指定背景图像的尺寸.

4.2 与边框相关属性

4.2.1 border-radius属性

指定圆角的半径.绘制4个不同半径的图角边框时,分别指定如下4个属性:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

4.2.2 border-image

让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制, 使用border-image属性,会让浏览器在显示图像边框时,自动将所使用到的图 像分割为9部分进行处理.

5 变形处理

5.1 transform功能的基础知识

5.1.1 功能分类

  1. 旋转

    使用rotate方法来实现文字或图像的旋转处理.

  2. 缩放

    使用scale方法来实现文字或图像的缩放处理

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
           div {
               width: 300px;
               margin: 150px auto;
               background-color: yellow;
               text-align: center;
               transform: scale(0.5, 2);
               -webkit-transform: scale(0.5, 2);
           }
        </style>
    </head>
    <body>
        <div>
            示例文字
        </div>
    </body>
    </html>
    
  3. 倾斜

    使用skew来实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾 斜角度与垂直方向上的倾斜角度.

  4. 移动

    使用translate方法来将文字或图像进行移动,在参数中分别指定水平方向 上的移动距离和垂直方向上的移动距离.

5.1.2 对元素使用多种变形

可同时对一个元素进行旋转,绽放,倾斜和移动的变换.

5.1.3 指定变形的基准点

使用transform-origin来改变变形过程中的基准点.水平方向可以指定 left,center,right,垂直方向可以指定top,center,bottom.

6 动画功能

6.1 Transitions功能

Transitions属性的使用方法如下:

Transition: property duration timing-function

其中property表示对哪个属性进行平滑过渡,duration表示在多长时间内完成 属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style type="text/css">
      div {
          background-color: #ffff00;
          transition: background-color 1s linear, color 1s linear, width 1s linear;
          -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
      }
      div:hover {
          background-color: #00ffff;
          color: #ffffff;
          width: 400px;
      }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

6.2 Animations功能

Animations通过定义多个关键帧以及定义每个关键帧中元素的属性来实现更 为复杂的动画效果.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
      div {
          background-color: #ffff00;
      }
      @keyframes myColor{
          0% {
              background-color: red;
          }
          40% {
              background-color: darkblue;
          }
          70% {
              background-color: yellow;
          }
          100% {
              background-color: red;
          }
      }

      div:hover {
          animation-name: myColor;
          animation-duration: 5s;
          animation-timing-function: linear;
      }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

7 布局相关样式

7.1 多栏布局

多栏布局可以将一个元素中的内容分为两栏或多栏显示,并且确保各栏中内容 的底部对齐.

head>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            width: 50%;
            column-count: 2;
            column-gap: 2em;
            column-rule: 1px solid red;
        }

        div#div3 {
            width: 100%;
            background-color: yellow;
            height: 200px;
        }
    </style>
</head>

7.2 盒布局

<head>
    <meta charset="utf-8" />
    <style type="text/css">
        #container {
            display: -webkit-box;
        }
        #left-sidebar {
            width: 200px;
            padding: 20px;
            background-color: orange;
        }
        #contents {
            width: 300px;
            padding: 20px;
            background-color: yellow;
        }
        #right-sidebar {
            width: 200px;
            padding: 20px;
            background-color: limegreen;
        }
        #left-sidebar, #content, #right-sidebar {
            box-sizing: border-box;
        }
    </style>
</head>

7.2.1 设置盒布局

  1. box 设置display的属性值为box.
  2. box-flex 使用自适应窗口的弹性布局.
  3. box-ordinal-group 改变各元素的显示顺序.
  4. box-orient 改变各元素的显示方向.
  5. box-pack, box-align 指定水平方向与垂直方向的对齐方式.

8 Media Queries相关样式

8.1 Media Queries使用方法总结

使用方法如下:

@media 设备类型 and {设备特性} {样式代码}