前端之CSS
前端之CSS
CSS是层叠样式表，就是给html标签添加样式，让其更美观
CSS的注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
# 通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
CSS语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
CSS的三种引入方式
-
style标签直接书写css代码
<style> h1{ color: burlywood; } </style> -
link标签引入外部css文件，正规
<link rel="stylesheet" href="mycss.css"> -
行内式，直接html标签内书写样式，一般不推荐
<h1 style="color: green">老板好 要上课吗?</h1>
CSS选择器
所谓选择器，就是确定标签位置的方法
基本选择器
<body>
<div id="d1" class="c1 c2">div
<p>div里面的p</p>
<span>div里面的span</span>
</div>
<p id="d2" class="c1 c2">ppp</p>
<span id="d3" class="c2">span111</span>
<span id="d4" class="c3">span222</span>
</body>
-
id选择器，根据id值确定一个标签
#id_name{ /*找到id是d1的标签 将文本颜色变成红色*/ color:red; } -
class选择器，根据class值确定一类标签
.class_name{ /* 找到class值里面包含c1的标签*/ color:red; } -
元素/标签选择器，根据标签名确定一堆span标签
span{/*找到所有的span标签*/ color:red; } -
通用选择器，选择所有标签
*{/*将html页面上所有的标签全部找到*/ color:red; }
组合选择器
<body>
<span>span1</span>
<span>span2</span>
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
<p>ppp</p>
<span>span</span>
</body>
"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
<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
div span{ color:red; } -
儿子选择器，>连接，选择内部第一层的所有span
div>span{ color:red; } -
毗邻选择器，+连接，选择div同级别的紧挨着的下面一个span，隔着一个都不行
div+span{ /*同级别紧挨着的下面的第一个*/ color:red; } -
弟弟选择器，~连接，选择同级别下面所有的span
div~span{/*同级别下面所有的span*/ color:red; }
属性选择器
属性选择器，以[]作为标志。
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="kevin">
<p username="tank">水箱老师</p>
<div username="egon">矮子老师</div>
<span username="jason">jason老师 </span>
</body>
-
含有某个属性的标签
[username]{ /*将所有含有属性名是username的标签背景色改为红色*/ color:red; } -
含有某个属性且有某个值的标签，选择属性名为
[username='jason']{ /*找到所有属性名是username并且属性值是jason的标签*/ color:red; } -
含有某个属性且有某个值的某个标签
input[username='jason']{/*找到所有属性名是username并且属性值是jason的input标签*/ color:red; }
分组与嵌套
div,p,span{
color:yellow;
}/* 逗号表示并列关系*/
css伪类
css伪类选择器
a:link {color red;}/* 未访问的连接*/
a:visited{color yellow;}/* 已访问的连接*/
a:hover{ color bule}/*鼠标滑过的连接*/
a:active{ color whilte}/*已选中的连接*/
注意：css定义中，a:hover必须在a:link和a:visited之后才行，a:active必须放在a:hover之后
CSS伪类元素
| 选择器 | 示例 | 说明 |
|---|---|---|
| :first-letter | p:first-letter | 选择每个<p>元素的第一个字母 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :focus | input:focus | 选择元素输入后具有焦点 |
选择器的优先级
"""
id 选择器
类选择器
标签选择武器
行内选择器
"""
# 选择器相同。书写顺序不同：
就近原则：谁离标签越近就听谁的
# 选择器不同：
行内>id 选择器>类选择器>标签选择器
CSS相关属性
字体属性
font-size: 15px; # 字体大小
font-family: "Arial Black"; # 字体形状 如微软雅黑，宋体等等
color: rgb(114,114,114); #字体颜色
font-weight: bold # 字体加粗
文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本的颜色一般用rgb(110,110,110) |
| text-align | 对齐文本中的元素 |
| text-indent | 缩进元素中文本的首行 |
| text-decoration | 向文本添加修饰 如：把a标签自带的下划线去掉，删除线等 |
| line-height | 设置行高 |
背景图片
| property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-image | 把图像设置为背景。 |
| background-color | 设置元素的背景颜色。 |
| background-repeat | 设置背景图像是否及如何重复。repeat-x：背景图片只在水平方向上平铺 |
p {background-color: gray; padding: 20px;}
边框
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red; # 像素1px，实心，红色
}
display属性
| 值 | 描述 |
|---|---|
| display:"none" | html文档中元素存在，但是浏览器中不显示，一般配合JS |
| display:"block" | 默认沾满整个宽度，设置了指定宽度，会有margin填充剩下的部分 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
-
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
盒子模型
| 值 | 描述 |
|---|---|
| margin | 外边距，标签与标签的间距 |
| padding | 内填充，标签内容到边框的间距 |
| Border(边框) | 边框，标签边框 |
| Content(内容) | 盒子的内容，显示文本和图像 |
/*每个防线单独设置*/
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
/*水平居中*/
margin: 0 auto;
padding和margin类似，都有四个方向间距设置，且规律一毛一样。
border也有四个方向粗细、颜色、线条样式的设置。也支持简写设置，和margin规律一模一样。
border-color: red green blue /*上，左右，下*/
border: none; /*清除边框， 或者 border:0;*/
外边框塌陷
就是上线的margin边距不叠加，两个标签之间margin最大的间隔
浮动
浮动的元素没有块级的概念，浮动之后，本身多大就占多大位置；
一般页面布局设计，都是先用浮动前规划好。
Copyfloat: left; /*左浮动*/
float:right; /*右浮动*/
解决浮动带来的问题
浮动会给父标签带来塌陷 解决办法三种
-
给之间加一个div设置高度
-
利用clear属性
#d4{clear:left;} -
通用的解决浮动带来的影响
.clearfix:after{ content: ''; display: block; clear:both;} # 之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性
溢出属性
p{
height;1000px;
width:50px;
overflow:visible; /* 默认就是可见的，但是溢出来的 还是可见的*/
overflow:hidden; /* 溢出部分直接隐藏*/
overflow:auto;
}
定位
-
静态
所有的标签都是默认的static，无法改变位置
-
行对定位
相对于标签原来的位置移动relative
-
绝对定位
相对已经定位的父标签做移动，当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，当你基于该标签的做定位
-
固定定位
相对于浏览器窗口固定在某个位置
验证浮动和定位是否脱离文档流
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
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>
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>
透明度
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
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>
