一、基本知识
1、 css的概念：
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
基本样式：
利用样式可以方便的去修改页面字体如：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
h2
{font-family:"幼圆";
color:#FF0000;
}
</style>
</head>
<body>
<h2>第一个试验</h2>
<p>没有样临时表</p>
</body>
</html>
（1）行内样式表
<p style="color:#0000FF; font-size:36px;">没有样临时表</p>
（2）内嵌式
在head标签间加入
<style type="text/css">
p{color:#00FF66;
font-size:24px;
</style>
再在body间加入<p>没有样临时表</p>
（3）链接式
在1.css中写入以下代码
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
在网页中加入<link rel="stylesheet" type="text/css" href="file:///E|/futrue/div+css/书中实例/第1章/1.css">（可以直接拖入）
这里有一点要注意，如果css文件在项目中，我们可以用相对路径
<link type="text/css" href="1.css" rel="stylesheet">
（4）导入样式
和上例一样，只是换成<style type="text/css">
<!--
@import url(1.css);
-->
</style>
二、CSS选择器
1、 类别选择器
（1） 标记选择器：
选择器 {属性：值； 属性：值；}
H1 {color: red; font-size: 25px;}
(2)类别选择器：
类别选择器 {属性：值； 属性：值；}
.classs {color: red; font-size: 25px;}
类别选择器可以使某一标记不同显示，如：
<p class=”one”></p> <p class=”two”></p>
(3)ID选择器：
Id选择器 {属性：值； 属性：值；}
#id {color: red; font-size: 25px;}
与类别选择器类似，所不同的是不能重复使用，
因为javascript寻址方式会造成混乱。
2、 选择器的声明
（1） 集体声明：
<style type="text/css">
<!--
h1,h2,h3,p{color:#3333FF;}
h2.specil,.special,#one{text-decoration:underline;}
-->
</head>
</style>
在body标签里填入
<h1>嘿嘿</h1>
<h2>黑尔阿斯顿解放军</h2>
<h3>撒佛鬼来电苏澳房间</h3>
<p>对欧冠</p>
<h2 class="specil">速度附加攻击啊</h2>
<p class="special">阿苏孤狼</p>
<p id="one">宁安会给你就爱个</p>
注意集体声明中类的声明相关引用，是在大的标签范围内。
（2） 嵌套使用
在head标签里加入：
p b{color:#33FFCC; font-size:36px;}
在body标签里加入：
<p>我盟都是<b>激昂撒杜</b>甫深度发掘苏丹港唉</p>
我盟都是<b>激昂撒杜</b>甫深度发掘苏丹港唉
注意，只有嵌套部分才会发生变化
3、 CSS的继承
在head中写入：
.li1{
color:red;
}
.li2{
color:blue;
}
.li1 ol li{ /* 利用CSS继承关系 */
font-weight:bold; /* 粗体 */
text-decoration:underline; /* 下划线 */
}
注意：li对li1的继承仅限于li1标签内。
在body中写入：
<ul>
<li class="li1">关系1
<ul>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套...</li>
</ul>
<ol>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套...</li>
</ol>
<li>嘿嘿</li>
</li>
<ol>
<li>哈哈</li>
</ol>
<li class="li2">关系2
<ul>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套...</li>
</ul>
<ol>
<li>页面父子关系复杂时</li>
<li>页面父子关系复杂时</li>
<li>这里省略20个嵌套...</li>
</ol>
</li>
</ul>
1869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
