CSS属性的相关操作

CSS属性的相关操作

• 伪元素选择器
• 选择器优先级
• CSS修改文字属性
• CSS修改字体属性
• CSS修改其他属性

伪元素选择器(通过CSS操作文本内容*)

1.first-letter

修改首个字体样式

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

2.before

在每个

元素之前插入内容

p:before {
  content:"*";
  color:red;
}

3.after

在每个

元素之后插入内容

p:after {
  content:"[?]";
  color:blue;
} 

使用场景：

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

​ 2.用于网站的内容防爬

选择器优先级

1.相同选择器

​ 就近原则：谁离标签近就选择谁的样式

2.不同选择器

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

CSS修改文字属性

1.文字对齐 ( text-align )

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐
justify	两端对齐

2.文字装饰 ( text-decoration )

a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)

值	描述
none	主要就是用于去除a标签的下划线
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线
inherit	继承父元素的text-decoration属性的值

首行缩进 eg:

text-indent: 32px;   /*首行缩进32像素*/

CSS修改字体属性

文字字体（font-family）

font-family: "Microsoft Yahei"

字体大小（font-size）

font-size: 24px

字体粗细（font-weight）

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

字体颜色（color）

通过CSS修改的三种方式：
1.十六进制值 如：＃FF0000

2.一个RGB值 如：RGB(255,0,0)

3.颜色的名称 如：red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的 透明度/不透明度，它的范围为0.0到1.0之间

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/top/right/bottom-color: black;
  border-left/top/right/bottom-width: 5px;
  border-left/top/right/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  也是隐藏标签 但是位置会保留

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

盒子模型

• margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
• padding: 用于控制内容与边框之间的距离；
• Border(边框): 围绕在内边距和内容外的边框。
• Content(内容): 盒子的内容，显示文本和图像

浮动

# 1.浮动的作用
  float: left/right;
  """
  浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
  是多个块儿级标签可以在一行显示(全部飘在了空中)
  """

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

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

解决浮动造成的影响

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