css应用实例

来自css的70个实例

目录：

˙01.css背景

˙02.文本控制

˙03.css字体控制

˙04.css边框设置

˙05.css列表样式

˙06.css表格应用

˙07.轮廓展示

˙08.元素尺寸控制

˙09.对齐方式

˙10.css定位

˙11.css分类属性

˙12.12

˙13.13


1.css背景

　　wKioL1jSDFfjCKuCAACe2BWW0CI450.jpg


1.1.设置元素背景颜色
　　为元素设置背景颜色

<style type="text/css">
    body {background-color: black}
    h1 {background-color: #E3E3D2}
    p {background-color: rgb(227,227,178)}
</style>


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

<style type="text/css">
    span.caution{background-color:yellow}
</style>
......
<p>
    <span class="highlight">使用说明：</span> 该产品属于
</p>


1.3.以图像作为背景

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

<style type="text/css">
    body {background-p_w_picpath:url(back.png);}
</style>


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.设置表格标题的位置

　　默认在上边

<table border="1">
    <caption>标题</caption>
    <tr><td>单行</td></tr>
</table>
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.伪元素

暂略




wKiom1jJ_jihZXFhAABm6i-XhL0903.jpg