HTML基础（2）

HTML基础（2）

伪元素选择器

# 什么是伪元素？
CSS 伪元素用于设置元素指定部分的样式。
"""通过css操作文本内容"""
# 1.修改首个字体样式
	p:first-letter {
            color: red;
            font-size: 48px;
        }
'注意：::first-letter 伪元素只适用于块级元素。'
# 2.在文本开头添加内容
	p:before {
            content: '哈哈';
            color: blue;
        }
# 3.在文本结尾添加内容
	p:after {
            content: '嘿嘿';
            color: yellow;
        }
# 使用场景
  1.用于后面清除浮动带来的负面影响
  2.用于网站的内容防爬
'''请注意双冒号表示法 - ::first-line 对比 :first-line

在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。'''

选择器的优先级

# 研究方向
1.相同选择器
	'就近原则':谁离标签越近就听谁的!!!
2.不同选择器 
	行内选择器 > id选择器 > 类选择器 > 标签选择器

字体样式

字体大小

# 以像素设置字体大小
使用像素设置文本大小可以完全控制文本大小：
h1 {
  font-size: 40px;
}
# 用 em 设置字体大小
'''1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。'''
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

文字字体

# 在 CSS 中，我们使用 font-family 属性规定文本的字体。

  font-family: "Microsoft Yahei"

'通常我们使用微软雅黑的一个字体'

字体颜色

# 字体颜色
	方式1: 
    	color: red;
  方式2:
    	color: rgb(128, 128, 128);
  方式3:
    	color: #4f4f4f;
"""
获取颜色的方式有很多
	1.截图软件自带取色功能
		微信、qq自带颜色编号 #4f4f4f
	2.pycharm提供的取色器
		左侧颜色块点击即可 
"""
# rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)

文字属性

# 文字对齐
	text-align:center/left/right
# 文字装饰(重点)
	"""a标签默认带下划线  并且有颜色(没有点击过是蓝色 点击过是紫色)"""
  text-decoration: none;  主要就是用于去除a标签的下划线
  text-decoration: line-through;  删除线
  text-decoration: overline;			上边线
  text-decoration: underline;			下划线
# 首行缩进
	text-indent: 32px;  # 首行缩进32px

背景属性

CSS 背景属性用于定义元素的背景效果
# 1.背景颜色
	 background-color: red;
        
'''通过 CSS，颜色通常由以下方式指定：

有效的颜色名称 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"'''

# 2.背景图片
background-image 属性指定用作元素背景的图像

默认情况下，图像会重复，以覆盖整个元素
body {
  background-image: url("bgdesert.jpg");
}
# 其他属性
background-position 属性用于指定背景图像的位置

background-repeat:no-repeat\repeat-x\repeat-y  是否平铺
    
background-position:left top;  图片位置
    
background-attachment: fixed;  背景附着
    
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

边框样式

'border 属性允许您指定元素边框的样式、宽度和颜色'

  border: 5px solid black;  顺序无所谓 只要给了三个就行
# 边框的属性
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

# 自定义调整每个边的边框
  border-left/top/right/bottom-color: black;
  border-left/top/right/bottom-width: 5px;
  border-left/top/right/bottom-style: solid;

# 画圆
	border-radius: 50%
  如果长宽一样那么就是圆 不一样就是椭圆

display属性

# display 属性规定是否/如何显示元素

每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline

# Display: none;
display: none; 通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。

默认情况下，<script> 元素使用 display: none;

# display: inline-block
与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

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

盒子模型

# 盒子模型的概念
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

# 盒子模型的相关属性
Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像

# body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
    
margin: 1px 2px 3px 4px	  上 右 下 左
    '''padding用法与margin一致'''
# 盒子模型页面布局
	标签的水平居中 可以使用固定搭配
  	margin: 0 auto;

    

浮动

# 浮动的概念
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
Float（浮动），往往是用于图像，但它在布局时一样非常有用

# 元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

浮动元素之后的元素将围绕它
浮动元素之前的元素将不会受到影响
# 浮动的作用
  float: left/right;
  """
  浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
  是多个块儿级标签可以在一行显示(全部飘在了空中)
  """
# 浮动区域内有文本的情况
  浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
  那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来

解决浮动造成的影响

# 清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

# 万能公式
.clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
 """
 以后写网页 提前写好上面的代码 
 然后哪个标签塌陷了就给谁添加上clearfix类名即可
 
 很多前端页面框架使用的也是clearfix类名
 """