学习python，从入门到放弃（39）

伪元素选择器

通过css操作文本内容

• 修改首个字体样式

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

• 在文本开头添加内容

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

• 在文本结尾添加内容

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

用于后面清除浮动带来的负面影响，用于网站的内容防爬。

选择器优先级

• 相同选择器

  就近原则:谁离标签越近就听谁的。

• 不同选择器

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

字体样式

• 文字字体

  font-family: "Microsoft Yahei"
  

• 字体大小

  font-size: 24px
  

• 字体粗细

  font-weight: lighter\bolder
  

• 字体颜色

  color: red;
  color: rgb(128, 128, 128);
  color: #4f4f4f;
  

文字属性

• 文字对齐

  text-align:center/left/right
  

• 文字装饰

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

• 首行缩进

  text-indent: 32px;
  

背景属性

• 背景颜色

  background-color: red;
  

• 背景图片

  background-image:url("111.png");
  background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
  background-position:left top;  图片位置
      
  background-attachment: fixed;  背景附着
  

  背景图片如果没有设置的区域大，那么默认自动填充满。

边框

• 自定义调整每个边的边框

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

• 统一调整每个边的边框

  dotted 点状虚线边框
  dashed 矩形虚线边框
  solid 实线边框

  border: 5px solid black;  顺序无所谓 只要给了三个就行
  

• 画圆

  border-radius: 50%
  

display 属性

只要块儿级标签可以设置长宽，行内标签是不可以的(长宽有内部文本决定)

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

盒子模型

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

快递盒组成部分											盒子模型
	内部物品											content(内容)
	内部物品与盒子内部的距离	padding(内边距、内填充)
	盒子的厚度											border\边框
	盒子与盒子之间的距离		  margin(外边距)

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

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-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							统一设置一个值

浮动

• 浮动的作用

  float: left/right;
  

  浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的文档流，是多个块儿级标签可以在一行显示(全部飘在了空中)。

• 浮动的影响

  浮动会造成父标签塌陷，浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来。

解决浮动造成的影响

规定元素的哪一侧不允许其他浮动元素

clear: left;

推导流程

1. 直接写div然后写对应的长宽

2. 写div然后添加clear属性 避免去查找长宽

3. 万能公式(固定搭配 记住就可以)

   .clearfix:after {
               content: '';
               clear: both;
               display: block;
           }
   

提前写好上面的代码，哪个标签塌陷了就给谁添加上 clearfix 类名即可。