CSS
层叠样式表(Cascading Style Sheets): 就是给HTML标签添加样式的, 让它变得更好看
注释
/*单行注释*/
/*
多行注释1
多行注释2
*/
CSS的语法结构
选择器 {
属性1: 值1;
属性2: 值2;
属性3: 值3;
}
CSS的三种引入方式
1 内部样式表
写在 head 中 style 标签下
2 link标签引入外部CSS文件(最正规的方式, 解耦合)
<link rel="stylesheet" href="22_bolg.css">
3 行内式(一般不用)
<div id="d1"style="color: gray"></div>
选择器
1 基本选择器
<style>
#d1 { /* id 选择器 */
color: greenyellow;
}
.c2 { /* 类选择器 */
color: red ;
}
span { /* 标签选择器 */
color: blue;
}
* { /* 通用选择器 */
color: yellow;
}
</style>
2 组合选择器:
/*将标签的嵌套关系比喻成了亲戚关系*/
后代选择器 (只要是div 内部的 span 都能拿到)
div span {}
儿子选择器 (只拿内部 第一层级的 span)
div>span {}
毗邻选择器 (紧挨着我的同级的下一个span)
div+span {}
弟弟选择器 (同级别下面所有的span
div~span {}
2.5 分组与嵌套
```css
多个选择器可以并列共用一套css样式
div, p, span {}
不同的选择器之间可以混合使用
d1, .c1>span {}
```
3 属性选择器
/*
1 含有某个属性
2 含有某个属性并且含有某个值
3 含有某个属性并且含有某个值的某个标签
属性选择器是以 [] 作为标志的
*/
# 找到所有 带有username属性的标签
[username] {
background-color: red;
}
# 找打所有带有username属性且属性值为 zhaoliu 的标签
[username=zhaoliu ] {
background-color: blue;
}
# 找到所有input 标签 且 标签内有username属性 且属性值为 lisi 的标签
input[username="lisi"]{
background-color: green;
}
ps: 标签既可以有默认的属性
还可以自定义书写一个或多个属性
4 伪类选择器
a:link {}
a:hover {} # 需要记忆 鼠标移到目标位置
a:active {}
a:visited {} # 点击过
input:focus {} input 框获得焦点
5 伪元素选择器
p: first_letter {} 通过css加文本内容 但是无法选中
p: before {}
p: after {}
ps: before 和 after 多用来清除浮动带来的负面影响
.clearfix:after
6 CSS3 高级选择器
:first-child 第一个儿子标签
:last-child 最后一个儿子标签
:nth-child(n) 第n个
选择器优先级
选择器相同 就近原则
行内 > id > class > 标签
行内 > 内部样式表 > 外部样式表
ps: !important 强制让标签采用你的样式 但是不推荐使用
属性
宽和高
width
height
块级标签的宽度不修改的情况下 默认占浏览器的一整行
块级标签的高度也是取决于内部的文本的高度
行内标签宽度和高度都是由内部文本决定的 行内标签是无法设置长宽的
字体属性
1 字体样式
font-family
2 字体大小
font-size
3 字重
font-weight
4 字体颜色
color: dodgerblue; /*直接写颜色英文*/
color: #213212; /*颜色编号*/
color: rgb(123, 45, 13); /*三基色 数字*/
color: rgba(131, 121, 123, 0.5); /*三基色 + 透明度 范围 0-1*/
文字属性
1 文字对齐
text-align
center left right
2 文字装饰
text-deoration # 主要用来给 a 标签去掉自带的下划线
none # 去除下划线
underline # 增加下划线
3 首行缩进
text-indent 默认为文字大小的两倍
4 文本阴影
text-shadow 3px 3px 3px rgb(0,0,0)
x y 模糊度 颜色
与盒子阴影类似
鼠标形状属性
cursor
default 默认光标
pointer 超链接指针 ****
wait 等待
help 帮助
text 文本
crosshair 十字
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Dr0aNTQ-1640439030620)(C:\Users\BabyMuu\Downloads\uTools_1639881436971.png)]
背景属性
1 背景色
background-color
2 背景图片
background-color: brown;
background-image: url('myfile.bmp'); /*默认全部铺满*/
background-repeat: no-repeat ; /*不平铺 默认为 repeat 全部铺满*/
background-repeat: repeat-x; /*x轴平铺*/
background-repeat: repeat-y; /*y轴平铺*/
3 宽和高
background-size: 100% 100%
ps_1: 在多个属性名前缀都是相同的情况下 一般都支持简写: 只写前缀
background: red url('') no-repeat center
Extra: 雪碧图(一个包含多个图标的图片)
可以根据图片内的图标的最左上角的位置找到该图标(x: 距离左上角的长度,y:距离左上角的高度)
width: 图标宽度(单位px)
height: 图标高度(单位px)
background: red url('....') no-repeat -x -y
# 优点:
提升性能, 代码优化, 减少向服务器的请求次数
# 原理:
将小图标放到一张大图中, 这样就可以想服务器请求一次, 然后如果后序需要使用某个图标, 就可以从先前请求到的那个图片中去定位找小图标
ps_2: 在调样式的时候 可以借助于浏览器快速的微调, 然后将调整好的参数修改到 css 样式中
边框
border-width: 400px
border-style: bolder
border-color: red
border-radius:50% 曲度 ==> 圆角
简写: 将相同的前缀属性值 写在一起 属性只写前缀
border: 400px bolder red
display 属性
/* 能够让标签具有自身没有的属性和特征 */
dispaly
none 隐藏 并且让出自身的位置
inline 行内
block 块级
inline-block 可以编辑长高
ps visibility:hidden 只隐藏 不让出自己的位置
溢出属性
/* 标签内部的内容超出了标签自身的范围会造成内容的溢出 */
overflow:
hidden 文本超出时隐藏
scroll 滚动条
auto 自动模式
visible(默认)
eg: 新闻:
news a {
white-space:nowrap 不允许换行
overflow: hidden 盒子内容超出时隐藏
text-overflow: ellipsis 以省略号结尾(超出时)
}
eg: 19_溢出之实用场景.html (头像框)
overflow:hidden
img {
max-width:100%
}
盒子模型
/* 解释:
以快递盒为例
快递盒与快递盒之间的距离(标签与标签的距离 margin 外边距)
盒子的厚度 (标签的边框 broder)
盒子里面的物体到盒子的距离 (内容到边框的距离 padding 内边距)
物体的大小(内容 content)
*/
1 外边距 margin
2 内边距 border
3 边框 padding
4 内容 content
/* body 标签默认自带 8px 的 margin */
box-shadow: 盒子阴影
5px 5px 5px rgba(0,0,0,0.5);
x y 模糊度 颜色
偏移量
margin参数信息
margin:0; /* 上下左右都是 0*/
margin:10px 20px; /*1 上下 2 左右*/
margin:10px 20px 30px; /*1 上 2 左右 3 下*/
margin:10px 20px 30px 40px; /*上 右 下 左*/
padding参数与 margin 相同
/*
如果想要调整标签与标签之间的距离 就可以调整 margin
body标签默认有 8px 的margin
*/
浮动 float
只要是前期页面布局 一半都是用浮动来设计页面
能够让标签头里正常的文档流 漂浮到控制 (距离用户更近)
浮动的元素没有块级和行内一说, 标签多大 浮动起来就占多大
清除浮动带来的影响
浮动的元素会造成父标签的塌陷
塌陷:当元素设置浮动而父元素的宽高没有设置时,高度会塌缩为0
解决塌陷的推导步骤
1 自己添加一个 div 标签 设置高度从而强行撑起一个高度
2 利用clear 属性
#d4 {
clear:left;
}
clear:left right both
3 通用的解决浮动带来影响的方法(全球统一的解决方式)
在写 html 页面之前 先写好处理浮动带来的影响的 css 代码
.clearfix:after { /*伪类选择器*/
content: ""; /*必备*/
display: block; /*设置为块级元素, 原本应为行内元素*/
clear: both; /*左右都清除浮动的影响*/
}
之后只要标签出现了塌陷的问题就给改标签加一个 clearfix 属性即可
上述的解决方式是通用的 到哪里都一样 名称都是 clearfix
定位
静态定位(默认) static
默认所有的标签都是静态的 无法改变位置
相对定位 relative
相对于标签自身原来的位置
如果将标签的属性 position 由 static 变成 relative
标签就会由没有定位的标签编程已经定位的标签
性质会改变
绝对定位 absolute
eg: 小米购物车
相对于已经定位过的父标签(如果没有 则以body作为参照)
固定定位 fixed
eg: 回到顶部, 右侧/左侧 小广告
固定在浏览器的某个位置
相对于浏览器窗口定位
浮动,定位是否脱离文档流
1 脱离文档流
1 浮动
2 固定定位
3 绝对定位
2 不脱离文档流
1 相对定位
参数
left
right
top
bottom
z-index 模态框
其实用来调节指向人的z轴的距离
eg: 百度登录页面 三层结构
1 最底部 正常页面内容
2 黑色的蒙板
3 最顶层 白色的登录页面
透明度 opacity
rgba 只能影响背景颜色
opacity 可以修改背景颜色和字体颜色
总结: 它不单单可以修改背景色的透明度 而且可以修改字体的透明度
示例
<!DOCTYPE html>
<html lang="en">
<!--
eg: 百度登录页面 其实是三层结构
1 最底部是正常页面(z = 0) 最远的
2 黑色的透明区 (z = 99) 中间层
3 白色的注册区域 (z = 100) 离用户最近
-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<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: 8;
}
.modal {
background-color: white;
height: 200px;
width: 300px;
position: fixed;
left: 50%;
top: 50%;
z-index: 100;
margin-left: -150px;
margin-top: -100px;
}
#b1 {
position: relative;
left: 30%;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>login page</h1>
<label>
<span>username <input type="text"></span>
<span>password <input type="password"></span>
</label>
<button id="b1">click me to login</button>
</div>
</body>
</html>
简易博客总结
先用 div 划定区域
在用 HTML 先占位
最后调节样式
1 在给标签 起 ID 或者 class 属性的时候 也应该做到简明之一
css 单独开设文件来写
1 上来先用注释表明用途 以及作用区域
/*这是一个博客园首页的样式文件*/
/*通用样式*/
body {
margin:0;
}
a {
text-decoration:none;
}
ul {
list-style-type:none;
padding-left:0;
}
/*左侧样式*/
/*右侧样式*/