CSS整理

最新推荐文章于 2021-06-03 04:54:21 发布

SeeBro

最新推荐文章于 2021-06-03 04:54:21 发布

阅读量1.3k

点赞数

分类专栏： web 文章标签： css class url border table input

本文链接：https://blog.csdn.net/x954818696/article/details/7208494

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS整理

排版

排版专用标记:<div>与<span>

<div>占用一行，所以多个<div>会换行

<span>占用一行中的一块，因此可多个<span>显示在一行

调用css样式

内嵌式排版样本:

内嵌式排版中所有的样式定义都必须在<style>..</style> 之间,而<style>..</style>又

必须在<head>..</head>之间.

与其功能,又可以分为三种,

1. 标记定义型

2. class 定义型

3. id 定义型

标记定义型格式:

<head>

标记名称{属性1:属性值1;属性2:属性值2;}

标记名称{属性1:属性值2;属性2:属性值2;}

</style>

</head>

<body>

<标记名称>…</标记名称>

</body>

class定义型格式:

<head>

.定义名称{属性1:属性值1;属性2:属性值2;}

.定义名称1,.定义名称2{属性1:属性值1;属性2:属性值2;}

</style>

</head>

<body>

<标记名称class=”定义名称”>…</标记名称>

</body>

id 定义型格式:

<head>

<style>

#定义名称{属性1:属性值1;属性2:属性值2;}

#定义名称1,#定义名称2{属性1:属性值1;属性2:属性值2;}

</style>

</head>

<body>

<标记名称id=”定义名称”>…</标记名称>

</body>

排版定义的优先级:

CSS 规定,范围越小,优先级越高.

由小到大排列:

1. 行内

2. class 和id 定义型

3. 标记定义行

id 的优先级高于class 级.

外部排版样式定义:

独立的样式排版:

标记名称{属性1:属性值1;属性2:属性值2;}

.定义名称{属性1:属性值1;属性2:属性值2;}

在<head>…</head>之间使用<link>

格式:

<head>

</head>

在<head>…</head>之间使用import

格式：

<head>

@import "style.css"

</style>

</head>

CSS文字处理

CSS 中长度与颜色

长度单位说明

in 英寸

cm 公分

mm 公里

cm 以目前字体高度为单位

ex 以小写字母高度为单位（大部分不支持）

pt 1pt/72英寸

pc 1pc/12pt

px 像素（推荐使用）

颜色单位：说明

十六进制如：color:#ff0000

颜色名称如：color:red

三原色单位如：rgb(255,0,0)

一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。

每个值域在0－255之间

CSS 中的文字属性

属性名称属性值说明

font-style normal 正常显示

italic 斜体

font-variant normal 正常显示

small-caps 将英文大小写字母写调为同宽

font-weight normal 正常显示

bold 粗体

font-size 像素字体大小

百分比字体大小

font-family 字体名称设置字体名称

font属性简化的使用方法：

font:是否斜体是否同宽是否粗体大小字体名称

例如:font:italicbold 200 隶书；

CSS中的文本属性

属性名称属性值说明

color 十六进制颜色

英文名称颜色

三原色单位颜色

letter-spacing（字符间隔）

normal 正常显示

word-spacing（单词间隔）

normal 正常显示

white-space normal 文本自动处理换行

pre 换行和空白受保护

nowrap 强制在同一行显示

text-align left 文字靠左

right 文字靠右

center 文字靠中

text-decoration none 正常显示

underline 加上下划线

overline 加顶线

line-through 加删除线

text-indent 长度首行缩进

百分比同上

line-height 像素行高

数字/百分比行高

text-transform none 正常显示可以包含大，小字符

capitalize字符串第一个字符大写

uppercase设置大写字符

lowercase设置小写字符

vertical-align

sub 设置文字为下标。

super 设置文字为上标。

top 元件往上端靠齐。

middle设置文字是在中线位置。

bottom元件往下端靠齐。

CSS中背景的使用

属性名称属性值说明

background-attachment scroll 设置背景图像会随视窗滚动条的移动而移动。

fixed 设置背景图像不会随视窗滚动条的移动而移动。

background-color 十六进制background-color:#ff0000;

英文名称background-color:red;

三原色background-color:rgb(255,0,0)

transparent background-color:transparent;透明

background-image URL background-image:url("bg.jpg")

背景图片

none不设置背景图片

background-position top left 设置背景图案出现在上左方。

topcenter 设置背景图案出现在上方中间。

topright 设置背景图案出现在上右方。

centerleft 设置背景图案出现在中间左方。

centercenter 设置背景图案出现在IE中间。

centerright 设置背景图案出现中间右方。

