CSS-学习笔记一
CSS（层叠样式表）做网页的外观
四种样式：
权重： 行内样式>内嵌式>链接式
1. 行内样式
<div style="color:red;font-size:30px">hello world</div>
2. 内嵌式，放在<head></head>中
<!--内嵌式--> <style type="text/css"> div { color: green; font-size: 50px; } </style>
3. 链接式，放在<head></head>中
<link href="css/demo.css" rel="stylesheet" />
4. 放在<head></head>中，不推荐，因为要html中所有内容加载完毕才导入css样式
<style >
@import url(css/demo.css);
</style>
CSS选择器：
权重： id>class>标签
1. 标签选择器
div { color: green; font-size: 30px; }
2. class选择器
.c1{ color :blue; }
3.id选择器
#d1{ color:fuchsia ; }
一个标签可以有多个class,但是只能有一个id;class能公用，但是id不行。
<div class="c1 c2" id="d1">早上好</div>
<p class="c1" id="d2">晚安</p>
介绍一些CSS属性：
1. div bold {} 空格表示div里面的bold标签的样式
div bold{ font-size:50px; color :#ff6a00; }
2. h1,h2{} 逗号表示h1和h2标签的样式
h1,h2{ font-size:70px; color :black; }
3. 与字体相关的CSS属性
字体相关的CSS属性能继承，其他的不行
#d3{ color:blue; font-size:20px; font-family :"微软雅黑"; /*默认是宋体*/ font-weight :200; /*字体加粗*/ text-decoration:underline; text-transform:capitalize; /*英文大小写*/ letter-spacing:3px; /*字间距*/ /*和字体不相关的不继承*/ width :300px; height :50px; border:solid 3px red; }
4. 字体居中，列表中的字体也可以设置高度。
#d4{ width :300px; height :50px; border:solid 2px red; text-align:center; line-height:50px; /*文字垂直居中，高度设置和框的高度相同*/ } li{ line-height :30px; }
5.边框样式
h3{ width :100px; height :100px; /*border:solid 2px red;*/ border-style:dotted; border-width:10px; border-color :red; border-right-color:aqua; border-top-color :fuchsia; border-bottom-color :orange; border-left-color :transparent ; }
6. 利用border画三角形
h4{ width :0px; height :0px; border-style:solid; border-width:10px; border-right-color:aqua; border-top-color :transparent ; border-bottom-color :transparent ; border-left-color :transparent ; }
7. 背景CSS属性
body{ background-image :url(../image/2.jpg); background-repeat:no-repeat; background-attachment :fixed;/*图片不跟着进度条走*/ /*可以合起来写*/ /*background :red url(../image/2.jpg) no-repeat fixed 5px 10px;*/ }
代码显示：
<!DOCTYPE html> <html> <head> <title></title> <!--内嵌式--> <!--<style type="text/css"> div { color: green; font-size: 50px; } </style>--> <!--链接式--> <link href="css/demo.css" rel="stylesheet" /> <!--导入样式--> <!--<style > @import url(css/demo.css); </style>--> <meta charset="utf-8" /> </head> <body> <!--行内样式--> <div style="color:red;font-size:30px">hello world</div> <br/> <!--CSS选择器 标签选择；class选择器；id选择器 id选择器的优先级最高，class次之，标签最低；一个标签可以有多个class,但只能有一个id；多个标签能公用同一个class，但id不能公用--> <div>你好</div> <div class="c1 c2" id="d1">早上好</div> <p class="c1" id="d2">晚安</p> <!--权重： 行内样式>内嵌式>链接式 id>class》标签--> <!--div p {} 空格表示div里面的P标签的样式--> <div> <bold> Hello world</bold> </div> <!--h1,h2{} 逗号表示h1和h2标签的样式--> <h1>新闻1</h1> <h2 >新闻2</h2> <!--css具有继承性：只有字体相关的一些css属性才能被继承。--> <div id="d3"> 非字体的CSS属性不具有继承性 english <p>字体具有继承性 chinese</p> </div> <br/> <br /> <br /> <!--字体对齐--> <div id="d4"> 字体对齐 </div> <!-- 对列表定义行高--> <ul> <li>对列表定义行高</li> <li>对列表定义行高</li> <li>对列表定义行高</li> </ul> <!--设置边框--> <h3> 设置边框</h3> <!--三角形--> <h4>三角形</h4> <br /> <br /> <br /> <!--背景--> <h5></h5> </body> </html>
div { color: green; font-size: 30px; } .c1{ color :blue; } .c2{ color:orange; } #d1{ color:fuchsia ; } #d2{ color:aqua ; } /*div bold {} 空格表示div里面的bold标签的样式*/ div bold{ font-size:50px; color :#ff6a00; } /*h1,h2{} 逗号表示h1和h2标签的样式*/ h1,h2{ font-size:70px; color :black; } /*与字体相关的属性*/ /*字体相关的CSS属性能继承，其他的不行*/ #d3{ color:blue; font-size:20px; font-family :"微软雅黑"; /*默认是宋体*/ font-weight :200; /*字体加粗*/ text-decoration:underline; text-transform:capitalize; /*英文大小写*/ letter-spacing:3px; /*字间距*/ /*和字体不相关的不继承*/ width :300px; height :50px; border:solid 3px red; } #d4{ width :300px; height :50px; border:solid 2px red; text-align:center; line-height:50px; /*文字垂直居中，高度设置和框的高度相同*/ } li{ line-height :30px; } /*边框样式*/ h3{ width :100px; height :100px; /*border:solid 2px red;*/ border-style:dotted; border-width:10px; border-color :red; border-right-color:aqua; border-top-color :fuchsia; border-bottom-color :orange; border-left-color :transparent ; } /*利用border来画三角形*/ h4{ width :0px; height :0px; border-style:solid; border-width:10px; border-right-color:aqua; border-top-color :transparent ; border-bottom-color :transparent ; border-left-color :transparent ; } h5{ width :100px; height :100px; border:solid 2px red; background-color :#eebdbd; background-image :url(../image/2.jpg); background-repeat:no-repeat; background-position:10px 30px; } body{ background-image :url(../image/2.jpg); background-repeat:no-repeat; background-attachment :fixed;/*图片不跟着进度条走*/
