css2

目录

• 伪类选择器
• 选择器优先级
• 选择器总结
• 字体样式
• 文字属性
• 背景属性
• 边框
• display属性
• 盒子模型
• 浮动
• 解决浮动造成的影响

伪类选择器

<!--通过class操作文本内容-->
1.修改首个字体样式
	p:first-letter{color:red;font-size:33px;}
2. 在文本开头添加内容
	p:before{content:'aa';color:blue;}
3.在文本结尾添加内容
	p:after{content:'aa';color:green;}
使用场景
1.用于后面清除浮动带来的负面影响
2.用于网站内容防爬

选择器优先级

# 研究方向
1.相同选择器
	'就近原则':相同选择器谁离标签近就听谁的
2.不同选择器
	行内选择器 > id选择器 > 类选择器 > 标签选择器
    即锁定目标越精准，优先级则越高

选择器总结

css选择器是所有选择器的基础
	后期框架、爬虫模块提供
所以css选择器很重要，为后期学习前端框架和爬虫奠定基础

字体样式

1.文字字体
font-family:"微软雅黑"
2.字体大小
font-size:22px
3.字体粗细
font-weight:lighter\bolder
4.字体颜色
方式1：color:red
方式2：color:rgb(128,128,128)
方式3：color:#4f
<!--
获取颜色的方式有很多
	1.截图软件自带取色功能
		微信、qq自带颜色编号 #4f4f4f
	2.pycharm提供颜色的去色器
		左侧颜色块点击即可
-->

文字属性

1.文字对齐
	text-align:ccenter/left/right
2.文字装饰
	<!--a标签默认带下划线 并且有颜色（没有带年纪过蓝色 点击过紫色）-->
text-decoration:none; 主要就是用于去除a标签的下划线
text-decoration:line-throught;  删除线
text-decoreation:overline;   上边线
text-decoration: underline;   下边线

3.首行缩进
text-indent: 32px;  首行缩进32px
<!--
补充：可以使用浏览器做样式的动态调整
	查找到标签的css然后左键选中 通过方向键上下动态修改数值
-->

背景属性

1.背景颜色
	background-color: red;

2.背景图片
	background-imge:url("图片地址");
<!--背景图片如果没有设置区域大 那么默认自动填充满-->
	background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
	background-position:left top;  图片位置
	background-attachment: fixed;  背景附着
<!--
如果多个属性名具有相同的前缀 那么可以整合到一起编写（前缀名即可）
background:#334455 url('aa.png') no-repeat left top;
-->

边框

1.自定义调整每个的边框
	boder-left/right/top/bottom-color:black;
	boder-left/right/top/bottom-width:5px;
	boder-left/right/top/bottom-style:solid;
2.border: 5px solid black; 顺序不重要，但三个属性都要有
<!--
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实现边框
-->
3.圆角边框
	border-radius: 50%
	如果长款一样那么就是园 不一样就是椭圆

display属性

<!--
只要块级标签可以设置长宽，行内标签是不可以的（长宽由内部文本决定）
-->
display:inline  让标签具备行内标签的特性（不能设置长宽）
display:block   让标签具备块级标签的特性（可以设置长宽）
display:inline-block  是元素同时具有行内元素和块级元的的特点 
display:none  隐藏标签（重点）页面撒谎给你不会保留位置也不显示
	visibility:hidde	也可以隐藏标签但是位置会保留

盒子模型

所有标签其实都是一个盒子模型
<!--
快递盒组成部分
		盒子模型
	内部物品
		content（内容）
	内部物品于盒子内部的距离 
		padding（内边距、内填充）
	盒子厚度
		border\边框
	盒子与盒子之间的距离
		margin（外边距）
两个标签之间的距离 有时候可以用margin也可以是padding
-->
1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px  上 左右 下
margin: 1px 2px    上下 左右
margin: 1px   统一设置个值
2.padding用法于margin一致

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

浮动

1.浮动的作用
float: left/right;
<!--
浮动是所有网站页面布局必备的 可以将块级标签浮动起来若离正常的文档流
也就是 多个块级标签子啊一行显示
-->
2.浮动的影响
	浮动会造成父标签塌陷（类似将口袋里面的东西拿出来，而口袋瘪了下去）

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

解决浮动造成的影响

clear:left; 	规定元素的那一侧不允许其他浮动
	1.直接写div然后写对应的长宽
	2.写div然后添加clear属性 避免去查找长宽
	3.万能公式（固定搭配
	.c:after{
		content:'';
		clear:both;
		display:block;
}
<!--
以后写网页 提前写好上面的代码
然后那个标签塌陷了就i给谁添加c类名即可
很多前端页面框架使用也是c类名
-->