标签：标签 前端 边框 background 讲解 文本 margin 选择器

前端微讲解(三)

伪元素选择器

# 1.修改首个字体样式
	p:first-letter {
            color: red;  # 让文本第一个字变为红色
            font-size: 48px;  # 让文本第一个字大小变为48px
        }
# 2.在文本开头添加内容
	p:before {
            content: '**';  # 在文本开头添加两个星号
            color: gold;
        }
# 3.在文本结尾添加内容
	p:after {
            content: '**';  # 在文本结尾添加两个星号
            color: red;
        }
# 4.使用场景
	1.用于后面清除浮动带来的负面影响
    2.用于网站的内容防爬

选择器优先级

# 1.相同选择器
	'就近原则':谁离标签进就听谁的
# 2.不同选择器
	行内选择器 > id选择器 > 类选择器 > 标签选择器

字体样式

# 1.字体样式
	font-family: "Microsoft Yahei"  # 微软雅黑，一般不做修改
# 2.字体大小
	font-size: 50px;  # 修改字体大小
# 3.字体粗细
	font-weight: bolder/lighter;  # 修改字体的粗细
# 4.字体颜色
	1.color: red;  # 颜色名字
	2.color: rgb(128,128,128);  # RGB值
	3.color: #4f4f4f;  # 16进制值

文字属性

# 1.文字对齐
	text-align: center;  # 文本居中
	text-align: left;  # 文本左对齐
	text-align: right;  # 文本右对齐
# 2.文字装饰
	a标签默认是带下划线的，并且是有颜色的，没有点击之前是蓝色，点击之后是紫色。
    text-decoration: none;  # 去除a标签的下划线
	text-decoration: line-through;  # 加删除线
	text-decoration: overline;  # 上边线
	text-decoration: underline;  # 下边线
# 3.首行缩进
	text-indent: 40px;  # 首行缩进，单位是px

背景属性

# 1.背景颜色
	background-color: gold;  
# 2.背景图片
	background: url("图片地址");
	'''背景图片如果没有设置的区域大，那么默认自动填充满'''
    background-repeat: no-repeat;  # 不平铺
	background-repeat:repeat-y;  # 纵向平铺
	background-repeat:repeat-x;  # 横向平铺
	background-position: right;  # 背景图片在右边
	background-position: left;  # 背景图片在左边
	background-position: top;  # 背景图片在中间
	background-attachment: fixed;  # 背景附着

边框属性

# 1.自定义调整每个边的边框
	border-right  # 右边框
    border-left  # 左边框
    border-top  # 上边框
    border-bottom  # 下边框
# 2.统一调整每个边的边框
	border: 1px solid black;  # 顺序无所谓，只要给三个值就可
# 3.边框类型
	dotted  # 点状虚线边框
    solid  # 实线边框
    dashed  # 虚线边框
# 4.画圆
	border-radius: 50%;  # 如果长宽一样就是圆，不一样就是椭圆

display属性

'''只要块级标签可以设置长宽，行内标签是不可以设置长宽的，长宽由内部文本决定'''
display: inline;  # 让标签具备行内标签的特性(不能设置长宽)
display: block;  # 让标签具备块级标签的特性(可以设置长宽)
display: inline-block;  # 使元素同时具备行内元素和块级元素的特点
display:none  # 隐藏标签，页面上不会保留位置也不显示
visibility:hidde  # 也是隐藏标签，但是位置会保留

盒子模型

	所有的标签其实都有一个盒子模型，盒子模型就相当于大盒子套小盒子一样。
# 盒子模型标签
	1.content  # 内容
    2.padding  # 内边距
    3.border  # 边框
    4.margin  # 外边距
# body标签默认自带8px的margin值
	1.margin-left  # 左外边距
    2.margin-right  # 右外边距
    3.margin-top  # 上外边距
    4.margin-bottom  # 下外边距
    5.margin: 1px 2px 3px 4px  # 顺序是上、右、下、左
 	6.margin: 1px 2px 3px  # 顺序是上、左右、下
	7.margin: 1px 2px  # 顺序是上下、左右
	8.margin: 1px  # 统一设置一个值
# 盒子居中
	margin: 0 auto;  # 只能水平居中

浮动

# 1.浮动的标签
	1.float: left;  # 左浮动
	1.float: right;  # 右浮动
'''浮动是所有网站页面布局必备的，可以将块级标签浮动起来脱离正常的文档流，使多个块级标签可以在一行显示。但是浮动
也会造成影响，浮动会造成父标签的坍塌。浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵
循文本内容优先展示的原则，会想办法让文本展示出来'''
# 2.解决浮动造成的影响
	1.clear: left/right;  # 规定元素的哪一侧不允许其他浮动元素
	2.解决方式:
        (1).直接写对应的长宽
        (2).添加clear属性，避免去查找长宽
        (3).万能公式:
            .clearfix:after {
            content: '';
            clear: both;
            display: block;
        		}
'''以后写网页,提前写好上面的代码,然后哪个标签塌陷了就给哪个标签添加上clearfix类名即可'''

这里是IT小白陆禄绯，欢迎各位大佬的指点！！！

标签：标签,前端,边框,background,讲解,文本,margin,选择器
来源： https://www.cnblogs.com/pyqsy/p/16196054.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。