CSS样式一览表

CSS样式
- CSS添加方法
- CSS选择器
- CSS样式(I) 文本
- CSS样式(II) 背景与超链接
- CSS样式(III) 列表与表格
CSS布局与定位
- 盒子模型(I) overflow和border
- 盒子模型(II) padding和margin
- CSS定位机制 display、float和position
CSS3
- CSS3(I) 圆角边框与阴影
- CSS3(II) 文本与文字
- CSS3(III) 2D转换
- CSS3(IV) 过渡与动画
- CSS3(V) 3D变换

CSS样式

CSS添加方法

CSS添加方法—行内

<p style = “color:red;”> 段落文字 </p>

CSS添加方法—内嵌样式

<style type="text/css">
p{color:red; /*设置字体颜色*/
}
</style>

CSS添加方法—外部样式表

<link rel="stylesheet" href="css/style.css" />

1.多重样式可以层叠，可以覆盖
2.样式的优先级按照“就近原则”:
行内样式> 内嵌样式> 链接样式>浏览器默认样式

CSS选择器

标签选择器 p

h1 {font:“黑体";font-size:20px;}
p {color:red; font-size:16px;}
hr {width:200px;}

类别选择器 .one

/*CSS*/
<style type="text/css">
.one{ font-size:18px; }
</style>
/*HTML*/
<p class="one">类别1</p>

ID选择器 #left

 /*CSS*/
<style type="text/css">#one{font-size:12px;}#two{font-size:24px;}
</style>
/*HTML*/
<body><p id="one">文字1</p> <p id="two">文字2</p>
</body>

嵌套声明 p□span

 /*CSS*/
<style type="text/css">p span{ color:red;}
</style>
/*HTML*/
<body><p> <span>123</span> 456</p>
</body>
</style>

集体声明 p,h1

/*CSS*/
<style type="text/css">h1,p { text-align:center; }
</style>
/*HTML*/
<body> <h1>欢迎</h1> <p>访问</p>
</body>

全局声明 *

 /*CSS*/<style type="text/css">*{text-align:center; }
</style>
/*HTML*/<body><h1>欢迎访问</h1> <p>欢迎访问</p> <h2>欢迎访问</h2>
</body>

CSS样式(I) 文本

单位

单位	描述
px	像素
em	自动适应用户所使用的字体
%	百分比

颜色

颜色	描述
red,blue,green	颜色名HTML颜色名
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	颜色图片 repeat

CSS超链接

链接的四种状态	描述
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
如果有超出部分，显示滚动条	auto

border属性

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变换

3D移动
沿X轴移动 - tranform: translateX( px);
沿Y轴移动 - tranform: translateY( px);
沿Z轴移动 - tranform: translateZ( px);
透视效果

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

[ CSS-CSS3 ] 更适合你的CSS样式一览表相关推荐

CSS / CSS3
CSS / CSS3 篇三种导入CSS的方式 CSS盒子模型 CSS选择器伪类与伪元素选择器的优先级选择器权重的计算规则选择器为什么是从右往左匹配的可以继承的属性有哪些 px / em / ...
html5样式表,CSS3+HTML5_css,css3,html5,html5教程_html5,css,css3-站长之家
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在 ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
『总结』CSS/CSS3常用样式与web移动端资源
css/css3常用样式强制文本显示单行显示语法:white-space:nowrap; 让一段文字在固定宽度在一行显示,最后一个字符为省略标记(...),css样式如下 div{white-sp ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
【面试篇】前端点滴（css/css3）
[面试篇]前端点滴(CSS/CSS3)---倾尽所有面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
和css3实例教程_最好CSS和CSS3教程
和css3实例教程级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...
最常使用的css 工具_使用这些非常有用CSS工具更快地实施网站设计
最常使用的css 工具 CSS is great for creating beautiful websites, but making sure that it works and looks th ...

[ CSS-CSS3 ] 更适合你的CSS样式一览表