Python攻城师的成长————css语法、伪元素选择器（部分）

今日学习目标

• 熟悉并掌握css中各种修改属性的方法。

---

---

学习内容

• 伪元素选择器
• css修改属性

---

一、伪元素选择器

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选择器 > 类选择器 > 标签选择器

二、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;
  

css修改字体属性

• 文字对齐

  text-align:center/left/right
  

• 文字装饰(重点)
  eg：a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)

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

• 首行缩进

  text-indent: 32px;  # 首行缩进32px
  

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

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;  背景附着
   

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

eg：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;
   

2. 统一调整每个边的边框

   border: 5px solid black; （依次是：大小、样式、颜色） 顺序无所谓 只要给了三个就行
   

   每个边样式属性

   1. dotted 点状虚线边框
   2. dashed 矩形虚线边框
   3. solid 实线边框

3. 画圆

   border-radius: 50%
   

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

display属性

根据CSS规范的规定，每一个网页标签都有一个display属性，用于确定该标签的类型，每一个元素都有默认的display属性值，比如div标签，它的默认display属性值为“block”，称为块级标签，而span元素的默认display属性值为“inline”，称为“行内”标签。

1. 只有块级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
2. 块标签与行标签是可以转换的，也就是说display的属性值可以由我们来改变。

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

盒子模型

所有的标签其实都有一个盒子模型（即在网页窗口中占了一块空间存放样式属性）
盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height

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

补充

1. body标签默认自带8px的margin值 我们在编写页面之前应该去掉
2. 标签的水平居中 可以使用固定搭配
   margin: 0 auto;

浮动属性

• 语法

  float: left/right;
  

• 浮动的作用
  可以将块儿级标签浮动起来脱离正常的文档流，使多个块儿级标签可以在一行显示(全部飘在了空中)

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

补充说明:

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

• 解决浮动造成的影响

  clear: left;   规定元素的哪一侧不允许其他浮动元素
  

• 解决方式
  1.直接写div然后写对应的长宽
  2.写div然后添加clear属性 避免去查找长宽
  3.万能公式(固定搭配 记住就可以)

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

·以后写网页 提前写好上面的代码，然后哪个标签塌陷了就给谁添加上clearfix类名即可

---