今日内容概要

  • 伪元素选择器
  • 选择器优先级
  • CSS 字体样式
  • CSS 文字属性
  • CSS背景属性
  • CSS 边框
  • display属性
  • 盒子模型
  • 浮动(重要)
  • 解决浮动造成的影响

今日内容详细

一、伪元素选择器

        通过css操作文本内容

  1. 修改首个字体样式
p:first-letter {
            	color: red;
            	font-size: 48px;
        	}
  1. 在文本开头添加内容
p:before {
            	content: '哈哈';
            	color: blue;
        	}
  1. 在文本结尾添加内容
p:after {
            	content: '嘿嘿';
            	color: yellow;
        	}

使用场景

        1.用于后面清除浮动带来的负面影响

        2.用于网站的内容防爬

二、 选择器优先级

  1. 相同选择器

                ‘就近原则’:谁离标签越近就听谁的!!!

  1. 不同选择器

                行内选择器 > id选择器 > 类选择器 > 标签选择器

css选择器定位 python用法 python的css选择器_学习


选择器总结:

CSS选择器是所有选择器的基础

        后期框架提供的、后期爬虫模块提供的

        所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少

三、 CSS 字体样式

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

四、 CSS 文字属性

  1. 文字对齐
text-align:center/left/right
  1. 文字装饰(重点)
"""a标签默认带下划线  并且有颜色(没有点击过是蓝色 点击过是紫色)"""
		text-decoration: none;  主要就是用于去除a标签的下划线
		text-decoration: line-through;  删除线
  		text-decoration: overline;			上边线
  		text-decoration: underline;			下划线
  1. 首行缩进
text-indent: 32px;  # 首行缩进32px
"""
补充:可以使用浏览器做样式的动态调整
	查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""

五、CSS 背景属性

  1. 背景颜色
background-color: red;
  1. 背景图片
background-image:url("111.png");
   
   """背景图片如果没有设置的区域大 那么默认自动填充满"""
   
   background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
   background-position:left top;  图片位置
   background-attachment: fixed;  背景附着

"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
	background:#336699 url('1.png') no-repeat left top;
"""

六、 边框

  1. 自定义调整每个边的边框
border-left/top/right/bottom-color: black;
  		border-left/top/right/bottom-width: 5px;
  		border-left/top/right/bottom-style: solid;
  1. 统一调整每个边的边框
border: 5px solid black;  顺序无所谓 只要给了三个就行
  	"""
  		dotted	点状虚线边框
  		dashed	矩形虚线边框
  		solid		实线边框
  	"""
  1. 画圆
border-radius: 50%
 	 	如果长宽一样那么就是圆 不一样就是椭圆

七、 display属性

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

八、 盒子模型

# 所有的标签其实都有一个盒子模型
学习盒子模型可以将标签看成是一个个快递盒
"""
快递盒组成部分											盒子模型
	内部物品											content(内容)
	内部物品与盒子内部的距离				 padding(内边距、内填充)
	盒子的厚度											border\边框
	盒子与盒子之间的距离						 margin(外边距)
	
ps:两个标签之间的距离 有时候可以用margin也可以用padding
"""
# 1.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								统一设置一个值
  
# 2.padding用法与margin一致
	同上

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

九、浮动（重要）

  1. 浮动的作用
float: left/right;
  	"""
  		浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
  		是多个块儿级标签可以在一行显示(全部飘在了空中)
  	"""
  1. 浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)

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

十、 解决浮动造成的影响

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