css样式 1.选择器 2.操作
1.css语法结构
css 语法结构 ：head标签里面加上<style>标签
选择器{属性名1：属性值1；属性值2：属性值2}
2.css三种引入方式: 1.link标签引入外部文件 2.head内直接写样式 3.行内定义style样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <link rel="stylesheet" href="mycss.css">--> <!-- <style>--> <!-- p {--> <!-- color: red;--> <!-- }--> <!-- </style>--> </head> <body> <p style="color: orange">上海这个地方就像希腊神话里的魔女道 好好的人来了 也会变成畜生</p> </body> </html>
3.如何查找标签
1.基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> 标签选择器 /*div{*/ /* color: gold;*/ /*}*/ /* 类选择器 */ /* .c1 {*/ /* color:blue;*/ /* }*/ /* id选择器*/ /* #d1{*/ /* color: red;*/ /* }*/ /* 通用选择器*/ *{ color: gold; } </style> </head> <body> <div class="c1">32号为你服务 <span>div内部span</span> </div> <p>来宾三位</p> <div>23号为您精诚服务</div> <span>花花头牌出场</span> <p id="d1">贵宾一位 楼上请</p> <span>喵喵出来接待</span> <h1>h1</h1> <h2>h2</h2> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div{*/ /* color: gold;*/ /*}*/ /* 类选择器 */ /* .c1 {*/ /* color:blue;*/ /* }*/ /* id选择器*/ /* #d1{*/ /* color: red;*/ /* }*/ /* 通用选择器*/ *{ color: gold; } </style> </head> <body> <div class="c1">32号为你服务 <span>div内部span</span> </div> <p>来宾三位</p> <div>23号为您精诚服务</div> <span>花花头牌出场</span> <p id="d1">贵宾一位 楼上请</p> <span>喵喵出来接待</span> <h1>h1</h1> <h2>h2</h2> </body> </html>
2.组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ /* div span{ color: gold; }*/ /*儿子选择器*/ /* div > span{*/ /* color: blue;*/ /* }*/ /* 毗邻选择器*/ /*div + span{*/ /* color: gold;*/ /*}*/ /*弟弟选择器*/ div ~ span{ color: brown; } </style> </head> <body> <span></span> <span></span> <div> <span>div内部第一个span</span> <p>div内部的p <span>div内部的p内部的span</span> </p> <span>div内部的最后一个span</span> <span style="color: red">外部span<span>内部span</span></span> </div> <span>div下面的span</span> <span>div下面的span</span> <div>弟弟救我 <p>龙儿我来了</p> </div> <span>帮你解毒</span> </body>
3.属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*属性选择器 [] 凡是username属性的*/ /*[username] {*/ /*background-color: gold;*/ /*}*/ /*[username = 'jason']{*/ /* background-color: blue;*/ /*}*/ input[username = 'jason']{ background-color: aqua; } </style> </head> <body> <input type="text" username="jason"> <input type="text" username="sean"> <input type="text" username = 'owen'> <p username ='tank'>数据库的刷卡司机</p> <div username = 'oscar'>奥斯卡</div> <span username = 'jason'> pp </span> </body> </html>
4.分组嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div,p,span{*/ /* color: blue;*/ /*}*/ /* .c1,#d1,p{*/ /* color: gold;*/ /* }*/ .c1 h1{ color: red; } </style> </head> <body> <div class="c1">快要下课了 我好饿 好饿 好饿 我真的好饿 <h1>我是h标签</h1> </div> <span id="d1">快要下课了 我好饿 好饿 好饿 我真的好饿</span> <p>快要下课了 我好饿 好饿 好饿 我真的好饿</p> </body> </html>
5.伪类选择器 a标签 hover visited input 标签 聚焦 a:visited input:focus
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ color: aqua; } a:hover{ color:black; } a:active{ color:green; } a:visited{ color:gray; } input:focus{ background-color: darkgreen; } </style> </head> <body> <a href="https://www.baidu.com">点我1</a> <a href="https://www.luffycity.com">点我2</a> <a href="https://www.sogo.com">点我2</a> <a href="https://www.google.com">点我2</a> </body> </html>
6. 伪元素选择器 给文本前后 加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before{
content: '弄撒类';
color: red;
}
p:after{
content: '?';
color: blue;
}
</style>
</head>
<body>
<p>今天26号</p>
</body>
</html>
参考博客：https://www.cnblogs.com/Dominic-Ji/p/10474769.html
4.样式操作
1.选择器优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <style>--> <!-- p {--> <!-- color: red;--> <!-- }--> <!-- </style>--> <!-- <link rel="stylesheet" href="mycss.css">--> <style> /*.c1 {*/ /* color: blue;*/ /*}*/ /*p {*/ /* color: deeppink;*/ /*}*/ #d1 { color: red; } </style> </head> <body> <!--<p style="color: aqua">今天周五啦 马上就要放假了</p>--> <!--1.选择器相同 引入方式不同 就近原则--> <p id="d1" class="c1" style="color: yellow">今天周五啦 马上就要放假了</p> <!--2.选择器不同 引入方式相同--> </body> </html>
2.宽高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 400px; background-color: #4e4e4e; } /*span是行内标签 没有作用*/ span { width: 200px; height: 400px; } </style> </head> <body> <div> 效率第一 </div> <span> 坚持就是胜利 </span> </body> </html>
3.字体属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-size: 48px; font-weight: lighter; /*lighter 变细 bound 变粗*/ /*color: yellow;*/ /*color: #ffffff;*/ /*color: rgb(255,103,0);*/ color: rgba(255,103,0,0.4); } </style> </head> <body> <p>床上明月光 ...how are you I am fine thankyou</p> </body> </html>
4.文字属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*text-align: justify;*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ text-decoration: line-through; font-size: 16px; text-indent: 32px; } a { text-decoration: none; color: yellow; } </style> </head> <body> <p>大的萨达是快乐的境况撒娇的煎熬是两块多</p> <a href="">点我有你好看~</a> </body> </html>
5.背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /* background-color: black;*/ /* color: white;*/ /*}*/ .c1 { width: 400px; height: 400px; /*background-color: gray;*/ /*background-image: url("111.png");*/ /*background-repeat: no-repeat; !*不平铺*!*/ /*!*background-repeat: repeat-x; *!*/ /*!*background-repeat: repeat-y;*!*/ /*background-position: 100px 10px; !*第一个调节左右 第二个调节上下*!*/ /*支持简写*/ background: center center url("111.png") yellow no-repeat ; } </style> </head> <body> <!--<div>--> <!-- 大空间的凯撒件打开--> <!--</div>--> <div class="c1"></div> </body> </html>
6.边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*border-style: dotted; !*样式*!*/ /*border-color: red; !*边框颜色*!*/ /*border-width: 10px; !*边框粗细*!*/ /*border-left: solid;*/ /*border-right: dashed;*/ /*border-top: dotted;*/ /*border-bottom: solid;*/ /*border-left-color: deeppink;*/ /*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/ /*简写*/ border: solid 3px red; /*只要把参数写进去就可以 不需要考虑顺序*/ } div { height: 500px; width: 500px; border: 3px solid red; } span { height: 200px; width: 200px; border: 5px solid green; } </style> </head> <body> <p> 看的撒科技大厦考虑到金卡圣诞节快乐撒娇 </p> <div>sakljdkasd</div> <span>hdsakljdklsad</span> </body> </html>
7.画圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 150px; width: 150px; border-radius: 50%; background-image: url("111.png"); background-repeat: no-repeat; border: 5px solid green; } </style> </head> <body> <div></div> </body> </html>
8.display 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<div style="height: 50px;width: 50px;background-color: red;display: inline">--> <!-- sadiasd--> <!--</div>--> <!--<div style="height: 50px;width: 50px;background-color: green;display: inline">--> <!-- sajdsad--> <!--</div>--> <!--<span style="background-color: red;height: 100px;width: 100px;display: inline-block">span</span>--> <!--<span style="background-color: green;height: 100px;width: 100px;display: inline-block">span</span>--> <!--inline-block能够让一个标签即有快二级标签可以设置长宽的特点 又有行内标签在一行展示的特点--> <div>div1</div> <!--<div style="display: none">div2</div>--> <div style="visibility:hidden">div2</div> <div>div3</div> <!--display: none隐藏标签 并且标签所占的位置也要让出来--> </body> </html>
9.盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; /*取消body标签自带的8px的外边距*/ } /*div {*/ /* border: 5px solid red;*/ /*}*/ .c1 { height: 100px; width: 100px; background-color: red; /*margin-bottom: 50px;*/ /*margin-left: 100px;*/ /*margin: 20px; !*上下左右*!*/ /*margin: 20px 40px; !*第一个是上下 第二个是左右*!*/ /*margin: 20px 40px 60px; !*上 左右 下*!*/ /*margin: 20px 40px 60px 80px; !*上 右 下 左 顺时针*!*/ /*margin: 0 auto; !*水平居中*!*/ } .c2 { margin-top: 20px; height: 100px; width: 100px; background-color: green; } .c3 { border: 3px solid black; height: 400px; width: 400px; /*padding-top: 20px;*/ /*padding-left: 40px;*/ /*padding: 20px;*/ padding: 20px 40px; /*padding: 20px;*/ /*padding: 20px;*/ /*padding跟margin简写规律一致*/ } p { margin: 0; } ul { padding-left: 0; } </style> </head> <body> <!--<div>啥都卡死的十大科技打卡</div>--> <!--<div class="c3">--> <!-- <div class="c1" id="d1"></div>--> <!--<!– <div class="c2" id="d2"></div>–>--> <!--</div>--> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
10.浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; /*取消body标签自带的8px的外边距*/ } /*div {*/ /* border: 5px solid red;*/ /*}*/ .c1 { height: 100px; width: 100px; background-color: red; /*margin-bottom: 50px;*/ /*margin-left: 100px;*/ /*margin: 20px; !*上下左右*!*/ /*margin: 20px 40px; !*第一个是上下 第二个是左右*!*/ /*margin: 20px 40px 60px; !*上 左右 下*!*/ /*margin: 20px 40px 60px 80px; !*上 右 下 左 顺时针*!*/ /*margin: 0 auto; !*水平居中*!*/ } .c2 { margin-top: 20px; height: 100px; width: 100px; background-color: green; } .c3 { border: 3px solid black; height: 400px; width: 400px; /*padding-top: 20px;*/ /*padding-left: 40px;*/ /*padding: 20px;*/ padding: 20px 40px; /*padding: 20px;*/ /*padding: 20px;*/ /*padding跟margin简写规律一致*/ } p { margin: 0; } ul { padding-left: 0; } </style> </head> <body> <!--<div>啥都卡死的十大科技打卡</div>--> <!--<div class="c3">--> <!-- <div class="c1" id="d1"></div>--> <!--<!– <div class="c2" id="d2"></div>–>--> <!--</div>--> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
浮动的简单应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; /*取消body标签自带的8px的外边距*/ } /*div {*/ /* border: 5px solid red;*/ /*}*/ .c1 { height: 100px; width: 100px; background-color: red; /*margin-bottom: 50px;*/ /*margin-left: 100px;*/ /*margin: 20px; !*上下左右*!*/ /*margin: 20px 40px; !*第一个是上下 第二个是左右*!*/ /*margin: 20px 40px 60px; !*上 左右 下*!*/ /*margin: 20px 40px 60px 80px; !*上 右 下 左 顺时针*!*/ /*margin: 0 auto; !*水平居中*!*/ } .c2 { margin-top: 20px; height: 100px; width: 100px; background-color: green; } .c3 { border: 3px solid black; height: 400px; width: 400px; /*padding-top: 20px;*/ /*padding-left: 40px;*/ /*padding: 20px;*/ padding: 20px 40px; /*padding: 20px;*/ /*padding: 20px;*/ /*padding跟margin简写规律一致*/ } p { margin: 0; } ul { padding-left: 0; } </style> </head> <body> <!--<div>啥都卡死的十大科技打卡</div>--> <!--<div class="c3">--> <!-- <div class="c1" id="d1"></div>--> <!--<!– <div class="c2" id="d2"></div>–>--> <!--</div>--> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <p>sakjdsadslad</p> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
清除浮动带来的影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } #d1 { border: 3px solid black; } .c1 { height: 100px; width: 100px; background-color: red; float: left; } .c2 { height: 100px; width: 100px; background-color: green; float: left; } .c3 { height: 150px; width: 100px; background-color: orange; float: left; } .clearfix:after { content: " "; display: block; clear: both; } </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <div class="c2"></div> <div class="c3"> sadkjajsdasjd </div> </div> </body> </html>
11.溢出属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } #d1 { border: 3px solid black; } .c1 { height: 100px; width: 100px; background-color: red; float: left; } .c2 { height: 100px; width: 100px; background-color: green; float: left; } .c3 { height: 150px; width: 100px; background-color: orange; float: left; } .clearfix:after { content: " "; display: block; clear: both; } </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <div class="c2"></div> <div class="c3"> sadkjajsdasjd </div> </div> </body> </html>
12.原型头像示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; background-color: antiquewhite; } .c1 { height: 100px; width: 100px; border-radius: 50%; border: 5px solid white; /*background-image: url("111.png");*/ /*background-repeat: no-repeat;*/ overflow: hidden; opacity: 0.4; } img { max-width: 100%; } </style> </head> <body> <div class="c1"> <img src="111.png" alt=""> </div> </body> </html>
13.定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .c1 { height: 100px; width: 100px; background-color: red; /*position: static; !*默认值*!*/ position: relative; /*相对定位*/ left: 100px; top: 100px; } .c2 { height: 50px; width: 100px; background: green; position: relative; } .c3 { position: absolute; height: 200px; width: 200px; background-color: orange; left: 100px; top: 50px; } .cc { height: 50px; width: 100px; background-color: #4e4e4e; color: white; position: fixed; bottom: 20px; right: 20px; } </style> </head> <body> <!--<div class="c1"></div>--> <!--<div class="c2">--> <!-- <div class="c3">空空的 什么都没有...</div>--> <!--</div>--> <div style="height: 1000px;background-color: red"></div> <div style="height: 1000px;background-color: green"></div> <div style="height: 1000px;background-color: orange"></div> <div class="cc">回到顶部</div> </body> </html>
14.脱离文档流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { background-color: red; height: 50px; width: 50px; /*position: relative;*/ } .c2 { background-color: green; height: 50px; width: 50px; /*position: absolute;*/ position: fixed; bottom: 20px; right: 20px; } .c3 { background-color: orange; height: 50px; width: 50px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
15.z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .modal { background-color: #808080; position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 999; opacity: 0.4; } .form { background-color: white; height: 200px; width: 100px; position: fixed; top: 50%; left: 50%; z-index: 1000; margin-top: -100px; margin-left: -50px; } </style> </head> <body> <div>我是最底下的那个</div> <div class="modal"></div> <div class="form"></div> </body> </html>
16.透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { background-color: rgba(128,128,128,0.4); } .c2 { background-color: rgb(128,128,128); opacity: 0.4; } </style> </head> <body> <div class="c1">阿萨德撒大家都</div> <div class="c2">阿萨德撒大家都</div> </body> </html>
