一、打开css的三种方式
第一种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种打开方式</title> <!--<link rel="stylesheet" href="mycss.css">--> </head> <body> <p> <b>下午好大宝贝儿</b> </p> </body> </html>
第二种：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种打开方式</title> <style> p { color: aquamarine; } </style> </head> <body> <p> <b>下午好大宝贝儿</b> </p> </body> </html>
第三种（不推荐使用）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种打开方式</title> </head> <body> <p style="color: bisque"> <b>下午好大宝贝儿</b> </p> </body> </html>
二、基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*标签选择器：标签名*/ p { color: crimson; } /*类选择器：点+类名*/ .c1 { color: deeppink; } /*id选择器：#+id值*/ #d1 { color: dodgerblue; } /*通用/全局选择器*/ * { color: greenyellow; } </style> </head> <body> <div id="d1">你以为有钱人很快乐吗? <p class="c1">不不不，他们的快乐你根本想象不到</p> </div> <div>千万不要自己感动自己。大部分人看似的努力，不过是愚蠢导致的</div> <p id="d2">别人骂你你要听，别人夸你你别信</p> <span class="c1">别灰心， 人生就是这样起起落落落落落落落落落落落的</span> <span>只有正真努力过的人才知道，天赋有多重要</span> </body> </html>
三、组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ div span { color: greenyellow; } /*儿子选择器*/ div>span { color: aqua; } /*毗邻选择器：紧挨着的下面的一个*/ div+span { color: deeppink; } /*弟弟选择器:同级别的下面所有的标签*/ div~span { color:saddlebrown; } </style> </head> <body> <span>div上面的第一个span</span> <span>div上面的第二个span</span> <div> <span>div里面的第一个span</span> <p>div里面的第一个p <span>p里面的第一个span</span> <span>p里面的第二个span</span> </p> <span>div里面的最后一个span</span> </div> <span>div下面的第一个span</span> <span>div下面的第二个span</span> <span>div下面的第三个span</span> </body> </html>
四、属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.具有某个属性名 2.具有某个属性名及属性值 3.具有某个属性名及属性值的某个标签 */ /*找到只有hobby这个属性名的所有标签*/ [hobby] { background-color:red; color:white; } /*找到hobby这个属性是“secret”的所有标签*/ [hobby="secret"] { background-color: deeppink; color:greenyellow; /*找到input 具有属性名是hobby并且值是secret的input标签*/ input[hobby="secret"]{ background-color: aquamarine; } </style> </head> <body> user<input type="text" name="user" hobby="secret"> xxx<input type="text" > <span hobby="secret">长得丑就是一种病，不然为什么整型医院叫医院</span> </body> </html>
五、分组嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: aqua; } div { color: greenyellow; } span { color: saddlebrown; } /*分组*/ div,span,p { color: darkslateblue; } /*嵌套，多个不用的选择器，可以组合使用*/ #d1,.c1,span { color: deeppink; } </style> </head> <body> <p id="d1">p1</p> <p id="d2">p2</p> <div >div1</div> <div class="c1">div2</div> <span>span</span> </body> </html>
六、伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*连接态*/ a:link { color:deeppink; } /*鼠标悬浮态*/ a:hover { color: orangered; } /*鼠标点击态*/ a:active { color: red; } /*访问过后的状态*/ a:visited { color: dodgerblue; } /*input框被点击的状态，称之为获取焦点*/ input:focus { background-color: greenyellow; } input:hover { background-color: deeppink; } </style> </head> <body> <a href="http://www.4399.com"> <b>明老师.avi</b> </a> 这是一个输入框：<input type="text"> </body> </html>
七、伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter { font-size: 48px; color: deeppink; } p:before { content: "%"; color:gold; } /*after在解决浮动的问题上，很有用*/ p:after { content: "@"; color: red; } </style> </head> <body> <p>春眠不觉晓</p> <p>春眠不觉晓</p> <p>春眠不觉晓</p> <p>春眠不觉晓</p> <p>春眠不觉晓</p> </body> </html>
八、选择器优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css"> <style> /* 1.选择器相同的情况下：就近原则 2、选择器不同的情况下： 行内 > id选择器 > 类选择器 > 标签选选择器 */ #d1 { color: gold; } .c1 { color: deeppink; } p { color: saddlebrown; } </style> </head> <body> <p id="d1" class="c1">长的丑活得久，长得帅老的快</p> </body> </html>
九、样式操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 50px; width: 100px; } /*给行内标签设置长款没有任何影响*/ span { height: 50px; width: 100px; } </style> </head> <body> <div>div</div> <span>span</span> </body> </html>
十、字体属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { font-family: 华文楷体 ; font-size: 24px; font-weight: bolder; /*color: red;*/ /*color: #4e4e4e;*/ /*color: rgb(128,128,128);*/ /*color: rgba(128,128,128,0.6); 最后一个参数只能调节颜色的透明度 不能调节文本*/ } </style> </head> <body> <p>爱上大安市领导看了教师大发挥连接是否还考虑萨芬</p> </body> </html>
十一、文字属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { font-size: 16px; text-indent: 32px; /*居中*/ text-align: center; /*左对齐*/ text-align: right; /*右对齐*/ text-align: left; /*两端对齐*/ text-align: justify; /*添加下划线*/ text-decoration: underline; /*添加上划线*/ text-decoration: overline; /*横线穿过文字*/ text-decoration: line-through; } a { text-decoration: none; color: orangered; } a:hover{ color: blue; } </style> </head> <body> <p>有因必有果，你的报应就是我</p> <p>有因必有果，你的报应就是我</p> <a href="https:\www.baidu.com">百度</a> </body> </html>
十二、背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { background-color: orangered; height: 500px; width: 500px; background-image: url("233.png"); /* 背景图片默认是填充整个区域 如果大不够 默认重复填充*/ background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-position: center center; background-position: 10px 30px; /*第一个参数调节的是左右 第二个参数调节的是上下*/ /*同样也可以简写*/ background: orangered url("233.png") no-repeat center center; } </style> </head> <body> <div> </div> </body> </html>
十二、背景图片实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 400px; background-color: red; } .c2 { height: 400px; background-color: green; } .c3 { height: 500px; background: url("233.png"); background-attachment: fixed; /*固定*/ } .c4 { height: 400px; background-color: yellow; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </body> </html>
十三、边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { border-color: red; border-style: solid; border-width: 3px; border: 3px solid black; border-left: 3px solid red; border-bottom: 5px dotted green; border-top: 1px dashed orchid; border-right: 10px solid dimgrey; } </style> </head> <body> <div>哪有什么选择恐惧症，还不是因为穷；哪有什么优柔寡断，还不是因为怂。</div> </body> </html>
十四、盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- border(边框): 围绕在内边距和内容外的边框。
- content(内容): 盒子的内容，显示文本和图像。
如图样式：
margin外边距：
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
} /*顺时针顺序*/
推荐简写：
.margin-test {
margin: 5px 10px 15px 20px;
}
padding内填充：
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
同样推荐简写：
.padding-test {
padding: 5px 10px 15px 20px;
} /*顺序也是顺时针*/
补充padding的常用简写方法：
- 提供一个，用于四边
- 提供两个，第一个用于上下，第二个用于左右
- 提供三个，第一个用于上，第二个用于左右，第三个用于下
- 提供四个，将按照上-下-左-右的顺序作用于四边
十五、float
在css中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素
关于浮动的两个特点：
1. 浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
三种取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
clear：
clear属性规定元素的那一侧不允许其他浮动元素
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素
清除浮动
清除浮动的副作用（父标签塌陷问题）
主要有三种方式：
1.固定高度
2.伪元素清除法
3.overflow：hidden
伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}
十六、overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow (水平和垂直均设置)
overflow (设置水平方向)
overflow (设置垂直方向)
圆形头像实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; width: 200px; border: 3px solid white; border-radius: 50%; overflow: hidden; } img { width: 100%; } </style> </head> <body> <div> <img src="233.png" alt=""> </div> </body> </html>
十七、定位(position)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .c1 { height: 50px; width: 50px; background-color: greenyellow; top: 100px; left: 100px; /*position: static; !*默认是静态的 不能动外置*!*/ position: relative; /*相对定位*/ } .c2 { height: 200px; width: 200px; background-color: red; top: 50px; left: 50px; position: absolute; /*绝对定位*/ } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> </body> </html>
十八、区分是否脱离文档流
脱离文档流
1.浮动的元素都是脱离文档流的
2.绝对定位是脱离文档流的
3.固定定位也是脱离文档流的
不脱离文档流
1.相对定位不脱离文档流
十九、z-index
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
模态框实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .cover { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(128,128,128,0.45); z-index: 999; } .modal { height: 200px; width: 400px; background-color: white; position: fixed; left: 50%; top: 50%; z-index: 1000; margin-top: -100px; margin-left: -200px; } </style> </head> <body> <div>我是最底层的</div> <div class="cover"></div> <div class="modal"> <p><label for="d1">username:<input type="text" id="d1"></label></p> <p><label for="d2">password:<input type="text" id="d2"></label></p> <input type="submit"> </div> </body> </html>
二十、透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { background-color: rgba(128,128,128,0.9); } .c2 { opacity: 0.5; background-color: rgb(128,128,128); } </style> </head> <body> <p class="c1">111</p> <p class="c2">222</p> </body> </html>