层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
# 注释 /*单行注释*/ /* 多行注释1 多行注释2 多行注释3 */ 通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多) /*这是博客园首页的css样式文件*/ /*顶部导航条样式*/ ... /*左侧菜单栏样式*/ ... /*右侧菜单栏样式*/ ... # css的语法结构 选择器 { 属性1:值1; 属性2:值2; 属性3:值3; 属性4:值4; } # css的三种引入方式 1.style标签内部直接书写(为了教学演示方便我们用第一种) <style> h1 { color: burlywood; } </style> 2.link标签引入外部css文件(最正规的方式 解耦合) <link rel="stylesheet" href="mycss.css"> 3.行内式(一般不用) <h1 style="color: green">老板好 要上课吗?</h1>
# CSS选择器
### 基本选择器
# id选择器 # 类选择器 # 元素/标签选择器 # 通用选择器 <style> /*id选择器*/ /*#d1 { !*找到id是d1的标签 将文本颜色变成绿黄色*!*/ /* color: greenyellow;*/ /*}*/ /*类选择器*/ /*.c1 { !*找到class值里面包含c1的标签*!*/ /* color: red;*/ /*}*/ /*元素(标签)选择器*/ /*span { !*找到所有的span标签*!*/ /* color: red;*/ /*}*/ /*通用选择器*/ /** { !*将html页面上所有的标签全部找到*!*/ /* color: green;*/ /*}*/ </style>
### 组合选择器
在前端 我们将标签的嵌套用亲戚关系来表述层级 <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 span {*/ /* color: red;*/ /*}*/ /*儿子选择器*/ /*div>span {*/ /* color: red;*/ /*}*/ /*毗邻选择器*/ /*div+span { !*同级别紧挨着的下面的第一个*!*/ /* color: aqua;*/ /*}*/ /*弟弟选择器*/ div~span { /*同级别下面所有的span*/ color: red; }
### 属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] { !*将所有含有属性名是username的标签背景色改为红色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有属性名是username并且属性值是jason的标签*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有属性名是username并且属性值是jason的input标签*!*/
/* background-color: wheat;*/
/*}*/
分组与嵌套
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
伪类选择器
<!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:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after { content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
选择器优先级
""" 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> /* 1.选择器相同 书写顺序不同 就近原则:谁离标签更近就听谁的 2.选择器不同 ... 行内 > id选择器 > 类选择器 > 标签选择器 精确度越高越有效 */ #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>
css属性相关
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*行内标签无法设置长宽 就算你写了 也不会生效*/ } </style>
字体属性
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
文字属性
p {
/*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;*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
背景图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div { height: 800px; width: 800px; /*background-color: red;*/ /*背景图片*/ /*background-image: url("222.png"); !*默认要全部铺满*!*/ /*background-repeat: no-repeat; !*不铺*!*/ /*background-repeat: no-repeat; !*不铺*!*/ /*background-repeat:repeat-x; */ /*background-repeat:repeat-y; */ /*其实浏览器不是一个平面 是一个三维立体结构 z轴指向用户 越大离用户越近 */ /*background-position:center center; !*第一个左 第二个上*!*/ /*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/ background: red url("222.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> <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>
边框
<!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>穷人 被diss到了 哭泣.png</p> <div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div> <div id="d1"></div> </body> </html>
display属性
<!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;">>01</div>--> <!--<div id="d2" style="height: 100px; 100px;">>02</div>--> <!--<span id="d1" style="height: 100px; 100px;">>span</span>--> <!--<span id="d2" style="height: 100px; 100px;">>span</span>--> <!--<div id="d1" style="height: 100px; 100px;">>01</div>--> <!--<div id="d2" style="height: 100px; 100px;">>02</div>--> </body> </html> # 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置 # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效
盒子模型
""" 盒子模型 就以快递盒为例 快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距) 盒子的厚度(标签的边框 border) 盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距) 物体的大小(内容 content) 如果你想要调整标签与标签之间的距离 你就可以调整margin 浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除 """ <!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; /*上下左右全是0 /*margin: 10px 20px; !* 第一个上下 第二个左右*!*/ /*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/ /*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/ } /*p {*/ /* margin-left: 0;*/ /* margin-top: 0;*/ /* margin-right: 0;*/ /* margin-bottom: 0;*/ /*}*/ #d1 { margin-bottom: 50px; } #d2 { margin-top: 20px; /*不叠加 只取大的*/ } #dd { margin: 0 auto; /*只能做到标签的水平居中*/ } p { border: 3px solid red; /*padding-left: 10px;*/ /*padding-top: 20px;*/ /*padding-right: 20px;*/ /*padding-bottom: 50px;*/ /*padding: 10px;*/ /*padding: 10px 20px;*/ /*padding: 10px 20px 30px;*/ /*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/ } </style> </head> <body> <!-- <p style="border: 1px solid red;" id="d1">ppp</p>--> <!-- <p style="border: 1px solid orange;" id="d2">ppp</p>--> <!--<div style="border: 3px solid red;height: 400px; 400px">--> <!-- <div id='dd' style="border: 1px solid orange;height: 50px; 50px;"></div>--> <!--</div>--> <p>ppp</p> </body> </html>
浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大""" 只要是设计到页面的布局一般都是用浮动来提前规划好 <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>
### 解决浮动带来的影响
# 浮动带来的影响
会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
1.自己加一个div设置高度
2.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
3.通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
### 溢出属性
p { height: 100px; 50px; border: 3px solid red; /*overflow: visible; !*默认就是可见 溢出还是展示*!*/ /*overflow: hidden; !*溢出部分直接隐藏*!*/ /*overflow: scroll; !*设置成上下滚动条的形式*!*/ /*overflow: auto;*/ } <style> body { margin: 0; background-color: #4e4e4e; } #d1 { height: 120px; width: 120px; border-radius: 50%; border: 5px solid white; margin: 0 auto; overflow: hidden; } #d1>img { /*max- 100%;*/ /* 100%;*/ /*占标签100%比例*/ } </style> </head> <body> <div id="d1"> <img src="111.jpg" alt=""> </div>
### 定位
### 定位
* 静态
所有的标签默认都是静态的static，无法改变位置
* 相对定位(了解)
相对于标签原来的位置做移动relative
* 绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)absolute
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
* 固定定位(常用)
相对于浏览器窗口固定在某个位置fixed
eg:右侧小广告
<!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>
注：**ps:**浏览器是优先展示文本内容的
### 验证浮动和定位是否脱离文档流(原来的位置是否还保留)
""" 浮动 相对定位 绝对定位 固定定位 """ # 不脱离文档流 1.相对定位 # 脱离文档流 1.浮动 2.绝对定位 3.固定定位 <!--<div style="height: 100px; 200px;position: relative;left: 500px"></div>--> <!--<div style="height: 100px; 200px;background-color: greenyellow"></div>--> <!--<div style="height: 100px; 200px;"></div>--> <!--<div style="height: 100px; 200px;position: absolute;left: 500px"></div>--> <!--当没有父标签做到位 就参照与body--> <!--<div style="height: 100px; 200px;"></div>--> <div style="height: 100px; 200px;"></div> <div style="height: 100px; 200px;position: fixed;bottom: 10px;right: 20px"></div> <div style="height: 100px; 200px;"></div>
### z-index模态框
eg:百度登陆页面 其实是三层结构 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
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
# 页面搭建
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客首页</title> <link rel="stylesheet" href="myblog.css"> </head> <body> <div class="blog_left"> <div class="blog_avatar"> <img src="111.jpg" alt=""> </div> <div class="blog_title"> <p>靓仔的博客</p> </div> <div class="blog_info">a <p>装备差进什么本都是血赚</p> </div> <div class="blog_link"> <ul> <li><a href="">关于我</a></li> <li><a href="">微博</a></li> <li><a href="">微信公众号</a></li> </ul> </div> <div class="blog_tag"> <ul> <li><a href="">#Python</a></li> <li><a href="">#Java</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> <div class="blog_right"> <div class="article"> <div class="article_title"> <span class="title">赐我个女朋友吧</span> <span class="date">2020-05-14</span> </div> <div class="article_body"> <p>赐我一个可盐可甜的女朋友把</p> </div> <div class="article_bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article_title"> <span class="title">赐我个女朋友吧</span> <span class="date">2020-05-14</span> </div> <div class="article_body"> <p>赐我一个可盐可甜的女朋友把</p> </div> <div class="article_bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article_title"> <span class="title">赐我个女朋友吧</span> <span class="date">2020-05-14</span> </div> <div class="article_body"> <p>赐我一个可盐可甜的女朋友把</p> </div> <div class="article_bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article_title"> <span class="title">赐我个女朋友吧</span> <span class="date">2020-05-14</span> </div> <div class="article_body"> <p>赐我一个可盐可甜的女朋友把</p> </div> <div class="article_bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article_title"> <span class="title">赐我个女朋友吧</span> <span class="date">2020-05-14</span> </div> <div class="article_body"> <p>赐我一个可盐可甜的女朋友把</p> </div> <div class="article_bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article_title"> <span class="title">赐我个女朋友吧</span> <span class="date">2020-05-14</span> </div> <div class="article_body"> <p>赐我一个可盐可甜的女朋友把</p> </div> <div class="article_bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> </div> </body> </html>
CSS
/*通用样式*/
body {
margin: 0;
background_color: #eeeeee;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*左侧样式*/
.blog_left {
position: fixed;
height: 100%;
20%;
background-color: #4e4e4e;
float: left;
}
.blog_avatar {
height: 150px;
150px;
border: 2px solid white;
border-radius: 50%;
margin: 15px auto;
overflow: hidden;
}
.blog_avatar img {
100%;
}
.blog_title,.blog_info {
color: darkgray;
font-size: 18px;
text-align: center;
}
.blog_link,.blog_tag {
font-size: 24px;
text-align: center;
}
.blog_link a,.blog_tag a{
color:darkgray;
}
.blog_link a:hover,.blog_tag a:hover{
color: white;
}
.blog_link ul,.blog_tag ul {
margin-top: 40px;
}
/*右侧样式*/
.blog_right {
float: right;
80%;
height: 1000px;
}
.article {
background-color: white;
margin: 10px 20px 20px 10px;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5)
}
.article_title {
border-left: 8px solid red;
text-indent: 1em;
}
.title {
font-size: 30px
}
.date {
font-size: 18;
float: right;
font-weight: bolder;
margin: 20px 20px;
}
.article_body {
font-size: 18px;
text-indent: 1em;
border-bottom: 1px solid rgba(0,0,0,0.5);
}
.article_bottom {
padding-top: 20px;
padding-left: 30px;
padding-bottom: 10px;
}