bottomleft 设置背景图案出现在下左方。

bottom设置背景图案出现在正下方。

bottom right 设置背景图案出现在下右方。

background-repeat repeat 将背景图案填满整个背景。

repeat-x将背景图案在水平方向添满。

repeat-y将背景图案在垂直方向添满。

no-repeat图案只出现一次。

背景图案简化方案：

background:颜色背景图片repeat attachment position

给标题加上一个小图标

H1 {

Padding-left: 20px;

Background: url (bullet.gif) no-repeat leftcenter;

}

如果希望使用百分比而不使用关键字,则0 50%这样就实现了垂直居中

圆顶角

<h2>Headline</h2>

<p>Content</p>

</div>

.box {

Width: 418px;

Background: #ccc url(bottom.gif) no-repeatleft bottom;

}

.box h2 {

Background:url(top.gif) no-repeat left top;

}

如果不希望碰到边界,加上填充.

.box h2 {

Padding:10px 20px 0 20px;

}

.box p {

Padding:0 20px 10px 20px;

}

简单的CSS 阴影效果

</div>

.img-wrapper {

background: url(images/shadow.gif)no-repeat bottom right;

clear: right;

float: left;

position: relative;

margin: 10px 0 0 10px;

}

.img-wrapper img {

display: block;

margin: -5px 5px 5px -5px;

position: relative;

}

CSS中列表的使用

属性名称属性值说明

list-style-type none 无符号

disc 实体的小圆点。

circle空心的小圆点。

square实心的小方块。

decimal1,2,3...

lower-romani,ii,iii...

upper-romanI,II,III...

lower-alphaa,b,c,d,e...

upper-alphaA,B,C,D,E...

list-style-position inside 清单项目较往右移。

outside 清单项目正常显示。

list-style-image URL list-style-image:url(lmk.gif)

none不会显示任何图象

清单的简化设置：

list-style:circle inside url("arrow.gif")

1. 内边距与外边距

Ul {

Margin: 0;

Padding: 0;

}

2. 使用图片作为列表图标

Ul {

Margin: 0;

Padding:0;

Width: 200px;

List-style-image:url(images/list.gif);

Line-height: 150%;

}

3. 以背景图片作为项目列表图标

Ul {

List-style-type:none;

}

Li {

Background: url(images/list.gif) no-repeatleft center;

Padding: 0 0 0 25px;

}

4. 内联列表

Ul {

List-style-type:disc;

}

Li {

Display: inline;

}

这里的display 属性是块级值的设置,定义是否要成为块.

Inline 是是内联,block 是区块.

5. 背景图片和内联列表

Ul {

List-style-type: none;

}

Li {

Display:inline;

Background url(images/list.gif) no-repeatleft center;

Margin: 0 0 0 10px;

Padding: 0 0 0 15px;

}

6.垂直导航栏

<div>

<ul>

<li><ahref="#">Drubjs Menu</a></li>

<li><a href="#">Spirits</a></li>

<li><ahref="#">Lemonade</a></li>

<li><ahref="#">Coffee</a></li>

</ul>

</div>

Ul {

List-style-type:none;

Margin:5px;

Padding:2px

Width: 160px;

Font-size: 12px;

}

Li {

Background: #ddd;

Margin: 0;

Padding: 2px 10px;

Border-left: 1px solid #fff;

Border-top: 1px solid #fff;

Border-right: 1px solid #666;

Border-bottom: 1px solid #aaa;

}

7.创建垂直翻转的列表

ul {

margin: 0;

padding: 0;

list-style-type: none;

}

Ul a{

Display: block;

Width: 200px;

Height: 40px; /*39px*/

Line-height: 40px; /*39px*/

Color:# 000;

Text-decoration: none;

Background: #94b8E9url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/

Text-indent: 50px;

}

a:hover {

background-position: right bottom;

}

8.创建水平导航条

ul {

Margin: 0;

Padding: 0 2em;

List-style: none;

line-height: 2.1em;

Width: 720px;

Background: #faa819url(images/mainNavBg.gif) repeat-x;

}

ul li {

float: left;

}

ul a {

color:#fff;

padding: 0 10px;

background: url(images/divider.gif)repeat-y left top;

text-decoration: none;

}

CSS 中边框的使用

属性名称属性值说明

border-color 十六进制可依序设置上，右，下，左线颜色

英文名称border-color:red(四边均为红色)

三原色border-color:red green(上下为红色，左右为绿色)

border-color: red green blue(上为红色、左右为绿色、下为蓝色)

border-color: red green blue yellow(上右下左分别为红绿蓝黄)

border-style none 不显示边线

