<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--窗口标题-->
<title>CSS练习1</title>
<!--内联>内嵌>外部-->
<!--外部式CSS样式-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!--嵌入式方式CSS样式-->
<style type="text/css">
p{
font-size: 20PX;/*设置文字字号*/
color: red;/*设置字体颜色*/
font-weight: bold;/*设置字体加粗*/
}/*权值是1*/
/*权重一样时,根据CSS样式的前后顺序来决定,最后的CSS样式会被应用*/
span{
color: blue;
}
p{color:red!important;}/*权重值高于用户自己设置的样式*/
.stress{color: red;}/*类选择器,权值是10*/
.setGreen{color: green;}/*类选择器*/
#id{color: pink;}/*ID选择器,权值是100*/
.bigsize{font-size: 25px;}/*类选择器*/
.food>li{border: 1px solid red;}/*子选择器,对food类下第一级子元素li进行样式设置*/
.food1 li{border: 1px solid red;}/*子选择器,对food类下所有子元素li进行样式设置*/
* {font-size: 20px}/*通用选择器,将所有字体都进行样式设置*/
a:hover{color:green;}/*伪类选择器,给html不存在的标签(标签状态)设置样式,比如一个标签鼠标滑过的状态*/
h1,span{color:red;}/*分组选择符,用于对多个元素设置通以个样式*/
</style>
</head>
<body>
<p>
结合style显示文本的样式
</p>
<span>结合style显示span样式</span>
<!--内联CSS样式-->
<p>在HTML标签中<span style="color:green">内联CSS样式</span><span>此处采用嵌入式span样式</span></p>
<p>结合外部CSS样式显示span样式<span>此处采用外部CSS样式</span></p>
<p>结合类样式<span class="stress">此处采用类选择器</span><span class="setGreen">此处采用另外一个类选择器</span><span id="id">此处采用ID选择器</span></p>
<p>
类选择器和ID选择的区别:<br>
1、ID选择器只能在一个HTML文档中使用一次,而类选择器可以使用多次。<br>
2、类选择器可以使用词列表方法为一个元素同时设置多个样式,而ID选择不可以。<br>
<span class="stress bigsize">词列表</span>
</p>
<ul class="food">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<ul class="food1">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<a href="www.imooc.com">伪选择器</a>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--窗口标题-->
<title>CSS练习1</title>
<!--内联>内嵌>外部-->
<!--外部式CSS样式-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!--嵌入式方式CSS样式-->
<style type="text/css">
p{
font-size: 20PX;/*设置文字字号*/
color: red;/*设置字体颜色*/
font-weight: bold;/*设置字体加粗*/
}/*权值是1*/
/*权重一样时,根据CSS样式的前后顺序来决定,最后的CSS样式会被应用*/
span{
color: blue;
}
p{color:red!important;}/*权重值高于用户自己设置的样式*/
.stress{color: red;}/*类选择器,权值是10*/
.setGreen{color: green;}/*类选择器*/
#id{color: pink;}/*ID选择器,权值是100*/
.bigsize{font-size: 25px;}/*类选择器*/
.food>li{border: 1px solid red;}/*子选择器,对food类下第一级子元素li进行样式设置*/
.food1 li{border: 1px solid red;}/*子选择器,对food类下所有子元素li进行样式设置*/
* {font-size: 20px}/*通用选择器,将所有字体都进行样式设置*/
a:hover{color:green;}/*伪类选择器,给html不存在的标签(标签状态)设置样式,比如一个标签鼠标滑过的状态*/
h1,span{color:red;}/*分组选择符,用于对多个元素设置通以个样式*/
</style>
</head>
<body>
<p>
结合style显示文本的样式
</p>
<span>结合style显示span样式</span>
<!--内联CSS样式-->
<p>在HTML标签中<span style="color:green">内联CSS样式</span><span>此处采用嵌入式span样式</span></p>
<p>结合外部CSS样式显示span样式<span>此处采用外部CSS样式</span></p>
<p>结合类样式<span class="stress">此处采用类选择器</span><span class="setGreen">此处采用另外一个类选择器</span><span id="id">此处采用ID选择器</span></p>
<p>
类选择器和ID选择的区别:<br>
1、ID选择器只能在一个HTML文档中使用一次,而类选择器可以使用多次。<br>
2、类选择器可以使用词列表方法为一个元素同时设置多个样式,而ID选择不可以。<br>
<span class="stress bigsize">词列表</span>
</p>
<ul class="food">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<ul class="food1">
<li>水果</li>
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>蔬菜</li>
<ul>
<li>青菜</li>
<li>白菜</li>
</ul>
</ul>
<a href="www.imooc.com">伪选择器</a>
</body>
</html>