前端2CSS2

内容概要

---

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

---

内容详情

---

伪元素选择器

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

选择器优先级

# 研究方向
  1.相同选择器
    '就近原则'：谁离标签近听谁的
  2.不同选择器
    行内选择器 > id选择器 > class类选择器 > 标签选择器
# 选择器总结
  CSS选择器是所有选择器的基础
      后期框架提供的、后期爬虫模块提供的
      所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少

字体样式

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

文字属性

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

背景属性

1.背景颜色
  background-color: red;
2.背景图片
  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/right/top/bottom-color: black;
  border-left/right/top/bottom-width: 5px;
  border-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(外边距)
  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;
  """
  浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
  是多个块儿级标签可以在一行显示(全部飘在了空中)
  """

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

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

解决浮动造成的影响

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

 很多前端页面框架使用的也是clearfix类名
 """