dotted点线

dashed虚线

solid实线

double双线

border-width 长度border-width:0.2cm0.3cm 0.4cm 0.5cm;

border-width:1 2 3 4;

简化方案：border:形态长度颜色

例如border:1pxsolid black;

CSS 中边界的使用

padding 属性介绍

属性名称属性值说明

padding-bottom 长度/百分比元件下端边线的空隙

padding-left 长度/百分比元件左端边线的空隙

padding-right 长度/百分比元件右端边线的空隙

padding-top 长度/百分比元件上端边线的空隙

简易写法：padding:10px

padding:2px 4px

padding:2px 6px 10px

padding:1px 2px 3px 4px

margin 系列属性介绍

属性名称属性值说明

margin-bottom auto 自动调整空隙

长度/百分比设置下端空隙

margin-left auto 自动调整空隙

长度/百分比设置左端空隙

margin-right auto 自动调整空隙

长度/百分比设置右端空隙

margin-top auto 自动调整空隙

长度/百分比设置上端空隙

简化方案：margin:2px4px

margin:2px 6px 10px

margin:1px 2px 3px 4px

常用网页顶格设置：margin:0;

CSS 中区块的使用

属性名称属性值说明

width 像素/百分比区块的宽度

auto

height 像素/百分比区块的高度

auto

min-height 像素像素/百分比区块最小高度

auto

max-height 像素像素/百分比区块最大高度

auto

min-width 像素像素/百分比区块最小宽度

auto

max-width 像素像素/百分比区块最大宽度

auto

CSS 中浮动的使用

属性名称属性值说明

float none 正常显示

left 左浮动

right 右浮动

clear none 允许两边浮动

left 不允许左边浮动

right 不允许右边浮动

both 不允许两边浮动

CSS 中定位的使用

属性名称属性值说明

position relative 设置区块基准点为左上角

absolute 设置网页的为基准点左上角

static 无设置

left auto 以基准点定位在左边像素/百分比定位在左边

top auto 以基准点定位在上边像素/百分比定位在上边

right auto 以基准点定位在右边像素/百分比定位在右边

bottom auto 以基准点定位在下边像素/百分比定位在下边

数字

z-index auto 数字数字越大越往上层

数字

CSS 中溢出的使用

属性名称属性值说明

overflow visible 不剪切内容也不添加滚动条

auto 在必需时对象内容才会被裁切或显示滚动条

hidden 不显示超过对象尺寸的内容

scroll 总是显示滚动条

overflow-x (同上)

overflow-y (同上)

CSS 中滚动条的使用

属性名称属性值说明

scrollbar-3dlight-color 颜色/十六进制滚动条亮边框

scrollbar-highlight-color 颜色/十六进制滚动条3D 界面亮边

scrollbar-face-color 颜色/十六进制滚动条3D 表面

scrollbar-arrow-color 颜色/十六进制滚动条方向箭头

scrollbar-shadow-color 颜色/十六进制滚动条3D 暗边

scrollbar-darkshadow-color 颜色/十六进制滚动条暗边框

scrollbar-base-color 颜色/十六进制滚动条基准颜色

scrollbar-track-color 颜色/十六进制滚动条的拖动区域

CSS 中链接的使用

超链接伪类属性

a:link 表示该超链接文字尚未被点选

a:visited 表示该超链接文字已被点选过

a:active 表示该超链接文字正被点选,但未被放开

a:hover 表示当鼠标停留在文字上

1.给链接加上边框

A:link {

Color: #f00;

Text-decoration: none;

Border-bottom: 1px dashed #333;

Line-height: 150%;

}

2.在文章段落中加上超级链接

A:link {

Color: #f00;

Text-decoration: none;

Border: 1px solid #333;

Background: #ccc;

Padding: 2px;

Line-height: 150%;

}

3. 用背景图象添加记号

A:link {

Color:#f00;

Padding: 0 15px 0 0;

Background:url(images/arrow.gif) no-repeatright center;

}

A:visited {

Color:# 999;

Padding: 0 15px 0 0;

Background:url(images/checkmark.gif)no-repeat right center;

}

4.利用派生来影响链接

P a:link, p a:visited, p a:hover, pa:active {

Color:#f00;

}

Ul a {

Color:# 000;

}

5.利用图片作为下划线

A:link, a:visited {

Color: #666;

Text-decoration:none;

Background: url(images/underline1.gif)repeat-x left bottom;

}

A:hover, a:active {

Background:url(images/underline1-hover.gif);

}

6.突出显示不同类型的链接

.external {

Background:url(images/externalLink.gif)no-repeat right top;

Padding-right: 10px;

}

