今日学习目标

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

文章目录

今日学习目标
学习内容
一、伪元素选择器
- css操作文本内容
- 选择器优先级
二、css修改属性
- css修改文字属性
- css修改字体属性
- css修改其他属性
- - 背景属性
  - 边框属性
  - display属性
  - 盒子模型
  - 浮动属性

学习内容

伪元素选择器
css修改属性

一、伪元素选择器

css操作文本内容

修改首个字体样式

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

在文本开头添加内容

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

在文本结尾添加内容

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

使用场景
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修改其他属性

背景属性

背景颜色
```
background-color: red;
```

背景图片

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;

边框属性

自定义调整每个边的边框

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

统一调整每个边的边框
```
border: 5px solid black; （依次是：大小、样式、颜色） 顺序无所谓 只要给了三个就行
```
每个边样式属性
1. dotted 点状虚线边框
2. dashed 矩形虚线边框
3. solid 实线边框
画圆
```
border-radius: 50%
```
如果长宽一样那么就是圆不一样就是椭圆

display属性

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

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

块标签与行标签是可以转换的，也就是说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                             统一设置一个值

补充

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

浮动属性

语法
```
float: left/right;
```
浮动的作用
可以将块儿级标签浮动起来脱离正常的文档流，使多个块儿级标签可以在一行显示(全部飘在了空中)
浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)

补充说明:

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

解决浮动造成的影响

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

解决方式
1.直接写div然后写对应的长宽
2.写div然后添加clear属性避免去查找长宽
3.万能公式(固定搭配记住就可以)
```
  .clearfix:after {content: '';clear: both;display: block;}
```

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

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

Python攻城师的成长————模块突破(collections、time与datetime、random随机数模块)
今日学习目标: 学习并应用collections.time与datetime.random随机数模块知识今日学习内容: collections模块 time与datetime模块 random随机数 ...
Python攻城师的成长————面向对象的三大特征（继承、多态）
学习目标: 了解继承与多态的概念,重点是要学会运用继承去处理问题学习内容: 继承在面对对象程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类,而被继 ...
Python攻城师的成长————ORM查询
今日学习目标熟悉掌握ORM语法操作文章目录今日学习目标学习内容一.神奇的双下划线查询二.orm创建外键关系三.外键字段的增删改查四.正反向的概念五.ORM多表查询正向查询反向查询 ...
Python攻城师的成长————网络编程（socket套接字、通信循环、链接循环、黏包问题）
今日学习目标学习什么是socket套接字,并依靠它去处理TCP协议等网络编程问题文章目录今日学习目标学习内容一. socket套接字 1.什么是socket 2.套接字发展史及分类 3.套接 ...
Python攻城师的成长————MySQL数据库关键字
今日学习目标熟悉关键字用法,掌握多表查询思路文章目录今日学习目标学习内容一.查询关键字查询关键字之having过滤查询关键字之distinct去重查询关键字之order by排序查询 ...
Python攻城师的成长————Django框架（csrf相关装饰器、基于中间件思想编写项目、auth认证模块）
今日学习目标逐步掌握csrf相关装饰器.基于中间件思想编写项目.auth认证模块知识点文章目录今日学习目标学习内容一. csrf相关装饰器二.基于中间件思想编写项目三.auth认证模块 ...
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...
Python攻城师————MySQL数据库（自增、外键、关键字）
今日学习目标正式学习MySQL数据库语句. 文章目录今日学习目标学习内容一.自增特性二.约束条件之外键外键的定义外键约束创建三.查询关键字查询关键字之select与from 查询关键 ...
如何成为一名优秀的web前端工程师（前端攻城师）
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优 ...

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