前端---css样式补充
伪元素选择器和选择器优先级
伪元素选择器通过css操作文本内容。
1.修改首个字体样式
p:first-letter {
color: red;
font-size: 48px;
}
2.在文本开头添加内容
p:before {
content: '哈哈';
color: blue;
}
3.在文本结尾添加内容
p:after {
content: '嘿嘿';
color: yellow;
}
选择器优先级
相同选择器：'就近原则':谁离标签越近就听谁的!!!
不同选择器：行内选择器 > id选择器 > 类选择器 > 标签选择器
CSS选择器是所有选择器的基础，后期框架提供的、后期爬虫模块提供的。
字体样式
文字字体
p { font-family: "Microsoft Yahei"}
字体大小
p {font-size: 24px}
字体粗细
p {font-weight: lighter\bolder}
字体颜色
p {color: red;}
p {color: rgb(128, 128, 128);}
p {color: #4f4f4f;}
获取颜色的方式:截图软件自带取色功能，pycharm提供的取色器。
文字属性
文字对齐
p {text-align:left} 左边
p {text-align:center} 中间
p {text-align:right} 右边
文字装饰(重点)
a {text-decoration: none;} 主要就是用于去除a标签的下划线
a {text-decoration: line-through;} 删除线
a {text-decoration: overline;} 上边线
a {text-decoration: underline;} 下划线
首行缩进
p {text-indent: 32px;} 首行缩进32px
补充:可以使用浏览器做样式的动态调整，查找到标签的css，然后左键选中，通过方向键上下动态修改数值，找到适合的数值填写到css样式里。
背景属性
背景颜色
p {background-color: red;}
背景图片
img {background-image:url("111.png");} 背景图片如果没有设置的区域大,
那么默认自动填充满
img {background-repeat:no-repeat\repeat-x\repeat-y;} 是否平铺
img {background-position:left top;} 图片位置
img {background-attachment: fixed;} 背景附着
如果多个属性名具有相同的前缀，那么可以整合到一起编写(前缀名即可)。
img {background:#336699 url('1.png') no-repeat left top;}
边框
自定义调整每个边的边框
p {border-left/top/right/bottom-color: black;} 给边框修改颜色
p {border-left/top/right/bottom-width: 5px;} 修改边框的粗细
p {border-left/top/right/bottom-style: solid;} 修改边框的类型, dotted点状虚线边框,dashed矩形虚线边框,solid实线边框
统一调整每个边的边框
p {border: 5px solid black;} 顺序无所谓,只要给了三个就行
画圆
p {border-radius: 50%} 如果长宽一样那么就是圆,不一样就是椭圆
display属性
前戏：只要块儿级标签可以设置长宽，行内标签是不可以的。
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
盒子模型
所有的标签其实都有一个盒子模型，学习盒子模型可以将标签看成是一个个快递盒。
| 快递盒子 | 盒子模型 |
|---|---|
| 内部物品 | content(内容) |
| 内部物品与盒子内部的距离 | padding(内边距、内填充) |
| 盒子的厚度 | border(边框) |
| 盒子与盒子之间的距离 | margin(外边距) |
ps:两个标签之间的距离，有时候可以用margin也可以用padding。
body标签默认自带8px的margin值 我们在编写页面之前应该去掉。
body {margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
margin不同个数的参数对应修改的位置
| 参数个数显示 | 修改的位置 |
|---|---|
| margin: 1px 2px 3px 4px | 上 右 下 左 |
| margin: 1px 2px 3px | 上 左右 下 |
| margin: 1px 1px | 上下 左右 |
| margin: 1px | 统一设置一个值 |
ps:padding用法与margin一致。
盒子模型页面布局，想要标签的水平居中，可以使用固定搭配。
body {margin: 0 auto;}
浮动(重要)
浮动的作用
div {float: left/right;}
浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的文档流。是多个块儿级标签可以在一行显示(全部飘在了空中)。
浮动的影响
1.浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
2.浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来。
解决浮动造成的影响
方法1：直接写div然后写对应的长宽。
方法2：写div然后添加clear属性，避免去查找长宽。
div {clear: left; } 原理就是让左边的元素沉下去，然后右边的元素会挨着前面的元素飘起了这样的感觉
方法3：万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
以后写网页，提前写好上面的代码,然后哪个标签塌陷了就给谁添加上clearfix类名即可。
作业
1.制作简易版本圆形头像
2.利用浮动搭建一个28布局的页面
整个浏览器页面封为左右两块 左边一块占比20% 右边一块占比80%
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0 auto
}
#head {
height: 180px;
background: aliceblue;
padding-top: 25px;
}
#photo {
width: 150px;
height: 150px;
border: 1px solid black;
margin: 0 auto;
border-radius: 50%;
background:url("11.jpg") no-repeat 100%;
}
#body {
height: 540px;
}
#left {
height: 100%;
width: 20%;
background: antiquewhite;
float: left;
}
#right {
height: 100%;
width: 80%;
background: royalblue;
float: left;
}
p {
text-align: center;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="head">
<div id="photo"></div>
</div>
<div id="body" >
<div id="left" ><p>左边内容20%</p></div>
<div id="right"><p>右边内容80%</p></div>
</div>
</body>
</html>
效果展示
浙公网安备 33010602011771号