浏览器用 CSS 技术渲染 HTML 的外观

语法结构:

1
2
3
4
5
  p
  {
    text-align:center;
    color:red;
  }

这种结构叫做选择器,就是有选择的给标签添加属性

选择器

标签

1
  div p  {text-align:center;}

id

1
  #red {color:red;}

class

1
  .center {text-align: center}

属性

1
  input [title="value"] {text-align: center}

伪元素

  • :first-line 向文本的首行设置特殊样式

  • :first-letter 向文本的首字母设置特殊样式

  • :before 在元素的内容前面插入新内容

  • :link 选择所有未访问链接

  • :visited a:visited 选择所有访问过的链接

  • :active a:active 选择正在活动链接

  • :hover a:hover 把鼠标放在链接上的状态

  • :focus input:focus 选择元素输入后具有焦点

  • :first-letter 元素的第一个字母

  • :first-line 元素的第一行

  • :first-child 选择器匹配属于元素的第一个子元素

  • :before 在元素之前插入内容

  • :after 在元素之后插入内容

  • :lang(language) 为元素的 lang 属性选择一个开始值

    内容

    1
    2
    3
    
      p::before {
        content: "Read this: ";
      }

样式

文本

  • 文本的大小和字型(font-size / font-family)

  • 粗细、样式、拉伸和装饰(font-weight / font-style / font-stretch / text-decoration)

  • 行间距(line-height)、字母间距(letter-spacing)和单词间距(word-spacing)

  • 对齐(text-align)方式和缩进(text-ident)

  • 链接样式(:link / :visited / :active / :hover)

  • 阴影效果 - text-shadow

  • 首字母和首行文本(:first-letter / :first-line)

  • 响应用户

盒子 box

  • 盒子大小的控制(width / height)

  • 盒子的边框、外边距和内边距(border / margin / padding)

  • 盒子的显示和隐藏(display / visibility)

  • CSS3 新属性

    • 边框图像(border-image)

    • 投影(border-shadow)

    • 圆角(border-radius)

链接

  • a:link 普通的、未被访问的链接

  • a:visited 用户已访问的链接

  • a:hover -鼠标指针位于链接的上方

  • a:active 链接被点击的时刻

列表

  • 列表的项目符号(list-style)

  • 表格的边框和背景(border-collapse)

图像

  • 控制图像的大小(display: inline-block)

  • 对齐图像

  • 背景图像(background / background-image / background-repeat / background-position)

布局

  • 控制元素的位置(position / z-index)

    • 普通流

    • 相对定位

    • 绝对定位

    • 固定定位

    • 浮动元素(float / clear)

  • 网站布局

颜色值

颜色值的设定可以有好几种方式

  1. 关键字 red , yellow 用颜色的英文单词表示

  2. rgb(0,100,100) 用十进制的 rgb 混色模式

  3. hsl(0,100%,50%) 用色相(0-360),饱和度,明度的混色模式表示

  4. 透明 opacity

字体

font-family 字体类型

  • sans-serif 无衬线 (字体边缘平滑,比较好看)

  • serif 衬线 (字体突兀)

  • monospace 等宽字体 (一般用在代码编辑器)

  • cursive 草书

  • fantasy

  • system-ui

    常用字体族

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
      .serif {
        font-family: Times, Times New Roman, Georgia, serif;
      }
    
      .sansserif {
        font-family: Verdana, Arial, Helvetica, sans-serif;
      }
    
      .monospace {
        font-family: Lucida Console, Courier, monospace;
      }
    
      .cursive {
        font-family: cursive;
      }
    
      .fantasy {
        font-family: fantasy;
      }

