CSS样式
CSS添加方法
<p style = “color:red;”> 段落文字 </p>
<style type="text/css">
p{
color:red;
}
</style>
<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
<style type="text/css">
.one{ font-size:18px; }
</style>
<p class="one">类别1</p>
ID选择器 #left
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
<body>
<p id="one">文字1</p>
<p id="two">文字2</p>
</body>
嵌套声明 p□span
<style type="text/css">
p span{
color:red;
}
</style>
<body>
<p> <span>123</span> 456</p>
</body>
</style>
集体声明 p,h1
<style type="text/css">
h1,
p { text-align:center; }
</style>
<body>
<h1>欢迎</h1>
<p>访问</p>
</body>
全局声明 *
<style type="text/css">
*{
text-align:center;
}
</style>
<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 |
| 属性 描述 |
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) 背景与超链接
| 背景属性 |
取值 |
| 背景颜色 background-color: |
red , #f00 ，rgb(255,0,0) |
| 背景图片 background-image: |
url(“logo.jpg”) |
| 背景重复 background-repeat: |
repeat repeat-x repeat-y no-repeat |
| 背景 background |
颜色 图片 repeat |
| 链接的四种状态 |
描述 |
| a:link |
普通的、未被访问的链接 |
| a:visited |
用户已访问的链接 |
| a:hover |
鼠标指针位于链接的上方悬停 |
| a:active |
链接被点击的时刻 |
按照以下次序:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
CSS样式(III) 列表与表格
| 属性 |
描述 |
| list-style |
所有用于列表的属性 设置于一个声明中 |
| list-style-image |
为列表项标志设置图像 url(“images/bullet1.gif”); |
| list-style-position |
标志的位置 list-style-position: inside ;list-style-position: outside; |
| 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表格 |
描述 |
| width , height |
设置表格大小 |
| border 属性 |
边框 border: 1px solid #eee; |
| border-collapse 属性 |
合并边框 border-collapse:collapse; |
| 奇偶选择器 |
:nth-child(odd|even) |
CSS布局与定位
盒子模型(I) overflow和border
| overflow属性描述 |
取值 |
| 超出部分不可见 |
hidden |
| 显示滚动条 |
scroll |
| 如果有超出部分，显示滚动条 |
auto |
| 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
| 元素分类——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属性 |
left、right |
| clear属性 |
left、right、both |
| 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: 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和视频内容，如果有不清晰的知识点，可以搜索孙俏老师的视频进行学习，整理不易，有用记得收藏+点赞+评论哦。
