css 样式
背景颜色
p {background-color: gray;}
背景图像
body {background-image: url(/i/eg_bg_04.gif);}
背景重复
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;
}
背景关联
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
文本
文本阴影，text-shadow
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
缩进文本
p {text-indent: 5em;}
水平对齐
p{text-align:center}
字间距(单词)
word-spacing 属性
字间距(字母、文字)
letter-spacing
行间距
{
line-height: 10px
}
规定段落中的文本不进行换行：
p
{
white-space: nowrap
}
大小写转换
text-transform 属性
h1 {text-transform: uppercase}
文本装饰
text-decoration 属性
a {text-decoration:line-throuth;}
处理空白符
white-space 属性
p {white-space: normal;}
css字体
font-family 属性
body {font-family: sans-serif;}
字体风格
font-style 属性
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小
h1 {font-size:60px;}
h2 {font-size:40px;}
CSS 列表
要修改用于列表项的标志类型
list-style-type
ul {list-style-type : square}
列表项图像
list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
列表标志位置
list-style-position
list-style-type 设置列表项标志的类型。
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性
table, th, td
{
border: 1px solid blue;
}
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格文本对齐
text-align
td
{
text-align:right;
}
轮廓（Outline）
轮廓（Outline）
在元素周围画线
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
设置轮廓的颜色
p
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}
设置轮廓的样式
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
设置轮廓的宽度
p
{
border:red solid thin;
outline-style:solid;
outline-width:thin;
}
css3边框
border-radius 属性用于创建圆角：
这个矩形有圆角！
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}
box-shadow 用于向方框添加阴影：
div
{
box-shadow: 10px 10px 5px #888888;
}
css3文本效果
在 CSS3 中，text-shadow 可向文本应用阴影。
CSS3 自动换行
word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分，允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}
CSS3 @font-face 规则
当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
雪碧图
<style type="text/css">
div{
width: 150px;
height: 120px;
background: url("");
background-position: 0 -240px;
}
</style>
</head>
<body>
<div></div>
</body>
将其宽高设定为图片的宽高
图片遮盖技术
h1{
background: url("京东LOGO.png") no-repeat;
width: 168px;
height: 81px;
border: 1px solid #ff0000;
}
a{
border: 1px solid #000000;
display: block;
/*width: 168px;*/与line-height只需要设置一个即可
/*height: 81px;*/
line-height: 81px;
text-indent: -1000px;
}
<body>
<h1>
<a href="动画.html">京东</a>
</h1>
</body>
图片透明度
div.background{
width: 300px;
height: 200px;
border: 1px solid black;
background: url("ba5.jpg") repeat;
}
div.box{
width: 200px;
height: 130px;
border: 1px solid red;
opacity: 0.2;
margin: 30px 40px;
padding:6px 20px;
}
.box:hover{
opacity: 1;
}
p{
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="background">
<div class="box">
<p>
我是段落我是段落我是段落我是段落
我是段落我是段落我是段落我是段落我是段落
我是段落我是段落
</p>
</div>
</div>
</body>
下拉列表
dd{
display: none;
}
li:hover dd{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li>
母婴
<dl>
<dd>衣服</dd>
<dd>奶粉</dd>
</dl>
</li>
</ul>
</div>
</body>
如何写导航栏:
导航栏 = 链接列表,导航栏基本上是一个链接列表，因此需使用 <ul> 和 <li> 元素,让我们从列表中去掉外边距：
div{
height: 44px;
background: red;
}
ul
{
margin:0;
padding:0;
}
li
{
list-style:none;
float:left;
padding:0 20px;
line-height:44px;
}
a{
text-decoration: none;
font-weight: bold;
color: white;
}
li:hover{
blackground:green;
}
<nav>
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">会议</a></li>
<li><a href="">图片</a></li>
</ul>
</div>
</nav>
float浮动:
float:right/left/
清除浮动:clear:both
z-index可被用于将在一个元素放置于另一元素之后
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
BFC块级格式化上下文，垂直紧挨排列，生成BFC的元素有：
根元素;
1.float元素不为none;
2.position为absolute或fixed；
3.display为 inline-block； table-cell； table-caption；
4.flex； inline-flex；
5.overflow不为 visible；
IFC行内格式化上下文，行内元素的大小决定父级元素的高宽，是指定区域内内容自适应垂直居中。
line-height
vertical-align:middle