7.使用属性选择器来做链接

a[href^="http:"] {

background:url(images/externalLink.gif)no-repeat right top;

padding-right: 10px;

}

a[href^="mailto:"] {

background:url(images/email.png) no-repeatright top;

padding-right: 13px;

}

8.创建按钮和翻转

a {

Display: block;

Width: 6em;

Padding: 02.em;

Line-height: 1.4;

Background-color: #94b8e9;

Border: 1px solid black;

Color: #000;

Text-decoration: none;

Text-align: center;

}

a:hover {

background-color: #369;

color:#fff;

}

9.具有图象的翻转

a {

Display: block;

Width: 200px;

Height: 40px;

Line-height: 40px;

Background-color: #94b8e9;

Color: #000;

Text-decoration: none;

Text-indent:50px;

Background: #94b8ea url(images/button.gif)no-repeat left top;

}

A:hover {

Background: #369url(images/button_over.gif) no-repeat left top;

Color: #fff;

}

10.以访问链接样式

<ul>

<li><ahref="http://www.andybudd.com/">Andy Budd'sBlogography</a></li>

<li><ahref="http://www.stuffandnonsense.co.uk/">Stuff andNonsense</a></li>

<li><ahref="http://www.hicksdesign.co.uk/journal/">HicksDesign</a></li>

<li><ahref="http://www.clagnut.com/">Clagnut</a></li>

<li><ahref="http://adactio.com/journal/">Adactio</a></li>

<li><ahref="http://www.allinthehead.com/">All In TheHead</a></li>

<li><ahref="http://www.markboulton.co.uk/journal/">MarkBoulton</a></li>

<li><ahref="http://www.ian-lloyd.com/">Ian Lloyd</a></li>

</ul>

ul {

list-style:none;

}

li {

margin: 5px 0;

}

li a {

display: block;

width: 300px;

height: 30px;

line-height: 30px;

color: #000;

text-decoration: none;

background: #94B8E9 url(images/visited.gif)no-repeat left top;

text-indent: 10px;

}

li a:visited {

background-position: right top;

}

11.纯css 工具提示

<p>

<ahref="http://www.andybudd.com/" class="tooltip">AndyBudd<span> (This website

rocks) </span></a> is a webdeveloper based in Brighton England.

</p>

a.tooltip {

position: relative;

}

a.tooltip span {

display: none;

}

a.tooltip:hover {

font-size: 100%; /* Fixes bug in IE5.x/Win*/

}

a.tooltip:hover span {

display:block;

position:absolute;

top:1em;

left:2em;

padding: 0.2em 0.6em;

border:1px solid #996633;

background-color:#FFFF66;

color:# 000;

}

CSS 中光标的使用

属性名称属性值说明

cursor auto 默认替换光标

crosshair 光标是十子形

default 光标是箭头

hand/pointer 光标是手形

move 光标是移动的符号

text 输入文字的符号

wait 漏斗

help 帮助

curso:url(“自定义光标.ani”);

CSS 中DHTML 的使用

属性名称属性值说明

behavior url DHTML 文件

CSS 中缩放的使用

属性名称属性值说明

zoom normal 使用对象的实际尺寸

百分数/浮点实数放大缩小

CSS 滤镜

Filter 属性

设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。

内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position属

性为absolute，或者设定display 属性为block。若要在img 对象上应用shadow 滤镜，可以在该对象img 对象的父容器上应用。

Alpha滤镜的使用

属性值说明

opacity0-100 对象的亮度

style1,2,3 滤镜的样式

Blur滤镜的使用

属性值说明

addtrue/false 是否印象派

direction0-360 角度

strength数字模糊度

Fliph、Flipv 滤镜

无参数值

DropShadow滤镜

属性值说明

color颜色阴影颜色

offx数字x 坐标偏移

offy数字y 坐标偏移

positivetrue/false 是否建立透明

Glow滤镜

属性值说明

color颜色发光颜色

strength数字发光厚度

Gray,Invert,Xray 滤镜

无参数值

Shadow滤镜

属性值说明

color颜色阴影颜色

direction0-360 阴影方向

strength数字

CSS表格

1. 简单表格

table {

width:auto;

border-collapse:collapse;

margin-left:20px;

border:1px solid black;

}

td,th {

width:50px;

border:1px solid black;

padding:5px;

background:gold;

text-align:center;

vertical-align:middle;

text-indent:5px;

}

<table>

</table>

<table>

</table>

2. 行组和列组

table.example1 thead {

background:orange;

color:black;

}

table.example1 tbody {

background:gold;

color:black;

}

table.example1 tfoot {

background:firebrick;

color:white;

}

