CSS学习（一）
2016-06-21 15:05
567 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3
- css3 :hover添加特效
- php实现畅言留言板和网易跟帖样式
- 浏览器默认样式
- CSS中position的百分比表示法及绝对定位居中
- CSS 文字溢出 变成省略号
- 关于IE8以上 不引人css 症状
- CSS3 生成ICO图标
- 详解CSS中的选择器优先级顺序
- 图文讲解CSS的Box Model盒模型中的边距
- css3弹性盒模型（Flexbox）
- css布局讲解
- css3常用样式集锦
- CSS中的空白效果属性使用小结
- CSS padding margin border属性详解
- 本人经过测试认为最简单最好的popupwindow样式
- DIV CSS 鼠标事件
- 横向滚动条的css样式
- CSS---关于内层DIV设置margin-top不起作用的解决方案
- 一个漂亮的滑动条样式