设定网页外观的技术。你看一张报纸,或者图书的封面,花花绿绿的颜色还有排版,把这些 效果用在网页里的技术叫做样式技术 ( CSS )。

css

安装

需要浏览器和代码编辑器。

用法

HTML 文件

在 头部(head)标签中 嵌入样式文件的路径

1
  <link rel="stylesheet" href="style.css">

样式文件样例

1
2
3
4
5
6
  #para1
  {
      text-align:center;
      color:red;
  }
  .center {text-align:center;}

基本结构就是选择器 + 大括号括起来的具体样式

选择器

对页面内容进行定位的技术 ,定位到内容后,就可以设置内容的外观了。

用标签定位

根据标签在网页中的层次位置来定位

1
  div p  {text-align:center;}

用 id名定位

含有 id属性的元素,一个网页中不能有相同id名的元素

1
  #red {color:red;}

用class名定位

含有 class 属性的元素,可以有多个同class名的元素

1
.center {text-align: center}

用属性名定位

1
2
  //也可以不要 value 修饰
  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 属性选择一个开始值

样式设计

元素外观

背景
  • background-color: 默认 transparent 透明

  • background-image:默认 none,url(path 可以放两张背景)

  • background-repeat:默认 padding 左上角开始 repeat-x repeat-y no-repeat(重复图像)

  • background-position:

  • background-attachment:fixed/scroll/local 背景关联

  • background-size: 长宽 px 或 %,相对于父元素而不是图形

  • background-origin 背景图片相对于(content-box、padding-box 或 border-box )的定位

  • background-clip:content-box; 规定背景的绘制区域

轮廓
  • outline-color: 轮廓色

  • outline-style: 轮廓样式,点 dotted ,实线 solid ,双实线 double

  • outline-width: 轮廓大小

内边距
  • padding

边框
  • border-style

  • border-width

  • border-color:transparent 有宽度的不可见边框

  • border-radius: 边框圆角 四个角顺序是 top right bottom left

  • box-shadow:边框阴影

  • border-image-source 用在边框的图片的路径。

  • border-image-slice 图片边框向内偏移。

  • border-image-width 图片边框的宽度。

  • border-image-outset 边框图像区域超出边框的量。

  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

外边距
  • margin

文本外观

文本属性
  • text-indent: -5em 2% 2px 用于块元素,行元素可以用 padding,可以继承

  • text-align: left,center,right 行内元素

  • word-spacing: 单词之间距离

  • letter-spacing:字间距离

  • text-transform:capitalize uppercase lowercase

  • text-decoration:underline overline(上划线) line-through(穿透线) blink(闪烁)文本装饰

  • direction:ltr 和 rtl 文本方向

  • text-shadow:5px 5px 5px #FF0000;

  • word-wrap: 长单词,(超过一行)允许截断到下一行 break-word /normal

  • text-outline: 文本轮廓

字体
  • font-family: 使用字体系列,字体名中有空格时 要用引号

  • font-style:字体风格 normal italic(normal 版本的倾斜改动) oblique(字体的倾斜版本)

  • font-variant:字体变形 small-caps (另一种格式的大写英文)

  • font-weigth: bold normal

  • font-size:默认大小是 16 像素 (16px=1em(当前尺寸,当前是 16px))

    自定义字体

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    
      @font-face
      {
          font-family: myFirstFont;
          src: url('Sansation_Light.ttf'),
               url('Sansation_Light.eot'); /* IE9+ */
      }
    
      div
      {
          font-family:myFirstFont;
      }

链接外观

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

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

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

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

列表外观

  • list-style-type: square(方块)circle,decimal

  • list-style-image: url(xxx.gif) 点,用图像替代

  • list-style-position: [ outside ,inside ]

定位

  • position 定位relative,absolute

  • float 浮动

  • z-index 堆叠顺序,正数,接近用户,负数,远离用户

简单特效

变换
  • 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 规定过渡效果何时开始

初始化样式

 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;}