目录
1.基础
分类
语法
1.1 元素
1.2 定位 大小
1.3 布局
1.4 文本+字体
2. 中级
2.1 animation动画
2.2 型变
3. CSS3
4. 适配
4.1 布局适配
4.2 字体适配rem
5. Sass
1. 基础
CSS(Cascading Style Sheets) 层叠样式表
定义了如何显示[修饰]HTML元素（使内容与表现分离）。
外部样式表.css,可应用于多个页面。
最新的css标准：css3
分类
根据所在位置，分为3种（优先级从小到大）：
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（元素内部）
发生重叠时：
相同部分按优先级
不同部分相加。
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
hr {color: Sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式表
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
语法规则
selector {property: value,property2: value2}
selector1,selector2 {property: value,property2: value2} 修饰多个
selector subSelector ...{property: value,property2: value2} 修饰最后一个（影响所有后代）
selector1>selector2 {property: value,property2: value2} 修饰最后一个（仅影响子元素）
selector1+selector2 {property: value,property2: value2} 修饰最后一个（后边相邻的一个兄弟元素）
selector1~selector2 {property: value,property2: value2} 修饰最后一个（后边相邻的所有兄弟元素）
[属性]{property: value;}
[属性=具体值]{property: value;}
selector[属性=具体值]{property: value;}
select可以是
元素
#idName
.className
注释：/**/
大小写不敏感（但是用到的html中的class和id是区分的）
连续多个单词要使用双引号
多个声明用；隔开，最好一个声明占一行
最好最后一行加；便于修改添加
例：
通用选择器
*{}
元素选择器（类型选择器）
h1 {color:red; font-size:14px;}
选择器分组
h1,h2,h3,h4,h5,h6 {color: green;}
派生选择器（包含选择器，任意后代为a）
div a {
font-style: italic;
font-weight: normal;
}
子元素选择器（仅子代为a）
div > a {color:red;}
相邻兄弟选择器（a紧跟div）
div + a {color:red;}
id选择器 <p id="idName">hello</p>
#idName{color: green;}
id选择器和派生选择器结合 <div id="idName"><p>hello</p></div>
#idName p{color: green;}
类选择器 <p class="className">hello</p>
.className{color: green;}
多类选择器 <p class="className className2">hello</p>
.className{color: green;} .className2{color: green;}
.className .className2{color: green;}
类选择器和派生选择器结合 <div class="className"><p>hello</p></div>
.className p{color: green;}
属性选择器
包含title属性
[title]{
color:red;
}
多属性
[title][href]{
color:red;
}
title属性值为hello
[title=hello]{
border:5px solid blue;
}
包含hello（hello左右不能有其他字符，空格除外）
[title~=hello] { color:red; }
包含hello
[title*=hello] { color:red; }
以hello开头(且不能跟随有其他字母字符)
[title|=hello] { color:red; }
以hello开头
[title^=hello] { color:red; }
以hello结尾
[title^=hello] { color:red; }
input元素type属性值为text
input[type="text"] { width:150px;}
1.1 元素
元素概念图如下：
element : 元素。
padding : 内边距。
border : 边框。
margin : 外边距（空白或空白边）。
内边距、边框和外边距：可选，默认值是零。
修改内边距不会改变元素内容大小，但会增加元素框的总大小
元素概念图
内边距padding
有背景色
p{
padding: 10px;
padding: 10%; 父元素宽
padding: 10px 0.25em 2ex 20%; 上、右、下、左
padding: 10px 20%; 上下，左右
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex; 宽/高*width可以自适应图片高
padding-left: 20%;
}
外边距margin
没有背景色
p{
margin: 10px;
margin: 10%; 父元素宽
margin: 10px 0.25em 2ex 20%; 上、右、下、左
margin: 10px 20%; 上下，左右
margin-top: 10px;
margin-right: 0.25em;
margin-bottom: 2ex;
margin-left: 20%;
margin:auto; 纵向居中（一个声明要放在单个声明上面，以防覆盖）
}
外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
行内框、浮动框或绝对定位之间的外边距不会合并。
边框
风格宽度颜色：边框
p{
border-top:thick double #ff0000;
border-right:thick double #ff0000;
border-left:thick double #ff0000;
border-bottom:thick dotted #ff0000;
风格
border-style: solid dotted dashed double; 上右下左
border-top-style:dotted; none
border-right-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
宽度
border-width: 15px 5px 15px 5px; 上右下左
border-width: 5px; thin 、medium 和 thick
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
颜色
border-color: blue rgb(25%,35%,45%) #909090 red;
border-color: blue red;
border-top-color: red; transparent透明
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
圆角
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-radius:2em;
border-radius:50%; 切圆
边框图片
兼容各浏览器
-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */
border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;
重复
border-image-repeat: repeat;
边框图片向内偏移
border-image-slice: 50% 50%;
边框图片向外偏移
border-image-outset: 30 30;
边框图片
border-image-source: url(border.png);
边框图片宽
border-image-width: 30 30;
边框阴影(配合hover可以做出立体效果)
box-shadow: 10px 10px 5px #888888;
一个声明
border: medium double rgb(250,0,255)
}
轮廓
外边距边框（最外层）
p{
outline-color:#00ff00; 颜色
outline-style:dotted; 风格 dotted，dashed，solid，double，groove，ridge，inset，outset，
outline-width:thin; 宽度
thin medium thick 1px inherit
outline-offset:15px; 向外偏移
一个声明
outline:#00ff00 dotted thick;
}
背景
颜色：red #ff0000 #f00 rgb(255,0,0) rgb(100%,0%,0%) transparent透明默认 rgba(255,0,0,0.5) hsl(120,65%,75%) hsla(120,65%,75%,0.3)
p {
背景色（可以为所有元素设置背景色，不能继承，默认控件背景透明）
background-color: gray; padding: 20px;
背景图片
默认背景图片为none无
background-image: url(/i/eg_bg_03.gif);
背景图片y / x方向重复
background-repeat: repeat-y;
background-repeat: repeat-x;
背景图片不重复，居中显示
background-repeat:no-repeat;
背景图片位置
background-position:50% 50%; 或下方同等
background-position:center; top、bottom、left、right 和 center
(左 上)
background-position:50px 100px;
背景固定，不随网页内容滚动
background-attachment:fixed
背景剪裁
background-clip:content-box; 内容，padding-box内边距+内容，border-box
背景图像的位置
background-origin:content-box;
背景图片的大小
background-size:63px 100px; contain(全) cover（比例裁剪）
一个声明
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
1.2. 定位 大小
定位
position属性：
1. static
在不指定定位方式时默认（文档流）。
块级元素生成一个块框，内联元素生成一个行内框。
left right top bototm无效。
2.relative
相对原来位置定位。
原位置所在框所占空间依旧存在（在文档流）。
距是距自己（原来位置）
top距上，left距左。
bottom距下（会向上移），right距右。
3.absolute
放置在指定位置（相对最近的已定位（static不算）祖先元素，若无则相对于最初的包含块body）。
为块级框，原位置所在框所占空间（不在文档流）不存在。
距是距（最近的已定位的）父元素定位
top距上，left距左。
bottom距下，right距右。
4.fixed
同 absolute，当永远相对body。(不在文档流)
距是距body
top距上，left距左。
bottom距下，right距右。
5.inherit
继承父元素的属性
float属性（浮动）：
浮动框 向左/向右 移动，直到外边缘碰到包含框或另一个浮动框为止。
浮动框会从文档的普通流中删除（不在文档流中）,会造成覆盖。
浮动框使块元素变成内联元素。
在float元素们后加一个div clear可以防止位置错乱（使其在文档流中，占空间）
clear:both; 左右两侧不允许出现浮框。 left、right、both 或 none
display属性：
block：将内联元素转为块级元素
inline：将块级元素转为内联元素
none：不再显示（不再占空间）
inline-block：？
元素分为：
1.块级元素（块框），前后都会换行
如：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li，
2.内联元素（行内元素，行内框），前后无换行
如：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
z-index属性 (元素的叠加顺序,从父元素算):
大在小上。
auto不参与层级。
负值：在普通文档流（默认：0）下
正常文档流，后写的元素在前面的元素上面。
display:none; float 均会使脱离文档流
clear:both; 不会
overflow属性：
scroll溢出部分滚动，hidden隐藏，auto自动滚动,visible,inherit
overflow-y属性(或 overflow-x)：
scroll溢出部分滚动，hidden隐藏，auto自动滚动,visible,no-display,no-content
left right top bottom 属性:
px inherit % auto
clip属性（剪裁）:
rect(0px 50px 200px 0px);
vertical-align:text-top; text-bottom
visibility( 是否可见):
visible
hidden 仍然占空间
对齐
纵向对齐（垂直对齐）
margin: auto;
横向居中（水平居中）
padding: 10px 0;
文本对齐（left，right，center）
text-align: center;
line-height
transform: translate(-50%, -50%);
大小
width/height/max-height/min-height/max-width/min-width：
auto % px
1.3 布局
div
<div>
</div>
表格
<table>
<tr> 行
<th>Firstname</th> 表头
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td> 列
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
table, th, td{
边框
border: 1px solid blue;
边框边距
border-spacing:10px 50px;
折叠边框
border-collapse:collapse;
隐藏空单元格
empty-cells: hide;
宽高
width:100%;
height:50px;
文本对齐
text-align:right;
vertical-align:bottom;
内边距
padding:15px;
背景色
background-color:green;
文本色
color:white;
表格标题位置
caption-side:bottom;
}
列表
常用于导航栏
默认：纵向，float：横向
可配合@media属性改变水平或垂直方式
display或visibility可以实现下拉菜单
ol{
左边点风格
list-style-type :decimal; 数字，lower-roman小写罗马数字，upper-roman大写罗马数字，lower-alpha小写英文字母，upper-alpha大写英文字母，decimal-leading-zero 01始
}
ul {
左边点风格
list-style-type : square; square方块，circle空心圆，disc实心圆，none无，
左边点图片
list-style-image : url(xxx.gif);
左边点位置
list-style-position: inside;
一个声明
list-style : url(example.gif) square inside;
}
导航栏
<!DOCTYPE HTML>
<html>
<body>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content{
display:block;
}
</style>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</li>
</ul>
</body>
</html>
1.4 文本+字体
文本
文本色
p{color:#00ff00}
缩进（可被继承）
p {text-indent: -5em;padding-left: 5em;}
p {text-indent: 20%;}
水平对齐
p {text-align:center} 默认left、right 和 center justify
字间隔（默认0）
p {
word-spacing: 30px;
word-spacing: -0.5em;
}
字符间隔
p {
letter-spacing: 20px;
letter-spacing: -0.5em;
}
行间距
p {
line-height: 90%;
line-height: 10px;
line-height: 0.5;
}
字母大小写转换
p {
text-transform: uppercase; none，uppercase全大写，lowercase全小写，capitalize首字母大写
}
文本划线
p {
text-decoration: none; none,underline下划线,overline上划线,line-through删除线,blink闪烁
text-decoration: underline overline;
}
空格
p {white-space: normal;} normal忽略,pre保留,nowrap不换行直到br,pre-wrap保留且支持换行,pre-line忽略空格保留换行(通常不使用pre无法适配，使用pre-line)
方向
p {direction: rtl} ltr左向右默认，rtl右向左，inherit继承
阴影（立体文本）
text-shadow:2px 2px #FF0000; 横向 纵向 模糊距离 颜色
vertical-align:text-top;
unicode-bidi: normal|embed|bidi-override|initial|inherit;
文本背景色（见上）
字体
p{font-family: sans-serif;} 该字体系列中选择一个使用
p{font-family: Georgia;} 指定具体的字体
p{font-family: Georgia,sans-serif;} 从左往右寻找字体
字体大小（默认16 像素 (16px=1em)）
p {font-size:14px;} smaller，larger，50%，inherit，3.75em，14px
字体风格
p{font-style:normal;} normal正常显示，italic斜体显示，oblique倾斜显示
字体变形
p {font-variant:small-caps;}
字体加粗
p{font-weight:normal;} normal标准,bold粗体,bolder更粗,lighter更细，100 200...700，
一个声明
p {font:italic bold 12px/30px arial,sans-serif;}
字体中有空格则用引号
/*-------导入字体-------*/
@font-face {
font-family: BebasNeue-webfont;
src: url('../fonts/BebasNeue-webfont.ttf');
}
适配字体
@media screen and (min-width: 1024px) and (max-width: 1920px){
.htmlCSS{
font-family: "微软雅黑";
font-size:10px;
}
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
.htmlCSS{
font-family: "微软雅黑";
font-size:8px;
}
}
em 相对父元素的大小
设置html字体为10px,则他的子元素1em为10px;
rem 永远相对根元素（html）
1.5 其他
开关
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label><br><br>
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
加载框
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-right: 16px solid green;
border-bottom: 16px solid red;
border-left: 16px solid pink;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="loader"></div>
上一页、下一页
<style>
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color: #f1f1f1;
color: black;
}
.next {
background-color: #4CAF50;
color: white;
}
.round {
border-radius: 50%;
}
</style>
<a href="#" class="previous">« 上一页</a>
<a href="#" class="next">下一页 »</a>
<a href="#" class="previous round">‹</a>
<a href="#" class="next round">›</a>
链接
a:link {color:#FF0000;text-decoration:none;} /* 未被访问的链接 */
a:visited {color:#00FF00;text-decoration:none;} /* 已被访问的链接 */
a:hover {color:#FF00FF;text-decoration:underline;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;text-decoration:underline;} /* 正在被点击的链接 */
可配合选择器使用
a.className{}
注意：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
除a外其他伪类（可配合选择器使用）：
鼠标在元素上
:hover
元素的最后一个子对象
元素:last-child {font-weight: bold;}
元素的首个子对象
元素:first-child {font-weight: bold;}
元素的首个子元素类型对象
元素>子元素:first-child {font-weight: bold;}
获取焦点时
input:focus{
background-color:yellow;
}
为属性值为 no 的q元素定义引号的类型
q:lang(no){
quotes: "~" "~"
}
所有禁用的元素
:disabled
所有没有子元素的元素
:empty
所有可用的元素
:enabled
第一行
:first-line
第一个字符
:first-letter
元素前面
:before
元素后面
:after
所有仅有一个子元素为该元素的元素
:only-of-type
所有仅有一个子元素的该元素
:only-child
"required"属性的input元素
input:required
没有"required"属性的input元素
input:optional
只读属性的input元素
input:read-only
可读写属性的input元素
input:read-write
所有选中的input元素
input:checked
伪元素 （只能用于块级元素）
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
适用以下属性：font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear
首行
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
首字母
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
用户可调整大小
div{
resize:both;
overflow:auto;
}
none
vertical
horizontal
透明
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本*/
}
修改外观
div{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
有的无效
normal 默认
icon 图标
window 窗口
button 按钮
menu 一套选项
field 输入框
2. 中级
2.1 animation动画
<style>
定义动画
/*目前浏览器都不支持 @keyframes 规则*/
@keyframes mymove{
from {top:0px;left:0px; background:red; width:100px;}
to {top:200px;left:100px; background:yellow; width:300px;}
}
/* 支持浏览器Firefox */
@-moz-keyframes mymove {
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
/* 支持浏览器Safari and Chrome */
@-webkit-keyframes mymove{
from {top:0px;}
to {top:200px;}
}
/* 支持浏览器Opera */
@-o-keyframes mymove{
from {top:0px;}
to {top:200px;}
}
使用动画
div{
width:100px;
height:100px;
background:red;
position:relative;
绑定动画
兼容各浏览器
animation:mymove 5s infinite; 一个声明
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
动画名
animation-name: mymove; none
。。。 适配其他浏览器
时长
animation-duration:2s;
。。。
速度曲线
animation-timing-function: linear; 匀速，ease快慢快，ease-in慢快，ease-out快慢，ease-in-out慢快慢，cubic-bezier(0,0,1,1);
。。。
延迟
animation-delay:2s;
。。。
动画播放次数
animation-iteration-count:3; infinite无限
。。。
下一周期播放方式
animation-direction:alternate; 反向，normal正向。
。。。
动画结束时方式
animation-fill-mode: forwards; 保持最后一帧
}
</style>
2.2 型变
transition: .5s ease; 时间 方式
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
交互
cursor鼠标类型
auto,crosshair, default, pointer手, move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help
尺寸
% 百分比
in 英寸
cm 厘米
mm 毫米
em 1em 等于当前的字体尺寸。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)
3. CSS3
4. 适配
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
4.1 布局适配
@media
针对分辨率范围---设置不同布局
@media screen and (min-width: 800px) and (max-width: 1920px){
/*css样式*/
}
@media screen and (min-width: 0px) and (max-width: 800px){
/*css样式*/
}
1.css 仅在最大分辨率为320时生效
<link type="text/css" rel="stylesheet" href="public/styles/1.css" media="screen and (max-width:320px)"/>
针对不同媒介---设置不同布局
@media screen{ 电脑显示
p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print{ 打印
p.test {font-family:times,serif; font-size:10px}
}
@media tv{ 电视机
}
@media tty{ 使用固定密度字母栅格的媒介
}
@media projection{ 幻灯片
}
@media handheld{ 小的手持设备
}
@media braille{ 用于盲人用点字法触觉回馈设备
}
@media embossed{ 用于分页的盲人用点字法打印机
}
@media aural{ 用于语音和音频合成器
}
@media all{ 所有
}
@media screen,print{
p.test {font-weight:bold}
}
% 做简单适配
width:64%;
height:100px;
4.2 字体适配rem
rem（font size of the root element）
也可以作为宽度、高度单位
根据media，设置不同根字体
html{
position:relative;
font-size:10px; /*默认：16px*/
font-family: "微软雅黑";
}
.otherEle{
font-size:1.5em; /*15px,默认：16px*/
}
5. Sass
扩展了CSS, 增加了：
变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能
兼容 CSS3
两种语法格式：
1.以 .scss 作为拓展名
2.以 .sass 作为拓展名
使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，
用 “换行” 代替 “分号” 分隔属性
转换：
1.@import
2.sass-convert命令行工具
sass-convert style.sass style.scss
sass-convert style.scss style.sass
使用
安装
sudo gem install sass
手册:
网友评论