外部样式表<link rel="stylesheet" type="text/css" href="mystyle.css" />
内部样式表<style type="text/css"></style>
内联样式 <p style="color: sienna; margin-left: 20px">
CSS 基础语法
body {color: blue}
p { color: #ff0000; }
CSS 高级语法
h1,h2,h2,h3,h5,h6 {
color: green
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
CSS 派生选择器
li strong { [li标签里所有的strong是XXX样式]
font-style: italic;
font-weight: normal;
}
CSS id 选择器
#red {color:red;}
<p id="red">这个段落是红色。</p>
注意：id 属性只能在每个 HTML 文档中出现一次。
单独的选择器
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
子元素
h1 > strong {color:red;}
选择相邻兄弟
h1 + p {margin-top:50px;}
CSS 类选择器
.center {text-align: center}
------------------
a:link {color: #FF0000} /* 连接 */a:visited {color: #00FF00} /*访问过 */a:hover {color: #FF00FF} /* 移动*/a:active {color: #0000FF} /* 激活 */
p:first-child {font-weight: bold;} /* 首元素 */
x:first-letter {color: #0000FF} /* 首字母 */
x:first-line {color: #0000FF} /* 首行 */
x:before {}
x:after {}
伪元素的语法：
选择器 : 伪元素 { 属性: 值 }
CSS 类也可以与伪元素配合使用：
选择器 . 类: 伪元素 { 属性: 值 }
----------------------------------------------------------------------
链接到样式
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
<a class="one" >这个链接改变颜色</a>
----------------------------------------------------------------------------------------
阴影
box-shadow: 10px 10px 5px #888888; x y 模糊程度 颜色
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
圆角
border-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
-moz-border-radius:25px; /* Old Firefox */
------------------------------------------------
图片边框
border-image: url(/button.png) 0 14 0 14 stretch;
-moz-border-image: url(/button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
-webkit-border-image: url(/button.png) 0 14 0 14 stretch; /* Safari */
-o-border-image: url(/button.png) 0 14 0 14 stretch; /* Opera */
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
背景大小
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-origin: padding-box|border-box|content-box;
padding-box 根据内填充定位 无视内填充
border-box 根据边框定位 无视边框
content-box; 根据内容框来定位
文字阴影
text-shadow: 5px 5px 5px #FF0000; x y 模糊程度 颜色
定义的字体
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
旋转
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
移动
transform:translate(50px,100px); 左侧 顶部
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
改变尺寸
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
翻转
transform: skew(30deg,20deg); 左右 上下
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
集合使用方法
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
垂直翻转
transform:rotateX(20deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
-moz-transform:rotateX(360deg); /* Firefox */
水平翻转
transform:rotateY(130deg);
-webkit-transform:rotateY(230deg); /* Safari and Chrome */
-moz-transform:rotateY(110deg); /* Firefox */
过渡效果
transition:width 2s; 简写方式 （参数1可以多参数）transition:width 2s，height 2s;
transition-property 参数1 css参数名称
transition-duration 参数2 过渡时间
transition-timing-function 参数3 效果
transition-delay 参数4 渡效果开始前等待时间
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 默认
linear 规定以相同速度开始至结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
div.asd
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.asd:hover
{
width:300px;
}
动画
div.aaaa
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
也可以是按照动画时间段设置内容
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}