CSS笔记

majm · 发表于 2013-2-7 19:42:58

CSS笔记
1.CSS初步体验
可以补足Html的缺陷
h2{
font-family:幼圆;
color:#FF0000;5
}
可统一html标记中的统一属性的设置；(使显示风格得到统一)
行内样式：
<p style="color:#0000FF; font-size:18px; text-decoration:underline">
正文内容1</p>
<p style="color:#000000; font-style:italic;">正文内容2</p>
<p style="color:#FF00FF; font-size:24px; font-weight:bold;">正文内容3</p>

内嵌样式：
p{ color:#ff00ff;
text-decoration:underline;
font-weight:bold;
font-size:24px;
}
外部样式：
导入式
<STYLE type="text/css">
@import url(1.css);
</STYLE>
链接式：<link href="1.css" type="text/css" rel="stylesheet">
StyleSheet 接口是任何类型样式表的抽象基接口。它表示与一个结构化文档相关联的单个样式表。在 HTML 中，StyleSheet 接口既可以表示一个外部的样式表（通过 HTML LINK 元素来定义），也可以表示一个内嵌的STYLE 元素。在 XML 中，本接口表示一个外部样式表（通过样式表处理指令来定义）。

2.CSS基本语法
标记选择器”h1,p,div”
h1——选择器
声明
{
Color:red; ——声明：属性；值
font-size:14px;——声明：属性；值
}
类别选择器”.”
.one——类别名称
{
color:red; /*声明：属性；值*/
font-size:18px;/*声明：属性；值*/
}
ID选择器”#”
#one——id名称
{
color:red; /*声明：属性；值*/
font-size:18px;/*声明：属性；值*/
id和class的区别在于id选择器用于多个标记时，会导致JavaScript查找id时出错
集体声明
h1,h2,h3,h4,h5,p{ /*集体声明*/
color: purple;/*文字颜色*/
font-size:16px;/*字体大小*/
}
h2.special, specal, #one{ /*集体声明*/
text-decoration:underline;/*下划线*/
}
选择器的嵌套
p b{ /*嵌套声明*/
color:maroon; /*颜色*/
text-decoration:underline;/*下滑线*/
}
CSS的继承关系
如果一个标记被包含在另一个标记中，那么他将继承另一个标记
h1{
color:red;/*颜色*/
text-decoration:underline;/*下划线*/
}
h1 em{
color:#004400;
font-size:36px;
}
<h1>祖国的首都<em>北京</em></h1>

3.CSS的文字样式
1.字体
h2{
font-family:黑体,幼圆;/*如果系统中没有黑体，就要幼圆*/
}
p{ font-family:Arial, Helvetica, sans-serif;/**/
}
p.kaiti{ font-family:楷体_GB2312, "Time New Roman";/**/
}
2.文字的大小
p.inch{ font-size: 0.5in;}
p.cm{ font-size: 0.5cm;}
p.mm{ font-size: 4mm; }
p.tp{ font-size:12px;}
p.pc{ font-size: 2pc;}

3.文字的颜色
h2{ color:rgb(0%,0%,80%);}
p{ color:#33FF00;
font-size:24px;
}
p span{ color:blue;}
4.文字粗细
h2{ color:rgb(0%,0%,80%);}
5.文字粗细
h1{ font-style:italic;}/*设置斜体*/
h1 span{ font-style:normal;}/*设置为标准风格*/
p{ font-size:18px;}
p.one{ font-style:italic;}
p.two{ font-style:oblique;}
6.下化线，上划线，删除线。
p.one{ text-decoration:underline;}/*下滑线*/
p.tow{ text-decoration:overline;}/*顶划线*/
p.three{ text-decoration:line-through;}/*删除线*/
p.four{ text-decoration:blink;}/*闪烁*/ie不支持

7.英文字母大小写
p{ font-size:16px;}
p.one{ text-transform:uppercase;}/*单词首字母大写*/
p.two{ text-transform:capitalize;}/*全部大写*/
p.three{ text-transform:lowercase;}/*全部小写*/
4.图片设置效果
1.图片边框
img.test1{
border-style:dotted;/*点划线*/
border-color:#Ff9900;/*边框颜色*/
border-width:5px;/*边框粗细*/
}
img.test2{
border-left:dashed 2px blue;
border-right:dashed 5px red;/*单独设置设置边框的*/
}
2．图片样式
img.test1{
height:50px;/*图片的大小可以是相对的也可以是绝对的*/
width:20%;/*它的大小是相对与浏览器而言*/
}
3．图片对齐
水平对齐：
<table width="100%" border="1">
<tr><td style="text-align:left"><img src="building.jpg"></td>
<td style="text-align:center"><img src="building.jpg"></td>
<td style="text-align:right"><img src="building.jpg"></td></tr>
</table>
垂直对齐：
4．图文混排
文字环绕：
body{
background-color:red;/*页面背景颜色*/
margin:0px;
padding:0px;
}
img{
float:left;/*文字环绕图片*/
}
p{
color:#FFFF00;/*文字颜色*/
margin:0px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
span{
float:left;/*首字放大*/
font-size:85px;
font-family:黑体;
margin:0px;
padding-right:5px;
}
设置图片和文字的间距
5.设置网页中背景
1.页面背景色
body{
background-color:#5b8a00;/*设置页面的背景颜色*/
margin:0px;
padding:0px;
color:#c4f762;/*设置页面文字颜色*/
}
p{
font-size:14px;/*正文字的大小*/
padding-left:10px;
padding-top:8px;
line-height:120%;
}
span{
font-size:76px;/*首字放大*/
font-family:黑体;
float:left;
padding-right:10px;
padding-left:5px;
padding-top:8px;
}

2.利用背景色分类显示
< STYLE >
body{
padding:0px;
margin:0px;
background-color:#ffebe5;
}
.topbanner{
background-color:#fbc9ba;
}
.leftbannerP{
width:20%; height:330px;
vertical-align:top;
background-color:#6d1700;
color:#ffffff;
text-align:left;
padding-left:40px;
font-size:14px;
}
.mainpart{
text-align:center;
}
</STYLE>
</head>

<body>
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td>
</tr>
<tr>
<td class="leftbannerP">
<br><br>首页<br><br>谈天说地
<br><br>分类讨论<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
</td>
<td class="mainpart">正文内容......</td>
</tr>
</table>
</body>

3.页面的背景图
4.页面的背景图重复
body{
padding:0px;
margin:0px;
background-image:url(bg1.jpg);/*背景图片颜色*/
background-repeat:repeat-x;/*垂直方向重复*/
background-color:#0066FF;/*背景颜色*/
}
5.背景图片的位置
通过图片的位置，可以很好的利用一些大的图片来显示样式。
body{
padding:0px;
margin:0px;
background-image:url(bg4.jpg);/*背景图片*/
background-repeat:no-repeat;/*不重复*/
background-position:bottom right;/*背景的位置，右下*/
background-color:#eeeee8;
}
span{
font-size:70px; /*首字放大*/
float:left;
font-family:黑体;
font-weight:bold;
}
p{
margin:0px;
font-size:14px;
padding-top:10px;
padding-left:6px;
padding-right:8px;
}
6.

6.设置表格与表单
1.字体
7.设置浏览器元素
1.字体
font-size:70p
8.制作实用菜单
1.字体
font-size:70p
9.CSS滤镜应用
1.字体
font-size:70p
10.理解CSS+DIV布局
1.div标记和span标记
div标记和收盘标记的区别：
div标记不同行：
span标记同行：
2.盒子模型
Border
Padding
margin

		自动登录	找回密码
密码			立即注册