前段（三）

目录

• 伪元素选择器
• 选择器优先级
• 选择器总结
• 字体样式
  • 文字字体
  • 字体大小
  • 字体粗细
  • 字体颜色
  • 字体复合属性
• 文字属性
  • 文字对齐
  • 文字装饰(重点)
  • 首行缩进
• 背景属性
  • 背景颜色
  • 背景图片
  • 背景复合属性
• 边框
  • 自定义调整每个边的边框
  • 统一调整每个边的边框
  • 画圆
• display属性
• 盒子模型
  • body标签默认自带8px的margin值 我们在编写页面之前应该去掉
  • padding用法与margin一致
• 浮动(重要)
  • 浮动的作用
  • 浮动的影响
• 解决浮动造成的影响
  • 浮动的影响
  • 清除浮动
    • 方法1
    • 方法2额外标签法
    • 方法3单伪元素清除法
    • 方法4双伪元素清除法
    • 方法5overflow
  • content属性

伪元素选择器

通过css操作文本内容
1.修改被选中文本的首个字体样式

p:first-letter {
	color: red;
	font-size: 48px;
}

2.修改被选中文本的首行样式

p:first-line {
	color: green;
}

3.创建被选中标签的第一个元素，这个元素也会被first-letter

p:before {
	content: '哈哈';
	color: blue;
}

4.创建被选中标签的最后一个元素

p:after {
	content: '嘿嘿';
	color: yellow;
}

在CSS3下，伪元素选择器需要用到两个冒号

上面效果权重 first-letter > before > first-line

使用场景
1.常用于后面清除浮动带来的负面影响
2.用于网站的内容防爬

选择器优先级

1.相同选择器
'就近原则':谁离标签越近就听谁的!!!
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器

选择器	选择器权重
继承 或 *	0.0.0.0
元素选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式 style=""	1.0.0.0
!important 重要的	∞无穷大

多个选择器的组合的权重是以加法的形式进行比较的。

选择器总结

CSS选择器是所有选择器的基础
后期框架提供的、后期爬虫模块提供的
所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少

字体样式

文字字体

font-family: "Microsoft Yahei"

字体大小

font-size: 24px

字体粗细

font-weight: lighter\bolder

字体颜色

方式1: 
	color: red;
方式2:
	color: rgb(128, 128, 128);
方式3:
	color: #4f4f4f;

获取颜色的方式有很多
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
左侧颜色块点击即可

字体复合属性

如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)

font: style weight size/line-height family;
font: 字体样式 字体粗细 字体大小/行高 字体系列

只能省略前两个，如果省略了相当于设置了默认值

文字属性

文字对齐

text-align:center/left/right

文字装饰(重点)

a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)

text-decoration: none;  主要就是用于去除a标签的下划线
text-decoration: line-through;  删除线
text-decoration: overline;			上边线
text-decoration: underline;			下划线

首行缩进

text-indent: 32px;  

补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值

背景属性

背景颜色

background-color: red;

背景图片

background-image:url("111.png");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
background-position:left top;  图片位置
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％
left只会是水平方向，top只会是垂直方向
background-attachment: fixed;  背景附着
scroll：默认值，背景图像会随着页面其余部分的滚动而移动。
loca：背景图像相对于元素的内容固定；当元素的内容滚动时，背景图像总是要跟着内容一起移动。

背景复合属性

background:#336699 url('1.png') no-repeat left top;

边框

自定义调整每个边的边框

  border-left/top/right/bottom-color: black;
  border-left/top/right/bottom-width: 5px;
  border-left/top/right/bottom-style: solid;

统一调整每个边的边框

  border: 5px solid black;  顺序无所谓 只要给了三个就行
  dotted	点状虚线边框
  dashed	矩形虚线边框
  solid		实线边框

画圆

border-radius: 50%

如果长宽一样那么就是圆 不一样就是椭圆

display属性

只有块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)，需要先把行内标签转换成块级标签或者行内块标签

display:inline  让标签具备行内标签的特性(不能设置长宽)
display:block   让标签具备块儿级标签的特性(可以设置长宽)，还具备显示内容的作用
display:inline-block  使元素同时具有行内元素和块级元素的特点
display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留

行内块元素

默认宽度是内容宽度
宽度，高度，行高，margin,padding 都可以设置
和行内元素同一行，之间会留白。

盒子模型

所有的标签其实都有一个盒子模型

学习盒子模型可以将标签看成是一个个快递盒
快递盒组成部分 盒子模型
内部物品 content(内容)
内部物品与盒子内部的距离 padding(内边距、内填充)
盒子的厚度 border\边框
盒子与盒子之间的距离 margin(外边距)

两个标签之间的距离 有时候可以用margin也可以用padding

body标签默认自带8px的margin值 我们在编写页面之前应该去掉

margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px		上 右 下 左
margin: 1px 2px 3px		上 左右  下
margin: 1px 1px		上下	左右
margin: 1px		统一设置一个值

padding用法与margin一致

padding-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding: 1px 2px 3px 4px		上 右 下 左
padding: 1px 2px 3px		上 左右  下
padding: 1px 1px		上下	左右
padding: 1px		统一设置一个值

盒子模型页面布局
标签的水平居中 可以使用固定搭配
margin: 0 auto;

浮动(重要)

浮动的作用

float: left/right; 左浮动/右浮动
浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的标准流
是多个块儿级标签可以在一行显示(全部飘在了空中)，浮动不会占据原来的位置。

浮动的影响

浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)

补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来

解决浮动造成的影响

浮动的影响

浮动造成的影响主要是由于父级元素没有给高度，子级元素浮动，浮动元素脱标就不能撑起父级元素的大小。造成下面标准流上移。

清除浮动

方法1

给与父级元素高度。

方法2额外标签法

1. 在父级元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear:both

缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂

clear:both属性意味着拥有该属性的盒子的顶边框将会低于在它之前的任何浮动盒子的底外边距。该属性清除浮动所造成的影响，浮动的盒子依旧是部分脱离标准流的

方法3单伪元素清除法

用伪元素代替了额外标签

.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /* 为了照顾低版本 */
    height: 0;
    visibility: hidden;
}

优点:项目中使用，直接给标签加类加类即可清除浮动。

方法4双伪元素清除法

/* .clearfix::before 清除外边距塌陷
	外边距塌陷:父子标签，都是块级，子级加margin会影响父级的位置
*/
.clearfix::before,
.clearfix::after {
	content: '';
    display: table;
}
/* 真正清除浮动影响的代码 */
.clearfix::after {
    clear: both
}

优点:项目中使用，直接给标签添加类即可清除浮动

方法5overflow

直接给父级元素设置overflow:hidden

优点:方便

content属性

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

值	说明
none	设置content为空值
normal	在 :before 和 :after 伪类元素中会被视为 none，即也是空值。
counter	设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）
attr(attribute)	将元素的 attribute 属性以字符串形式返回。。
string	设置文本内容
open-quote	设置前引号
close-quote	设置后引号
no-open-quote	移除内容的开始引号
no-close-quote	移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）的链接地址
inherit	指定的 content 属性的值，应该从父元素继承