CSS样式一览表

CSS样式

CSS添加方法

CSS添加方法—行内

段落文字

CSS添加方法—内嵌样式

p{

color:red; /*设置字体颜色*/

}

CSS添加方法—外部样式表

1.多重样式可以层叠，可以覆盖

2.样式的优先级按照“就近原则”:

行内样式> 内嵌样式> 链接样式>浏览器默认样式

CSS选择器

标签选择器 p

h1 {font:“黑体";font-size:20px;}

p {color:red; font-size:16px;}

hr {width:200px;}

类别选择器 .one

/*CSS*/

.one{ font-size:18px; }

/*HTML*/

类别1

ID选择器 #left

/*CSS*/

#one{font-size:12px;}

#two{font-size:24px;}

/*HTML*/

文字1

文字2

嵌套声明 p□span

/*CSS*/

p span{

color:red;

}

/*HTML*/

123 456

集体声明 p,h1

/*CSS*/

h1,

p { text-align:center; }

/*HTML*/

欢迎

访问

全局声明 *

/*CSS*/

*{

text-align:center;

}

/*HTML*/

欢迎访问

欢迎访问

欢迎访问

CSS样式(I) 文本

单位

单位

描述

px

像素

em

自动适应用户所使用的字体

%

百分比颜色

颜色

描述

red,blue,green

rgb(x,x,x)

RGB 值 每个颜色分量取值0-255

rgb(x%, x%, x%)

RGB 百分比值 0%-100%

rgba(x,x,x,x)

RGB 值，透明度 a值:0.0-1.0

#rrggbb

红色: #ff0000 红色: #f00 去掉重复位文本

属性描述

取值

color 文本颜色

red , #f00 ，rgb(255,0,0)

letter-spacing 字符间距

2px , -3px

line-height 行高

14px 1.5em 120%

text-align 对齐

center left right justify

text-decoration 装饰线

none overline underline line-through

text-indent 首行缩进

2em字体font

属性 描述

Value

font 在一个声明中设置所有的字体属性

font: bold 18px ‘幼圆’

font-family 字体系列

网页安全字体 font-family: “Hiragino Sans GB”, “Microsoft YaHei”, sans-serif;

font-size 字号

14px 120%

font-style 斜体

italic

font-weight 粗体

bold

font属性简化的使用方法

font: 斜体 粗体 字号/行高 字体

font: italic bold 16px/1.5em ‘宋体’;

CSS样式(II) 背景与超链接

CSS背景

背景属性

取值

背景颜色 background-color:

red , #f00 ，rgb(255,0,0)

背景图片 background-image:

url(“logo.jpg”)

背景重复 background-repeat:

repeat repeat-x repeat-y no-repeat

背景 background

颜色 图片 repeatCSS超链接

链接的四种状态

描述

a:link

普通的、未被访问的链接

a:visited

用户已访问的链接

a:hover

鼠标指针位于链接的上方悬停

a:active

链接被点击的时刻

按照以下次序:

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

CSS样式(III) 列表与表格

列表List

属性

描述

list-style

所有用于列表的属性 设置于一个声明中

list-style-image

为列表项标志设置图像 url(“images/bullet1.gif”);

list-style-position

标志的位置 list-style-position: inside ;list-style-position: outside;

list-style-type

标志的类型list-style-type

值

描述

none

无标记

disc

默认，标记是实心圆

circle

标记是空心圆

square

标记是实心方块

decimal

标记是数字

lower-roman

小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman

大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha

小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha

大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-Greek

小写希腊字母(alpha, beta, gamma, 等。)

lower-latin

小写拉丁字母(a, b, c, d, e, 等。)

upper-latin

大写拉丁字母(A, B, C, D, E, 等。)CSS表格

CSS表格

描述

width , height

设置表格大小

border 属性

边框 border: 1px solid #eee;

border-collapse 属性

合并边框 border-collapse:collapse;

奇偶选择器

:nth-child(odd|even)

CSS布局与定位

盒子模型(I) overflow和border

盒子模型组成

overflow属性

overflow属性描述

取值

超出部分不可见

hidden

显示滚动条

scroll

如果有超出部分，显示滚动条

autoborder属性

border属性

描述

border-width:

px、 thin、medium、thick

border-style:

dashed、dotted、solid、double

border-color:

颜色

border:

width style color

盒子模型(II) padding和margin

对浏览器默认的设置清零

*{

margin: 0;

padding: 0; }

padding margin 属性

组成

内边距 外边距

上右下左

padding:5px; margin:5px;

上

padding-top :10% ; margin-top :10% ;

左

padding-left ；margin-left ；

右

padding-right；margin-right ；

下

padding-bottom；margin-bottom；

margin合并

水平居中

图片、文字水平居中 text-align:center;

div水平居中 margin:0 auto;

font-size：0; 解决图片自动生成的空隙

CSS定位机制 display、float和position

文档流定位 flow

元素分类——block

描述

block元素特点

1.独占一行 2.元素的height、width、margin、padding都可设置

常见的block元素

div、p、h1…h6、 ol、ul、table、form

将元素显示为block元素 从而使元素具有块状元素特点

display:block;

元素分类——inline

描述

inline元素特点

inline元素之间有一个间距问题

常见的inline元素

span a

将元素显示为inline元素 从而使元素具有行内元素特点

display:inline;

元素分类——inline-block

描述

inline-block元素特点

1.不单独占用一行 2.元素的height、width、margin、padding都可设置

常见的inline-block元素

img

将元素显示为inline-block元素 从而使元素具有行内和块状元素特点

display:inline-block;

元素不会被显示 display: none；

浮动定位 float

浮动定位

取值

float属性

left、right

clear属性

left、right、both层定位 layer

position属性

描述

static:默认值

没有定位，元素出现在正常的流中 top, bottom, left, right ， z-index无效

fixed:固定定位

相对于浏览器窗口进行定位top, bottom, left, right ， z-index 有效

relative:相对定位

相对于其直接父元素进行定位 top,bottom,left,right，z-index有效

absolute:绝对定位

相对于 static 定位以外的第一个父元素 进行定位top, bottom, left, right ， z-index 有效

相对定位

绝对定位

relative

absolute

文档流中原位置保留

文档流中原位置不保留

定位参照物直接父元素

定位参照物非static的父元素

CSS3

CSS3(I) 圆角边框与阴影

border-radius属性

圆角边框border-radius

描述

border-radius: 25px;

上右下左25px 半径为25px的圆

border-radius: 20px 12px 24px 32px;

上右下左圆角为25px 12px 24px 32px

border-top-left-radius

左上角的形状

border-top-right-radius

右上角的形状

border-bottom-left-radius

左下角的形状

border-bottom-right-radius

右下角的形状阴影box-shadow

盒子阴影：水平位移10px，垂直位移10px，阴影模糊5px，阴影颜色#888

box-shadow: 10px 10px 5px #888;

CSS3(II) 文本与文字

text-shadow属性

text-shadow属性 :水平偏移 垂直偏移 阴影大小 颜色

h1 {

text-shadow:2px 2px #FF0000;

}

word-wrap属性

允许长单词、URL强制进行换行

word-wrap属性: normal

word-wrap属性: break-word

@font-face规则

生成其他字体格式链接

CSS3(III) 2D转换

2D 转换方法 对元素进行旋转、缩放、移动、拉伸

旋转transform:rotate( deg);

缩放transform:scale(x,y);

x:水平方向缩放的倍数

y:垂直方向缩放的倍数，若省略，同x

0~1,缩小;>1放大

CSS3(IV) 过渡与动画

过渡 transition属性

将元素的某个属性从“一个值” ,在指定的时间内过渡到“另一个值”

过渡transition

描述

transition

属性名 持续时间 过渡方法

transition-property

属性名|all 对哪个属性进行变化

transition-duration

持续时间

transition-timing-function

过渡使用的方法(函数)

transition-delay

延迟transition-timing-function属性取值

值

描述

linear

匀速

ease

慢快慢

ease-in

慢快

ease-out

快慢

ease-in-out

慢快慢动画

(1)定义动画@keyframes规则

(2)调用动画animation属性

(3)animation属性取值

值

描述

animation

简写

animation-name

引用 @keyframes 动画的名称

animation-duration

动画完成时间

animation-timing-function

规定动画的速度曲线。默认是 “ease”。

animation-play-state

running | paused

CSS3(V) 3D变换

透视效果

本文整理自中国大学MOOC网/Web前端开发 孙俏老师的PPT和视频内容，如果有不清晰的知识点，可以搜索孙俏老师的视频进行学习，整理不易，有用记得收藏+点赞+评论哦。

标签：CSS3,最全,元素,left,font,border,CSS,属性

来源： https://blog.csdn.net/qq_45027204/article/details/105325097