css学习笔记

h1 {color:red; font-size:14px;}
p {font-family: "sans serif";}
text-align: center;
background: #fff;
margin: 0;
padding: 0;

选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承及其问题
body {
font-family: Verdana, sans-serif;
}

body {
font-family: Verdana, sans-serif;
}

td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}

p {
font-family: Times, "Times New Roman", serif;
}

派生选择器
li strong {
font-style: italic;
font-weight: normal;
}

id选择器
#red {color:red;}
#green {color:green;}

类选择器
.center {text-align: center}

属性选择器
[title=W3School]
{
border:5px solid blue;
}

css的引用
<link rel="stylesheet" type="text/css" href="mystyle.css" />

内部创建css
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>

背景
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}

body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center; background-position:top;

background-position属性

单一关键字 等价的关键字
center center center
top top center 或 center top
bottom bottom center 或 center bottom
right right center 或 center right
left left center 或 center left

background-attachment:fixed 背景图片固定

a {text-decoration:none;}

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p {text-indent:50px;}
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;} 字符之间间距
p.small {line-height:70%;}
p.big {line-height:200%;} 行间距

word-spacing:30px; 单词间空白
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}垂直对齐
}

h1 {text-shadow:2px 12px #FF0000;} 字符阴影

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

ul样式
list-style-image:url('sqpurple.gif');

vertical-align:bottom; 对齐

border-collapse:collapse;

boder样式
p.none {border-style:none;}
p.dotted {border-style:dotted;} 虚线
p.dashed {border-style:dashed;}长虚线
p.solid {border-style:solid;} 实线
p.double {border-style:double;}双实线
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}

设置最大高度
max-height:50px

设置隐藏
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

固定
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

相对
position:relative;
left:-20px;

绝对定位
position:absolute;
left:100px;
top:150px; 重叠元素 z-index:-1; overflow:scroll; overflow:auto;

清除浮动
clear:both;

后代选取器 div p
子元素选择器 div>p
相邻兄弟选择器div+p
普通相邻兄弟选择器div~p

伪类
p:first-child
{
color:blue;
}

focus伪类
:before
:after

a标签 设置display:block; 才会影响width height属性

li 是快元素，但是设置内链
{
display:inline;
}
设置图片透明度
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */

、图像拼接：
<img class="aa" src="/images/img_trans.gif">
img.aa {
width: 43px;
height: 44px;
background: url(/images/img_navsprites.gif) -181px 0;
}

css3 新的样式
border-radius
box-shadow box-shadow: 10px 10px 50px #888888; 参数X,Y 大小,颜色
border-image
border-image:url(border.png) 30 30 round;
border-image:url(border.png) 30 30 stretch;

渐变
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}

换行
word-wrap:break-word;

字体
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}

div
{
font-family:myFirstFont;
}

过度
transition:width 0.5;
-webkit-transition:width 0.5s; /* Safari */
div:hover
{
width:300px;
}

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;

动画
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

多列排列
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;