本文主要是介绍前端基础（三），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前端基础（三）

• 伪元素选择器
• 选择器优先级
• CSS修改文字属性
• CSS修改字体属性
• CSS修改背景属性
• CSS修改边框属性
• display属性
• 盒子模式
• 浮动

伪元素选择器

"""通过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.相同选择器
	'就近原则':谁离标签越近就听谁的!!!
        ps:还可以是负距离
2.不同选择器 
	行内选择器（不推荐使用） > id选择器 > 类选择器 > 标签选择器

字体样式

# 文字字体
  font-family: "Microsoft Yahei"（微软雅黑）
# 字体大小
p {
	font-size: 24px
}
# 字体粗细
	font-weight: lighter(细）\bolder（粗）
# 字体颜色
	方式1: 
    	color: red;（有些自定义的颜色不好写出来）
  方式2:
    	color: rgb(128, 128, 128);（r:红g:绿b:蓝,三基色，范围是0-255）
  方式3:
    	color: #4f4f4f;
 
# ps:可以使用截图软件（微信或者qq等)来获取颜色编号，也可以使用pycharm提供的取色器（点击左侧颜色块）

CSS修改文字属性

# 文字对齐
text-align:center（文本居中）/left（文本居左对齐）/right（文本居右对齐）
    
# 文字装饰（a标签默认带下划线，并且有颜色（属于记忆功能，未点击是蓝色，点击过是紫色）
a {
1.text-decoration: none;(用于去出a标签的下划线)
2.text-decoration: line-through;(删除线)
3.text-decoration: overline;(上边线)    
4.text-decoration: underline;(下划线)
}

 # 首行缩进
text-indent: 32px;(首行缩进32px)
    
 # ps:可以使用浏览器做样式的动态调整，查找到标签的css,然后左键选中，通过方向键上下动态修改数值

CSS修改背景属性

# 1.背景颜色
p {
background-color: red;
}(标签背景颜色为红色)
body {
backgrount-color: aqua;
}  (整张纸板背景颜色为aqua)
div {
    backgrount-color:aqua;
    height: 400px;
    width: 400px;
}(可以控制纸板背景颜色的大小)
# 背景图片
div {
backgrount-image:url(图片地址)； ps:背景图片如果没有设置的区域大，那么默认自动填充满
backgrount-repeat:no-repeat	#  背景图片如果没有设置的区域大,不填充
backgrount-repeat:no-repeat-x	#  背景图片如果没有设置的区域大,横向填充，竖向不填充
backgrount-repeat:no-repeat-y	#  背景图片如果没有设置的区域大，竖向填充，横向不填充
backgrount-position:left top;	# 在不填充的情况下，可以调整位置，left:图片离左边px；top:图片离上面px；也可以写center,center;就是居中
backgrount-attachment: fixed;(背景附着)
}
# ps:如果多个属性名具有相同的前缀，那么可以整合到一起编写，只需要一个前缀名就可以
    backgrount:uqua url('图片地址') no-repeat lef top;

CSS修改边框

# 1.自定义调整每个边的边框
p {
border-left(左）/top（上）/right（右）/bottom（下）-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
     }   
# 2.统一调整每个边的边框
p {
border: 5px solid black;(只要给了三个数据就行，顺序不用考虑)
}    
    dotted(点状虚线边框)
    dashed(矩形虚线边框)
    solid(实线边框)
    
 # 3.画圆
div {
 backgrount-color:aqua;
 height:300px;
 width:300px;
border-radius: 50%;
}
   # ps:如果长宽不一样就是椭圆

display属性

# 只有块儿级标签可以设置长宽，行内标签不可以，行内标签内的长宽由内部文件决定
div {
		   background-color: aqua;
            height:300px;
            width: 300px;
            display: inline;
}
display:inline  让标签具备行内标签的特性(不能设置长宽)
display:block   让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block  使元素同时具有行内元素和块级元素的特点
display:none    隐藏标签(重点)  页面上不会保留位置也不显示
visibility:hidde  也是隐藏标签 但是位置会保留

盒子模型

# 所有的标签其实都有一个盒子模型
快递盒组成部分:										盒子模型:
	内部物品										content(内容)
	内部物品与盒子内部的距离						   padding(内边距、内填充)
	盒子的厚度										border(边框)
	盒子与盒子之间的距离						 		 margin(外边距)
    # 两个标签之间的距离 有时候可以用margin也可以用padding
    
# 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉，单位是px
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
简写：margin:0 0 0 0;(上右下左)
     margin:0 0 0;(上，左右，下)
     margin:0 0;(上下，左右)
     margin:0;(统一设置一个值)
        
 # padding用法与margin用法一致

# 盒子模型页面布局
标签的水平居中 可以使用固定搭配，只能水平居中，不能上下居中
  	margin: 0 auto;
     

浮动

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

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

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

解决浮动造成的影响

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

这篇关于前端基础（三）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！