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背景


  css 功能小实例_第1张图片


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.对齐块元素内容

  块元素有:段落标记(

)、标题标记(

...)、切块标记(
)。

  文本内容对齐可以由属性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.伪元素


暂略




css 功能小实例_第2张图片