我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点ID选择器，类选择器，指定选择器，包含选择器，子选择器，相邻选择器，兄弟选择器，分组选择器，伪选择器，通用选择器
1.ID选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="header"><!--头部模块-->
<div id="logo"></div><!--网站标识-->
<div id="banner"></div><!--广告条-->
<div id="nav"></div><!--导航-->
</div>
<div id="main"><!--主体模块-->
<div id="left"></div><!--左侧通栏-->
<div id="content"></div><!--内容-->
</div>
<div id="footer"><!--脚部模块-->
<div id="copyright"></div><!--版权信息-->
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#father { }/*父级样式*/
#father div {}/*所有子div元素样式*/
#father .child1 { }/*子级样式1*/
#father .child2 {}/*子级样式2*/
</style>
</head>
<body>
<div id="father"><!—父级元素-->
<div class="child1"></div><!—子级元素-->
<div class="child2"></div><!—子级元素-->
<div class="child2"></div><!—子级元素-->
</div>
</body>
</html>
2.类选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#text { color:Blue; }
.red { color:Red;}
</style>
</head>
<body>
<div id="text" class="red">ID选择器比类选择器具有更大的优先权。</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#mainContent h1 {font-size:1.8em;}
#secondaryContent h1 {font-size:1.2em;}
</style>
</head>
<body>
<div id="mainContent">
<h1>个人网站</h1>
</div>
<div id="secondaryContent">
<h1>最新新闻</h1>
</div>
</body>
</html>
3.指定选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
span.red{/*定义span元素中class为red的元素的颜色为红色*/
color:Red;
}
div#top{/*定义div元素中id为top的元素的宽度为百分之百*/
width:100%;
}
</style>
</head>
<body>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p.news{/* 通过指定选择器实现对新闻正文的样式控制 */
font-szie:12px;
}
</style>
</head>
<body>
<div><!-- 包含框-->
<h2 class="news"></h2><!- -新闻标题-->
<p class="news"></p><!-- 新闻正文-->
<span class="news"></span><!-- 新闻说明-->
<p></p><!-- 其它文本信息 -->
</div>
</body>
</html>
4.包含选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1 h2{/*定义类div1中的标题样式*/
font-size:18px;
}
.div1 p{/*定义类div1中的段落样式*/
font-szie:12px;
}
</style>
</head>
<body>
<div class="div1">
<h2>我是标题</h2>
<p>我是包含选择器里面的p标签</p>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1 h2 p span{/*多层包含选择器*/
font-size:18px;
}
</style>
</head>
<body>
<div class="div1">
<h2>我是标题</h2>
<p>我是包含选择器里面的p<span>标签</span</p>
</div>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.level1 { color:red;}/*定义模块颜色为红色*/
.level1 p{ color:#333;}/*跨层包含，定义模块内段落的颜色为深灰色*/
.level1 { color:red;}/*定义模块颜色为红色*/
.level1 span p { color:#333;}/*多层包含，定义模块内段落的颜色为深灰色*/
</style>
</head>
<body>
<div class="level1"><!—父对象-->
一级嵌套
<h2><!—子对象-->
二级嵌套
</h2>
<span><!—子对象-->
<p><!—孙对象-->
三级嵌套
</p>
</span>
</div>
</body>
</html>
5. 子选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#main > table{/*定义id为main的主体模块中子对象table的样式*/
width:778px;
font-size:12px;
}
#main > .title {/*定义id为main的主体模块中子对象的class为title的样式*/
color:red;
font-style:italic;
}
</style>
</head>
<body>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div>
<p>
<a></a>
</p>
</div>
</body>
</html>
6.相邻选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#sub_wrap + p { font-size:14px;}
</style>
</head>
<body>
<div id="wrap">
<div id="sub_wrap">
<h2 class="news"></h2>
<p class="news"></p>
<span class="news"></span>
</div>
<p></p>
</div>
</body>
</html>
7.兄弟选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h2, p, h3 {
margin: 0;/* 清除默认边距 */
padding: 0;/* 清除默认间距 */
height: 30px;/* 初始化设置高度为30像素 */
}
p ~ h3 { background-color: #0099FF;/* 设置背景色 */ }
</style>
</head>
<body>
<div class="header">
<h2>情况一：</h2>
<p>子选择器控制p标签，能控制我吗</p>
<h3>子选择器控制p标签</h3>
<h2>情况二：</h2>
<div>我隔开段落和h3直接</div>
<p>子选择器控制p标签，能控制我吗</p>
<h3>相邻选择器</h3>
<h2>情况三：</h2>
<h3>相邻选择器</h3>
<p>子选择器控制p标签，能控制我吗</p>
<div>
<h2>情况四：</h2>
<p>子选择器控制p标签，能控制我吗</p>
<h3>相邻选择器</h3>
</div>
</div>
</body>
</html>
8.分组选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1,h2,h3,h4,h5,h6,p{/*定义所有级别的标题和段落行高都为字体大小的1.6倍*/
line-height:1.6em;
}
</style>
</head>
<body>
<div class="header">
<h2>情况一：</h2>
<p>子选择器控制p标签，能控制我吗</p>
<h3>子选择器控制p标签</h3>
<h2>情况二：</h2>
<div>我隔开段落和h3直接</div>
<p>子选择器控制p标签，能控制我吗</p>
<h3>相邻选择器</h3>
<h2>情况三：</h2>
<h3>相邻选择器</h3>
<p>子选择器控制p标签，能控制我吗</p>
<div>
<h2>情况四：</h2>
<p>子选择器控制p标签，能控制我吗</p>
<h3>相邻选择器</h3>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.class1{/*类样式1：13像素大小，红色，下划线*/
font-size:13px;
color:Red;
text-decoration:underline;
}
.class2{/*类样式2：13像素大小，蓝色，下划线*/
font-size:13px;
color:Blue;
text-decoration:underline;
}
.class1,class2{/*共同样式：13像素大小，下划线*/
font-size:13px;
text-decoration:underline;
}
.class1{/*类样式1：红色*/
color:Red;
}
.class2{/*类样式2：蓝色*/
color:Blue;
}
</style>
</head>
<body>
<div>
<p>
<a></a>
</p>
</div>
</body>
</html>
9.伪选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a {text-decoration: none; }/*相同的样式都放在这里*/
a:link { color: #FF0000;}/*第1位置，定义超链接的默认样式*/
a:visited { color: #0000FF; }/*第2位置，定义访问过的样式*/
a:hover { color: #00FF00;}/*第3位置，定义经过的样式*/
a:active { color: #CC00CC;}/*第4位置，定义鼠标按下的样式*/
</style>
</head>
<body>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a {/*默认样式*/
text-decoration: none;
color: #FF0000;
}
a:hover { color: #00FF00;}/*鼠标经过样式*/
</style>
</head>
<body>
<div>
<p>
<a></a>
</p>
</div>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a { text-decoration: none; color: #FF0000;}/*相同的样式都放在这里*/
a:active { color: #CC00CC;}/*定义鼠标按下的样式*/
a:visited { color: #0000FF;}/*定义访问过的样式*/
a:hover {color: #00FF00;}/*定义经过的样式*/
</style>
</head>
<body>
</body>
</html>
10.通用选择器,这个*表示所有
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* {
padding:0;
margin:0;
}
</style>
</head>
<body>
</body>
</html>