*.col1 {

background:wheat;

}

*.col2 {

background:gold;

}

*.col3 {

background:orange;

}

*.col4 {

background:tomato;

}

*.col5 {

background:firebrick;

}

*.col6 {

background:black;

color:white;

}

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>

</tfoot>

</table>

<table>

</colgroup>

</table>

3. 表格选择符

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

4. 分隔的边框

table {

border-collapse:separate;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

}

.boxed-table {

border:1px solid black;

}

.boxed-cells td {

border:1px solid black;

}

.boxed-cells td.x {

border:none;

}

<h2>封装的表格</h2>

<tr><td>7</td><td>8</td><td></td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<tr><td>7</td><td>8</td><td></td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<tr><td>7</td><td>8</td><td></td><td> </td><td

class="x">11</td></tr>

</table>

5. 重复的边框

table {

border-collapse:collapse;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

}

.boxed-table {

border:1px solid black;

}

.boxed-cells td {

border:1px solid black;

}

.boxed-cells td.x {

border:none;

}

<h2>封装的表格</h2>

<tr><td>7</td><td>8</td><td></td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格</h2>

<tr><td>7</td><td>8</td><td></td><td> </td><td

class="x">11</td></tr>

</table>

<h2>封装的单元格和表格</h2>

<tr><td>7</td><td>8</td><td></td><td> </td><td

class="x">11</td></tr>

</table>

6. 隐藏和删除单元格、行、列

table {

border-collapse:separate;

}

td,th {

width:50px;

padding:5px;

text-align:center;

vertical-align:middle;

background:gold;

text-indent:5px;

border:1px solid black;

}

.hidden {

visibility:hidden;

}

.delete {

display:none;

}

<table>

</colgroup>

<tr>

<tdclass="hidden">5</td>

<tdclass="hidden">6</td>

</table>

7. 垂直对齐数据

.x {

vertical-align:middle;

}

CSS 构造表单

1.表单标签的使用

2.去掉默认的表单间隔

Form {

Margin: 0;

Padding: 0;

}

3.给文本框添加漂亮的边框

Input,textarea {

Border: 3px double #333;

}

4.给下拉菜单设置背景色

select {

background:red;

}

5.给文本区域添加滚动条

textarea {

SCROLLBAR-FACE-COLOR: #333;

SCROLLBAR-HIGHLIGHT-COLOR: #666;

SCROLLBAR-SHADOW-COLOR: #333;

SCROLLBAR-3DLIGHT-COLOR: #999;

SCROLLBAR-ARROW-COLOR: #999;

SCROLLBAR-TRACK-COLOR: #000;

SCROLLBAR-DARKSHADOW-COLOR: #000;

}

6.表单外边框设置fieldset legend

Fieldset {

Margin:0 0 10px 0;

Padding: 5px;

Border: 1px solid #333;

}

Legend {

Background-color: #ddd;

Margin:0;

Padding: 5px;

Border-style: solid;

Border-width: 1px;

Border-color: #fff #aaa #666 #fff;

}

Fieldset {

Background: #ddd;

}

7.结构化表单布局

<label for="username"> 用户名： </label><inputtype="text"

id="username"class="input" />

</div>

<label for="password"> 密码： </label><inputtype="text"

id="password"class="input" />

</div>

<labelfor="passwordVerify"> 确认密码： </label><input

type="text"id="passwordVerify" class="input" />

</div>

</fieldset>

<label for="nickname"> 昵称： </label><inputtype="text"

id="nickname" />

</div>

<label for="email"class="hint"> 电子邮件： </label><input

type="text" id="email"/>

</div>

<input type="submit"value="注册" /><input type="button"

value="返回" />

</div>

</fieldset>

</form>

#regForm fieldset {

padding:0 20px 10px;

border:0;

border-top:1px #d0d0bf solid;

}

#regForm legend {

padding:0 10px;

font-weight:bold;

}

#regForm .dataArea {

padding:2px 0;

}

#regForm .frist {

padding:8px 0 2px;

}

#regForm .subArea input {

padding:1px 4px;

}

#regForm label {

width:110px;

text-align:right;

float:left;

}

CSS整理

CSS整理

目录

排版

调用css样式

CSS文字处理

CSS中背景的使用

CSS中列表的使用

CSS 中边框的使用

CSS 中边界的使用

CSS 中区块的使用

CSS 中浮动的使用

CSS 中定位的使用

CSS 中溢出的使用

CSS 中滚动条的使用

CSS 中链接的使用

CSS 中光标的使用

CSS 中DHTML 的使用

CSS 中缩放的使用

CSS 滤镜

CSS表格

CSS 构造表单