css应用实例

目录：

˙01.

˙02.

˙03.

˙04.

˙05.

˙06.

˙07.

˙08.

˙09.

˙10.

˙11.

˙12.

˙13.

1.css背景

　　wKioL1jSDFfjCKuCAACe2BWW0CI450.jpg

1.1.设置元素背景颜色

　　为元素设置背景颜色

     
          body {background-color: black}    h1 {background-color: #E3E3D2}    p {background-color: rgb(227,227,178)}

1.2.设置文本背景色
　　为文本中部分内容设定背景颜色

     
          span.caution{background-color:yellow}......
      
    
       
        使用说明： 该产品属于

1.3.以图像作为背景

  默认跟文本一样，作为网页的内容，而且自动重叠。随着滚动条拖动而（象文字内容一样）移动。

     
          body {background-p_w_picpath:url(back.png);}

1.4.图像的显示效果
1.4.1.重叠样式

　　默认效果

background-repeat: repeat;

1.4.2.竖直重叠样式

background-repeat: repeat-y;

1.4.3.水平重叠样式

background-repeat: repeat-x;

1.4.4.不重叠

background-repeat: no-repeat;

1.4.5.设置背景图像（静止效果）

　　背景不会随着滚动条拖动而发生移动，而且背景不需要重叠

  background-repeat:no-repeat;  background-p_w_upload:fixed;

　　为背景图片设定位置

background-repeat: no-repeat;background-p_w_upload:fixed;background-position: 55px 370px;

1.4.6.一步设置背景属性

background:  url(1.png) no-repeat fixed center #13e5d0;

2.css文本控制

2.1.文本颜色

h1{color: blue;}h2{color: #03F2EE;}

2.2.字符间距

h1 {letter-spacing: -3px;}h2 {letter-spacing: 0px;}

　　英文单词间距

p {word-spacing: 20px;}

2.3.行间距

line-height: 3;line-height: 3px;line-height: 30%;

2.4.文本对齐

.mainwebfont h1{text-align: center;}.mainwebfont p{text-align: left;}.mainwebfont h3{text-align: right;}

2.5.文本修饰

　　去掉链接的下划线

a {text-decoration: none;}

2.6.首行缩进

　　段落首行缩进3个中文字符

p {text-indent: 3em;}

2.7.英文字母

　　统一显示大写字母、小写字母、首字母大写

  p.up {text-transform: uppercase;}  p.lo {text-transform: lowercase;}  p.ca {text-transform: capitalize;}

3.css字体控制

3.1.设置文本字体

p {font-family: 华文彩云;}p {font-family: 华文细黑;}p {font-family: 宋体;}p {font-family: 仿宋;}p {font-family: 隶书;}

3.2.字体大小

h2 {font-size: 200%;}p {font-size: 59px;}

3.3.字体风格

　　斜体字

p {font-style: italic;}

3.4.字体加粗

p {font-weight: bold;}

4.css边框设置

4.1.边框样式

　　属性border-style控制边框样式，默认无边框（none）

　　none：无边框、dotted：点状边框、dashed：虚线边框、solid：实线边框、……

p.dot {border-style: dotted;}

　　边框宽度

border-width: 5px;

　　边框颜色

border-color: black;

4.2.下边框

　　只显示下边框，点状边框

border-bottom-style: dotted;

　　边框宽度，thin表示细，thick表示粗点

border-bottom-width: 5px;border-bottom-width: thin;

　　一行搞定下边框

border-bottom:thin dotted black;

5.css列表样式

　　属性list-style-type设置标志类型、list-style-p_w_picpath把图像设为标志

5.1.自带标记样式

　　无序列表标记，disc：默认，实心小圆点、circle：空心圆、square：实心方块、decimal：数字

　　有序列表标记，disc：默认，实心小圆点、circle：空心圆、square：实心方块、decimal：数字

ul.circle {list-style-type: circle;}

5.2.图像作为样式标记

ul {list-style-p_w_picpath: url('3.png');}

6.css表格应用

　　属性介绍：border-collapse、border-spacing、caption-side、empty-cells、table-layout。分别代表：是否把表格边框合并为单一的边框、 分割单元格边框的距离、 标题的位置、 显示为空单元格、 。

　　最基本的就是前景色、背景色

th{background-color: red; color: yellow;}

6.1.边框线

　　表格边框为红色实线（宽度、类型、颜色）

table,th,td{border: 1px solid blue;}

　　单一边框

table {border-collapse: collapse;}

6.2.表格大小

　　表格宽度70%、标题高度、数据行高度

table{width: 70%;}th{height: 35px;}td{height: 22px;}text-align:right;

6.3.表格中文本对齐

　　右对齐

td{text-align: right; vertical-align: bottom;}

6.4.表格中文本对齐

　　设置前景色、背景色

td {background-color: red; color: yellow;}

6.5.设置表格边框之间的空白

border-spacing: 7px;

6.6.设置表格标题的位置

　　默认在上边

     
          标题    单行
     
caption{caption-side:bottom;}

6.7.表格布局

　　属性tablelayout用来定义布局格式，就是表格会不会随着内容多少自动调整。取值automatic、fixed，表示列宽度有单元格内容决定、由表格宽度、列宽度决定。

7.轮廓展示

　　属性outline定义元素的轮廓线格式

p{outline: #50EED0 dotted thick;}

　　分别设置时，属性分别表示：outline-color、outline-style、outline-width。

8.尺寸表示

　　既可以控制元素的高度、宽度，同样也可以设定行间距。

　　指定宽度用width，指定高度用height。

img .one{height: 120px;}img .two{height: 50%;}img .three{height: auto;}

　　同样规定段落宽度

p .one{width: 120px;}p .two{width: 50%;}p .three{width: auto;}

　　设定行间距

p .da{line-height: 30px;}p .xiao {line-height: 20px;}

9.对齐

9.1.对齐块元素内容

　　块元素有：段落标记（<p>）、标题标记（<h1><h2>...）、切块标记（<div>）。

　　文本内容对齐可以由属性text-align定义。

h1 {text-align: center;}

9.2.对齐块元素

　　使用margin属性把左右设置为auto，达到对齐快元素内容的目的。

div {width: 70%; margin: auto;}

9.3.对齐元素

　　使用绝对定位元素

div {position: absolute; left: 0; width: 120px;}

10.

　　定位的意思，用来调整“元素框”需要出现的位置。CSS有三种基本的定位机制：文档流、浮动、绝对定位。默认情况下都是普通流，元素的位置由html中的位置依次排列。

　　属性position的值：static、relative、absolute、fixed。分别表示：文档流、元素框偏移某个距离、脱离文档流重新定位、。

10.1.相对定位

　　相对正常位置，移动了一些。

h2{position: relative; left: -35px}

10.2.绝对定位

　　移动默认位置的标题

h2{position: absolute; left:100px; top:150px;}

10.3.固定位置

　　移动默认位置的标题

h2{position: fixed; top: 70px; right: 35px;}

11.分类属性

11.1.display

　　定义以内联元素显示、块元素显示

p {display: inline;}span {display: block;}

11.2.float

　　可以把一幅图像浮动于段落一侧

img{float: right;}

　　清除元素侧面的浮动元素

clear:right;

12.伪类

暂略

13.伪元素

暂略