CSS
1 CSS的定义
css就是层叠样式表(Cascading Style Sheets)
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
简单地说就是给HTML标签添加样式，让它变的更加的好看
2 CSS的注释
# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
3 CSS的语法结构
# css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
4 CSS的三种引入方式
# css的三种引入方式
1.style标签内部直接书写
<style>
h1 {
color: burlywood;
}
</style>
2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
5 CSS选择器
5.1 基本选择器
5.1.1 id选择器
/*id选择器*/
/*找到id是d1的标签 将文本颜色变成绿黄色*/
#d1 {color: greenyellow;}
5.1.2 类选择器
/*类选择器*/
/*找到class值里面包含c1的标签*/
.c1 {color: red;}
5.1.3 元素(标签)选择器
/*元素(标签)选择器*/
/*找到所有的span标签*/
span {color: red;}
5.1.4 通用选择器
/*通用选择器*/
/*将html页面上所有的标签全部找到*/
* {color: green;}
5.2 组合选择器
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<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的父亲
...
"""
5.2.1 后代选择器
/*后代选择器*/
div span {color: red;}
5.2.2 儿子选择器
/*儿子选择器*/
div>span {color: red;}
5.2.3 毗邻选择器
/*毗邻选择器*/
/*同级别紧挨着的下面的第一个*/
div+span {color: aqua;}
5.2.4 弟弟选择器
/*弟弟选择器*/
/*同级别下面所有的span*/
div~span {color: red;}
5.3 属性选择器
"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*将所有 含有属性名username 的标签 背景色改为红色*/
[username] {background-color: red;}
/*找到所有 含有属性名username 并且 属性值是jason 的标签*/
[username='jason'] { background-color: orange;}
/*找到所有 含有属性名username 并且属性值是jason的input标签*/
/*注意: input后不能加空格*/
input[username='jason'] {background-color: wheat;}
5.4 伪类选择器
/*网址访问前的状态: a:link */
a:link {color: yellow}
/*鼠标悬浮在a标签上时的状态: a:hover*/
/*需要记住*/
a:hover {color: darkgray}
/*鼠标点击a标签后未松的状态: a:active*/
a:active {color: aqua}
/*网址浏览后的状态: a:visited*/
a:visited {color: red}
/*其他标签也能使用悬浮态*/
p:hover {color: blue;}
/*input框获取焦点 状态 (鼠标点击,进入了input框的状态)*/
input:focus {color: yellow;background-color: aqua}
5.5 伪元素选择器
/*修改第一个字的样式,部分符号不算第一个字,即可能连特殊符号和第一个字一起改变样式*/
p:first-letter {font-size: 48px;color: orange;}
/*在p标签开头 用css添加内容 该内容无法选中*/
p:before {content: '你说的对';color: blue;}
/*在p标签末尾 用css添加内容 该内容无法选中*/
p:after {content: '雨露均沾';color: orange;}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
5.6 选择器的分组与嵌套
/*分组*/
/*逗号表示并列关系*/
div,p,span {color: yellow;}
d1,.c1,span {color: orange;}
/*嵌套*/
div p span {color: yellow;}
/*div标签内的p标签内的span标签 文字改成黄色*/
d1 .c1 span {color: orange;}
/*id为d1的标签内的属于c1类的标签内的span标签 文字改成橘色*/
5.7 选择器优先级
1.选择器相同 使用不同方式选中同一个标签时:
就近原则:谁离标签更近就听谁的
因为多次规定同一个标签的样式会产生覆盖的效果
2.选择器不同 都选中了同一个标签时:
行内 > id选择器 > 类选择器 > 标签选择器
精确度越高越有效
6 css属性相关
6.1 高度、宽度属性
/*块儿级标签能设置高度和宽度*/
p {
background-color: red;
height: 200px;
width: 400px;
}
/*行内标签无法设置长宽 就算写了 也不会生效*/
span {
background-color: green;
height: 200px;
width: 400px;
}
6.2 字体属性
字体类型,字体大小,字体粗细,字体颜色
p {
/*字体类型设置*/
font-family: "Arial Black","微软雅黑","...";
/*如果第一个不生效,就使用第二个字体类型 可以写多个备用*/
/*字体大小设置*/
font-size: 24px;
/*字体粗细设置*/
font-weight: inherit;
/*bolder粗 lighter细 也可以写100~900的数字 inherit继承父元素的粗细值*/
/*字体颜色设置*/
color: red; /*1. 直接写颜色英文*/
color: #ee762e; /*2. 颜色编号*/
color: rgb(128,23,45); /*3. 三基色 数字 范围0-255*/
color: rgba(23, 128, 91, 0.9); /*4. 第四个参数是颜色的透明度 范围是0-1*/
}
/*
当你想要查看某种颜色,可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
3 多软件结合使用
*/
6.3 文字属性
文本居中,左对齐,右对齐,两端对齐
文本添加下划线,上划线,删除线,取消装饰线
文本字体大小,文本首行缩进
注意: a标签删除链接的下划线方法
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标签链接去掉自带的下划线 需要掌握*/
a {text-decoration: none;}
6.4 背景图片
background-image: url("222.png");
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
/*添加背景图片 background-image: url("222.png"); */
background-image: url("222.png");
/*产生高级效果*/
background-attachment: fixed;
}
#d4 {
height: 500px;
background-color: aqua;
}
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
6.5 边框
设置 上下左右 边框的 宽度,颜色,边框类型
p {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
border-left-width: 5px;
border-left-color: red;
border-left-style: dotted;
border-right-width: 10px;
border-right-color: greenyellow;
border-right-style: solid;
border-top-width: 15px;
border-top-color: deeppink;
border-top-style: dashed;
border-bottom-width: 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%即可 长宽一样就是圆 不一样就是椭圆*/
}
<p>穷人 被diss到了 哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
6.6 display属性
#d1 {
display: none; /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
display: inline; /*将标签设置为行内标签的特点*/
display: block; /*将标签设置成块儿级标签的特点*/
display: inline-block; /*标签即可以在一行显示又可以设置长宽*/
}
#d2 {
display: inline;
}
#d1 {
display: block; /*将标签设置成块儿级标签的特点*/
}
#d2 {
display: block;
}
#d1 {
display: inline-block;
}
#d2 {
display: inline-block; /*标签即可以在一行显示又可以设置长宽*/
}
注意:
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
这个和display: none;的隐藏不一样
<div style="display: none">div1</div>
<div>div2</div>
<div>div4</div>
<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>
<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>
<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>
<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>
<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>
<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>
6.7 盒子模型
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
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一模一样
}
<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;width: 400px">
<div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>
</div>
<p>ppp</p>
6.8 浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
ps:浏览器是优先展示文本内容的
如果下层标签中的文本内容被上层标签遮盖住,可能会自动改变形状大小,使文本能被用户看到
6.9 解决浮动带来的影响
# 浮动带来的影响:
# 会造成父标签塌陷的问题
"""
解决浮动带来的影响 推导步骤
第一种.自己加一个div设置高度
太麻烦
第二种.利用clear属性
#d4 {
clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/
}
还可以改进
通用的解决浮动带来的影响方法:
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content: '';
display: block;
clear:both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""
6.10 溢出属性
标签的内容超出标签的大小时会出现溢出的问题
可以使用overflow属性对超出部分进行设置
p {
height: 100px;
width: 50px;
border: 3px solid red;
overflow: visible; /*默认就是可见 溢出还是展示*/
overflow: hidden; /*溢出部分直接隐藏*/
overflow: scroll; /*设置成上下滚动条的形式*/
overflow: auto; /*自动设置(滚动条)*/
}
6.11 定位
定位可以有三种定位方法
在未定位前是静态,定位后是另一个状态
left: 20px 左边留20px
right: 20px 右边留20px
top: 20px 上边留20px
bottom: 20px 下边留20px
position: static 无法修改位置
position: relative 相对该标签的原来位置修改 不脱离文档流(不浮动)
position: absolute 以该标签的父类为基准修改 脱离文档流(浮动)
position: fixed 以整个显示页面为基准修改,固定不动 脱离文档流(浮动)
6.11.1 静态static
所有的标签默认都是静态的static，无法改变位置
6.11.2 相对定位 relative
相对于标签原来的位置做移动relative
6.11.3 绝对定位absolute (常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
注意点: 使用绝对定位时, 父标签必须定位过(除了body),不能是静态
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
6.11.4 固定定位fixed (常用)
相对于浏览器窗口固定在某个位置
eg:右侧小广告
/*相对定位*/
#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;
}
6.12 验证浮动和定位是否脱离文档流(原来的位置是否还保留)
"""
验证浮动和定位是否脱离文档流
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流的
1.相对定位
# 脱离文档流的
1.浮动
2.绝对定位
3.固定定位
<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow"></div>
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>
<!--当没有父标签做到位 就参照与body-->
<div style="height: 100px;width: 200px;background-color: blue;"></div>
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>
6.13 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;
/*调完50%后会发现div标签的左上角处于屏幕中间*/
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>
6.14 透明度opacity
# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
opacity: 0.5;
posted on
