CSS：层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释 /*单行注释*/ /* 多行注释1 多行注释2 多行注释3 */ /*这是博客园首页的css样式文件*/ /*顶部导航条样式*/ ... /*左侧菜单栏样式*/ ... /*右侧菜单栏样式*/ ...
语法结构 与 引用方式
css的语法结构 选择器 { 属性1:值1; 属性2:值2; } css的三种引入方式 1.style标签内部直接书写 <style> h1 { color: burlywood; } </style> 2.link标签引入外部css文件 <link rel="stylesheet" href="mycss.css"> 3.行内式 <h1 style="color: green">老板好 要上课吗?</h1>
id选择器 （使用#加选择器名称） /*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/ /* color: greenyellow;*/ /*}*/ 类选择器（使用. 加选择器名称） /*.c1 { !*找到class值里面包含c1的标签*!*/ /* color: red;*/ /*}*/ 元素/标签选择器（使用元素名称（p,span）） /*span { !*找到所有的span标签*!*/ /* color: red;*/ /*}*/ 通用选择器（使用*获取全部） /** { !*将html页面上所有的标签全部找到*!*/ /* color: green;*/ /*}*/
<div>div <p>div p</p> <p>div p <span>div p span</span> </p> <span>span</span> <span>span</span> </div> div里面的p span都是div的后代 p是div的儿子 p里面的span是p的儿子 是div的孙子 div是p的父亲
# 后代选择器 （div + 元素名称） /*div span {*/ /* color: red;*/ /*}*/ # 儿子选择器 （div > 元素名称） /*div>span {*/ /* color: red;*/ /*}*/ # 毗邻选择器（div + 元素名称） /*div+span { !*同级别紧挨着的下面的第一个*!*/ /* color: aqua;*/ /*}*/ # 弟弟选择器（div ~ 元素名称） /* div~span { /*同级别下面所有的span*/ color: red; }*/
# 属性选择器是以[]作为标志的 1 含有某个属性（[username] ） /*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/ /* background-color: red;*/ /*}*/ 2 含有某个属性并且有某个值（[username='jason'] ） /*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/ /* background-color: orange;*/ /*}*/ 3 含有某个属性并且有某个值的某个标签（input[username='jason'] ） /*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/ /* background-color: wheat;*/ /*}*/
分组和嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
嵌套
多种选择器可以混合起来使用
#d1,.c1,span {
color: orange;
}
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: black; } a:link { /*访问之前的状态*/ color: red; } a:hover { /*需要记住*/ color: aqua; /*鼠标悬浮态*/ } a:active { color: black; /*鼠标点击不松开的状态 激活态*/ } a:visited { color: darkgray; /*访问之后的状态*/ } p { color: darkgray; font-size: 48px; } p:hover { color: white; } input:focus { /*input框获取焦点(鼠标点了input框)*/ background-color: red; } </style> </head> <body> <a href="https://www.jd.com/">小轩在不在?</a> <p>点我有你好看哦</p> <input type="text"> </body> </html>
p:before 在每个<p>元素之前插入内容 p:after 在每个<p>元素之后插入内容
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的
2.选择器不同 ...
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d1 { color: aqua; } /*.c1 {*/ /* color: orange;*/ /*}*/ /*p {*/ /* color: red;*/ /*}*/ </style> <!-- <link rel="stylesheet" href="mycss1.css">--> </head> <body> <p id="d1" class="c1" style="color: blue">前途一片光明</p> </body> </html>
1.设置高度与宽度
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*注意：行内标签无法设置长宽 就算你写了 也不会生效*/ } </style>
2.字体属性
font-family: 'Lucida Bright' 设置字体样式
font-size: 24px 设置字体大小
font-weight: lighter/bold/border/ 设置字体宽度
color: red; 字体颜色
color: #ee762e; 颜色编号
color: rgb(128,23,45); 三基色 数字 范围0-255
color: rgba(23, 128, 91, 0.9); 第四个参数是颜色的透明度 范围是0-1
3.文字属性
text-align: center; 居中
text-align: right; 右居中
text-align: left; 左居中
text-align: justify; 两端对齐
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线
text-decoration: none; 没有样式
text-decoration: none; 主要用于给a标签去掉自带的下划线
4.背景属性
width 宽度
height 高度
background-color 背景颜色
background-image 背景图
background-repeat 平铺
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d1 { height: 500px; background-color: red; } #d2 { height: 500px; background-color: green; } #d3 { height: 500px; background-image: url("222.png"); background-attachment: fixed; } #d4 { height: 500px; background-color: aqua; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> </body> </html>
5.外边框
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
border-radius 画圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { background-color: red; border-width: 5px; border-style: solid; border-color: green; } div { /*border-left- 5px;*/ /*border-left-color: red;*/ /*border-left-style: dotted;*/ /*border-right- 10px;*/ /*border-right-color: greenyellow;*/ /*border-right-style: solid;*/ /*border-top- 15px;*/ /*border-top-color: deeppink;*/ /*border-top-style: dashed;*/ /*border-bottom- 10px;*/ /*border-bottom-color: tomato;*/ /*border-bottom-style: solid;*/ border: 3px solid red; /*三者位置可以随意写*/ } #d1 { background-color: greenyellow; height: 400px; width: 400px; border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/ } </style> </head> <body> <p>穷人 哭泣.png</p> <div>求赐我一个高富帅吧！！！</div> <div id="d1"></div> </body> </html>
6.display属性
display:"none" HTML文档中元素存在，但是在浏览器中不显示。
display:"block" 用于设置块标签。
display:"inline" 按行内元素显示
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
display:"none" ：隐藏不占位置
visibility: hidden： 隐藏占位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*#d1 {*/ /* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/ /* display: inline; !*将标签设置为行内标签的特点*!*/ /*}*/ /*#d2 {*/ /* display: inline;*/ /*}*/ /*#d1 {*/ /* display: block; !*将标签设置成块儿级标签的特点*!*/ /*}*/ /*#d2 {*/ /* display: block;*/ /*}*/ /*#d1 {*/ /* display: inline-block;*/ /*}*/ /*#d2 {*/ /* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/ /*}*/ </style> </head> <body> <div style="display: none">div1</div> <div>div2</div> <div style="visibility: hidden">单纯的隐藏 位置还在</div> <div>div4</div> <!--<div id="d1" style="height: 100px; 100px;background-color: red">01</div>--> <!--<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>--> <!--<span id="d1" style="height: 100px; 100px;background-color: red">span</span>--> <!--<span id="d2" style="height: 100px; 100px;background-color: greenyellow">span</span>--> <!--<div id="d1" style="height: 100px; 100px;background-color: red">01</div>--> <!--<div id="d2" style="height: 100px; 100px;background-color: greenyellow">02</div>--> </body> </html>
盒子模型
margin: 用于控制元素与元素之间的距离；
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。
单边外边距属性：
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
简写属性：
margin:10px 20px 20px 10px；
上边距为10px
右边距为20px
下边距为20px
左边距为10px
margin:10px 20px 10px;
上边距为10px
左右边距为20px
下边距为10px
margin:10px 20px;
上下边距为10px
左右边距为20px
margin:25px;
所有的4个边距都是25px
居中
margin: 0 auto;
<style> body { margin: 0; } #d1 { height: 200px; width: 200px; background-color: red; float: left; /*浮动 浮到空中往左飘*/ } #d2 { height: 200px; width: 200px; background-color: greenyellow; float: right; /*浮动 浮到空中往右飘*/ } </style>
浮动带来的影响：会造成父标签塌陷的问题
清除浮动
清除浮动的副作用（父标签塌陷问题）
主要有三种方式：
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法：
.clearfix:after { content: ""; display: block; clear: both; }
溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
定位
-
静态：所有的标签默认都是静态的static，无法改变位置
-
相对定位：相对于标签原来的位置做移动relative
-
绝对定位：相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位：相对于浏览器窗口固定在某个位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } #d1 { height: 100px; width: 100px; background-color: red; left: 50px; /*从左往右 如果是负数 方向则相反*/ top: 50px; /*从上往下 如果是负数 方向则相反*/ /*position: static; !*默认是static无法修改位置*!*/ position: relative; /*相对定位 标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签 虽然你哪怕没有动 但是你的性质也已经改变了 */ } #d2 { height: 100px; width: 200px; background-color: red; position: relative; /*已经定位过了*/ } #d3 { height: 200px; width: 400px; background-color: yellowgreen; position: absolute; left: 200px; top: 100px; } #d4 { position: fixed; /*写了fixed之后 定位就是依据浏览器窗口*/ bottom: 10px; right: 20px; height: 50px; width: 100px; background-color: white; border: 3px solid black; } </style> </head> <body> <!-- <div id="d1"></div>--> <!--<div id="d2">--> <!-- <div id="d3"></div>--> <!--</div>--> <div style="height: 500px;background-color: red"></div> <div style="height: 500px;background-color: greenyellow"></div> <div style="height: 500px;background-color: blue"></div> <div id="d4">回到顶部</div> </body> </html>
验证浮动和定位是否脱离文档流
不脱离文档流
1.相对定位（relative）
脱离文档流
1.浮动（float）
2.绝对定位（absolute）
3.固定定位（fixed）
float和position的区别
float：半脱离文档流
position：全脱离文档流
<div style="height: 100px; 200px;background-color: red;position: relative;left: 500px"></div> <div style="height: 100px; 200px;background-color: greenyellow"></div>
<div style="height: 100px; 200px;background-color: red;"></div> <div style="height: 100px; 200px;background-color: greenyellow;position: absolute;left: 500px"></div> 当没有父标签做到位 就参照与body <div style="height: 100px; 200px;background-color: blue;"></div>
<div style="height: 100px; 200px;background-color: red;"></div> <div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div> <div style="height: 100px; 200px;background-color: blue;"></div>
z-index模态框
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .cover { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 99; } .modal { background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; } </style> </head> <body> <div>这是最底层的页面内容</div> <div class="cover"></div> <div class="modal"> <h1>登陆页面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>点我点我~</button> </div> </body> </html>
透明度opacity
取值范围是0~1，0是完全透明，1是完全不透明。
浮动带来的影响会造成父标签塌陷的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="内容填充.css"> </head> <body> <div class="left"> <!--- 左侧 ---> <div class="avatar"> <img src="111.jpg" alt=""><!--- 头像 ---> </div> <div class="title"> <p>海绵宝宝的博客</p><!--- 标题 ---> </div> <div class="info"> <p>郑惠雯真的太太太太胖了！！赶紧减肥</p><!--- 信息 ---> </div> <div class="link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="tag"> <ul> <li><a href=""># Python  </a></li> <li><a href=""># Java</a></li> </ul> </div> </div> <div class="right"> <!--- 右侧 ---> <div class="article"> <div class="article-title"> <span class="title-1">美貌</span> <span class="data">2020/5/14</span> </div> <div class="body"> <p>负责美美哒！！！</p> </div> <hr> <div class="bottom"> <span>#相册</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title-1">减肥</span> <span class="data">2020/5/12</span> </div> <div class="body"> <p>赶紧减肥，天热可以露露！！</p> </div> <hr> <div class="bottom"> <span>#减肥日记</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title-1">瘦一点</span> <span class="data">2020/5/11</span> </div> <div class="body"> <p>希望明天我可以瘦到95，希望愿望成真，神快点实现我的愿望吧，救救孩子！！！</p> </div> <hr> <div class="bottom"> <span>#减肥日记</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title-1">学习</span> <span class="data">2020/5/2</span> </div> <div class="body"> <p>多方面提升！！</p> </div> <hr> <div class="bottom"> <span>#Python</span> <span>#MySQL</span> </div> </div> </div> </body>
/*通用样式*/ body{ margin: 0; /*去除边框*/ background-color: #b0b0b0; /*修改背景色*/ } a{ text-decoration: none; /*去除下划线*/ } ul{ list-style: none; /*去除小圆点*/ padding: 0; /*去除边框*/ } /*左侧样式*/ .left{ float: left; width: 20%; height: 100%; position: fixed; background-color: dimgrey; } .avatar{ height: 150px; width: 150px; border-radius: 50%; border: 3px solid white; margin: 10px auto; overflow: hidden; } .avatar img{max-width: 100%} .title,.info { color: white; font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-size: 16px; text-align: center; } .title{font-size: 25px; } .link,.tag{ font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif; font-size: 22px; text-align: center; margin-top: 50px; } .link a,.tag a {color: white} .link a:hover,.tag a:hover {color: rosybrown } /*右侧样式*/ .right{ float: right; width: 80%; height: 1000px; } .article{ background-color:white; margin: 10px 20px; box-shadow: 5px 5px 5px 5px rgba(129,120,200,0.5); } .title-1{ font-family: 'Ubuntu', 'Lucida Grande', 'Lucida Sans Unicode', 'Geneva', 'Verdana', sans-serif; font-size: 30px; font-weight: bolder; } .article-title{ border-left: 5px solid brown; text-indent: 2em; } .data{ float: right; font-weight: lighter; margin: 10px; } .body{ font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-size: 20px; text-indent: 2em; } .bottom{ text-indent: 2em; }
