CSS，全拼Cascading Style Sheets，层叠样式表，用于控制html<body>的元素的样式和布局。
一、CSS的三种引用方式
1.内嵌
<div style="200px;height:200px;color:red;background-color:blcak"></div>
内嵌 样式为宽200像素，像素必须加px或者em或者百分比；宽度为200像素；字体颜色为红色；背景颜色为黑色；可以无限添加属性，用分号;隔开。
2习惯上加到<head>里，也可以加到<body>里。
<head>
<style type="text/css">
*{ *表示所有的，这个控制器会去掉所有元素的内外边距
margin：0px;
padding:0px;
}
div{ 标签选择器，通常用于取消<a>标签样式
200px; 这个标签选择器会把所有DIV设置成200X200的红色方块。
height:200px;
background-color:red;
}
#ID{ id选择器 会把id为ID的元素改成这个选择器的样式
id选择器的优先级会高一点
}
.CLASS{ class选择器 会把class名为CLASS的元素改为这个样式
}
以上几个选择器比较常用
#ID span{ 子代选择器 会修改id为ID的标签下的span标签
一般用于修改某个id或者class下的标签
}
.CLASS1,CLASS2 { 并列选择器 会修改class为CLASS1和CLASS2的两类标签
可以同时修改多个class的标签
}
并列选择器还有一种类型 在div的class名中以空格并列多个class名 则该div会执行多个选择器的样式
.c4{ }
.c5{ }
<div class="c4 c5"></dic> 该DIV应该在<body>内
</style>
</head>
3.从外部引用
引用格式为
<link type="text/css" rel="stylesheet" href="引用的文件.css"
在css文件里 不需要加<style>标签，直接写选择器即可。
三种方式的优先级依次降低，直接内嵌在标签里最高，在head里写其次，从外部引用最低。
三、课上练习
/*<style type="text/css" >原则上要加到head里面 type属性的意思是样式表 可以不加*/ * { /* *表示所有的选择器 */ margin:0px 0px 10px 0px; padding:0px; } div { /*标签选择器*/ 100px; height:100px; background-color:red; } #d1 { /*ID选择器*/ background-color:blue; } #d2 span { /*子代选择器*/ color:white; } .c1 { /*class选择器*/ background-color:black; } .c2, .c3 { /*并列选择器*/ background-color:yellow; } .c4 { background-color:cyan; } .c5 { color:red; } /*</style> 在样式表里面 style是不需要加的 直接写选择器即可*/
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>样式表练习</title> <link type="text/css" rel="stylesheet" href="css/css1.css" /> <!--link 链接器 type类型是文本/样式 rel(relationship)关系是样式表 用href定位链接的样式表css1.css--> </head> <body> <div style="200px;height:100px;background-color:#b2b2b2"></div> <!--div单独用无意义 必须加样式style 属性值可以无限加 用;隔开--> <div></div> <div id="d1"></div> <div id="d2"> <span>浮生半日闲</span> </div> <span>浮生半日闲</span> <div class="c1"></div> <div class="c2">C2</div> <div class="c3">C3</div> <div class="c4 c5">蝶魂</div> <!--优先级问题：引用样式表优先级最低，然后是加在head里的样式 最高的是加在div标签里的样式 head里的样式标签 *（所有）是最低的 然后依次是标签选择器，class选择器，ID选择器。--> </body>
四、效果图
