一、CSS简介
作用：html是骨架，css是衣服 分类： 1、内联样式 <p style="color: azure">你好，世界！</p> 2、内部样式 <style> p { color: azure; } </style> 3、外部样式 <link rel="stylesheet" href="index.css">
二、选择器
1、基本选择器 a、标签选择器 作用：应用于相同标签的样式布局 p { color: blue; } b、ID选择器 注意：id的值是唯一的，在html的标签中设置id #d0 { color: red; } c、类选择器 注意：class值不唯一的，可以重复,在html的标签中设置class属性 .t1 { color: chartreuse; font-size: 40px; } d、通用选择器 作用：应用于全局样式设置 * { color: darkgreen; } 2、组合选择器 注意：组合选择器作用的是后面的选择器 a、后代选择器 注意：div选择器和p是嵌套关系 div p { color: chocolate; } b、儿子选择器 注意：是嵌套关系 #d1>p { color: chartreuse; } c、毗邻选择器 注意：并列关系 div+p { color: blueviolet; } d、弟弟选择器 注意：并列关系 #d1~p { color: coral; } 3、属性选择器 注意：这里的属性可以自定义，属性可以重复 [title] { color: red; font-size: 40px; } [title="tree"] { color: blue; font-size: 50px; }
/*title以什么开头*/
[title^="hao"]{
color: red;
}
/*title以什么结尾*/
[title$="de"]{
color: aqua;
}
/*title包含什么*/
[title*=ao]{
color: chocolate;
}
/*title值是独立的元素*/
[title~="de"]{
color: chartreuse;
}
4、伪类选择器
/*link链接(没点过)*/
a:link {
color: black;
}
/* link链接已点击*/
a:visited{
color: darkred;
}
/*悬浮*/
a:hover{
color: aqua;
}
/*鼠标点击*/
a:active{
color: blue;
}
/*鼠标悬浮*/
.c1:hover{
color: chartreuse;
}
.c1:active{
color: darkgreen;
}
5、伪元素选择器
/*伪元素原则器 */
/*首字母*/
#p1:first-letter {
color: darkred;
font-size: 30px;
}
/*前面*/
#p2:before{
content: "*";
color: crimson;
}
/*后面*/
#p3:after{
content: "[1]";
color: crimson;
}
6、分组和嵌套 分组 p, h1 { color: darkolivegreen; font-size: 50px; } 嵌套涉及到组合选择器的后代选择器和儿子选择器
三、选择器的优先级
1、内联样式的优先级最高
2、相同选择器以靠近标签的为准
3、选择器的权重值
内联样式1000 id选择器100 类选择器 10 标签选择器 1
注意：权重值相加，永不进位
四、属性
1、字体属性 #p1 { font-family: "Microsoft Himalaya", "微软雅黑"; font-size: 30px; font-weight: bolder; color: chartreuse; } 2、文字属性 文字布局 text-align: left; 文字装饰 a { text-decoration: none; } 首行缩进 text-indent: 24px; 3、背景属性 .d1 { height: 600px; width: 600px; /*背景颜色*/ background-color: aqua; /*背景图片*/ background-image: url("ss.png"); /*背景图片是否重复 */ background-repeat: no-repeat; /*背景图片的位置*/ background-position: center; } 本人不推荐使用 background: url("ss.png") no-repeat 50% 50%; 4、边框 .d3 { width: 600px; height: 600px; border-width: 10px; border-style: solid; border-color: crimson; } 推荐： border: 5px solid #bdb89c; 5、display属性 /*li块级->行内*/ li { display: inline; } /*块级->行内 ，不占空间*/ .d1 { height: 300px; width: 300px; background-color: blueviolet; display: inline; } /*行内->块级*/ .s1{ display: block; } 6、CSS盒子模型
padding和margin如果有四个值，上、右、下、左
三个值：上、（左右）、下
两个值：上下、左右 div { width: 200px; height: 200px; background-color: blueviolet; border: 20px solid red; padding: 10px; margin: 30px; } 7、float div.d1 { width: 20%; height: 200px; background-color: blueviolet; float: left; } .d2{ width: 80%; height: 200px; background-color: gold; float: left; }
8、clear <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0px; margin: 0px; } /*设置float，浮动*/ /*设置div为 float*/ .c1 { width: 200px; height: 200px; /*background-color: aqua;*/ border: 5px solid red; float: left; } #d1 { border: 3px solid black; } /*利用伪元素选择器和display属性，把""变成块级标签*/ #d1:after { content: ""; clear: left; display: block; } </style> </head> <body> <div id="d1"> <div class="c1"></div> <div class="c1"></div> </div> <div>hello, world</div> </body> </html>
9、overfloat 溢出 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; padding: 0px; } .c1{ height: 200px; width: 200px; border: 2px solid red; overflow: auto; } </style> </head> <body> <div class="c1">君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 </div> </body> </html>
设置圆 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0px; padding: 0px; } .c2{ height: 400px; width: 400px; border: 2px solid rebeccapurple; border-radius: 100%; overflow: hidden; } </style> </head> <body> <div class="c2"><img src="b.png" alt="图片" title="老婆"></div> </body> </html>
10、position <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*relative相对位置*/ /*absolute绝对位置*/ /*fixed固定位置*/ * { margin: 0px; padding: 0px; } .c1, .c2, .c3, .c5{ width: 150px; height: 150px; } .c1{ background-color: rebeccapurple; } .c2 { background-color: red; position: relative; left: 300px; top: 800px; } .c3{ background-color: aqua; position: relative; left: 200px; } .c4{ background-color: red; position: fixed; right: 20px; bottom: 10px; width: 50px; height: 20px; } .c5{ background-color: black; position: absolute; left: 150px; top: 800px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"> <div class="c5"></div> </div> <div class="c4"></div> </body> </html>
补充
1、伪元素属性 /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; } 2、清除float的副作用 .clearfix:after{ content: ""; display: block; clear: both; }
3、background-attachment: fixed; 固定图片 4、知识点 a、块级标签可以设置高和宽，行内模块不能设置 b、float后，变成块级模块，自动脱离文件流