初始化样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button,form,fieldset,input,textarea,p,blockquote,th,td {   
      padding: 0;   
      margin: 0;   
  }
  /* 酌情修改 */
  body {
    background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";
  }

  /* 短引用的内容可取值:''或"" */
  q:before,q:after {content:;}  

  /* 缩写,图片等无边框 */
  fieldset,img,abbr,acronym {border: 0 none;}
  abbr,acronym {font-variant: normal;}
  legend {color:#000;}

  /* 清除特殊标记的字体和字号 */
  address,caption,cite,code,dfn,em,strong,th,var {   
      font-weight: normal;   
      font-style: normal;   
  }

  /* 上下标 */
  sup {vertical-align: text-top;}
  sub {vertical-align: text-bottom;}

  /* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为 0*/
  table {   
      border-collapse: collapse;   
      border-spacing: 0;   
  }   

  /* 表格标题及内容居左显示 */
  caption,th {text-align: left;}
  input,img,select {vertical-align:middle;}

  /* 清除列表样式 */
  ol,ul {list-style: none;}  

  /* 输入控件字体 */
  input,button,textarea,select,optgroup,option {
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
  }

  /* 标题元素样式清除 */ 
  h1,h2,h3,h4,h5,h6 {   
      font-weight: normal;   
      font-size: 100%;   
  }   

  /* 链接样式,颜色可酌情修改 */
  del,ins,a {text-decoration:none;}
  a:link {color:#009;}
  a:visited {color:#800080;}
  a:hover,a:active,a:focus {color:#c00; text-decoration:underline;} 

  /* 鼠标样式 */
  input[type="submit"] {cursor: pointer;}
  button {cursor: pointer;}
  input::-moz-focus-inner { border: 0; padding: 0;}

  .clear {clear:both;}

高级功能

flexbox 弹性布局 (为移动端设计的方便排版的技术)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
  /* 设置 Flex 模式 */
  display: flex;

  /* 决定元素是横排还是竖着排,要不要倒序 */
  flex-direction: column;

  /* 决定元素换行格式,一行排不下的时候如何排 */
  flex-wrap: wrap;

  /* flex-flow = flex-direction + flex-wrap */
  flex-flow: column wrap;

  /* 同一排下对齐方式,空格如何隔开各个元素 */
  justify-content: space-between;

  /* 同一排下元素如何对齐,顶部对齐、中部对齐还是其他 */
  align-items: center;

  /* 多行对齐方式 */
  align-content: space-between;

媒体查询

三个逻辑操作符,分别是 and、not 和 only。

1
2
3
@media all and (min-width: 800px) and (max-width: 1024px) {
  ...;
}

viewport (视窗)

禁用缩放(手机默认会启用缩放)
1
  <meta name="viewport" content="width=device-width, initial-scale=1" />
设备无关像素(dip device-independent pixel )

width=device-width 可指示网页与屏幕宽度(以设备无关像素为单位)进行匹配。这样,网页就可以重排内容以匹配不同的屏幕尺寸。

transform 变换

  • transform:

    • translate(X,Y) 平移多少位置

    • rotate() 旋转多少角度 ( 30deg ) 多少圈 (0.5turn 半圈)

    • scale(2,4) 缩放

    • skew(30deg,20deg) 倾斜

    • matrix() 需要六个参数,包含数学函数,旋转、缩放、移动以及倾斜

    • transform-origin 允许你改变被转换元素的位置

过渡效果 动画

1
2
  div{transition:width 2s;}
  div:hover{width:300px;}
  • transition-property 规定应用过渡的 CSS 属性的名称

  • transition-duration 定义过渡效果花费的时间

  • transition-timing-function 规定过渡效果的时间曲线

  • transition-delay 规定过渡效果何时开始

相对布局

一般而言,对于响应式网站,水平方向为流体网格布局,那宽度、左右间距和左右内边距的长度自然采用百分比。像高度、上下间距,还有字体大小等与垂直方向相关的属性则应该使用 em 或者 rem 单位。

移动优先

当用手机打开网页的时候,默认打开的只是相对比较简单的手机版样式,而复杂一些的桌面版的相应样式都在 media-query 中包裹着,所以不会加载,那么这样页面访问速度是最佳的。 参考下面代码

1
2
3
4
5
6
7
8
9
.content {
/* 一些简单的样式,专门为手机而生 */
}

@media screen and (min-width: 400px) {
.content {
 /* 为大屏设备设计的比较复杂的样式 */
}
}

滚动条

用 max-width 代替 width 可以防止窗口太小时出现滚动条