CSS笔记
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
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