3、前端–伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型

伪元素选择器

# 首字调整>>>:也是一种文档布局的方式
p:first-letter {
            font-size: 48px;  /*字体大小*/
            color: red;
        }
# 在文本的前面通过css动态渲染文本>>>:特殊文本无法选中
p:before {
            content: '嘿嘿';
            color: red;
        }
<p>::before言而有信 品行端正 光明磊落 待人以诚</p>
# 在文本的后面通过css动态渲染文本>>>:特殊文本无法选中
p:after {
            content: '呵呵';
            color: greenyellow;
        }
<p>言而有信 品行端正 光明磊落 待人以诚::after</p>
"""
以后我们在编写爬虫程序爬取页面内容的时候如果没有正常文本
那么可能是因为伪元素选择器的问题
"""

选择器的优先级

"""
我们学习了三种css引入方式并且学习了很多选择器
那么如果出现多个选择器修改同一个标签样式 会优先参考谁的
	研究基本选择器即可
		标签选择器 类选择器 id选择器 行内选择器
"""
# 相同选择器不同导入方式
	选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
# 不同选择器不遵循就近原则>>>:优先级
	行内选择器 > id选择器 > 类选择器 > 标签选择器

字体相关

1.宽和高
	只有块儿级标签可以设置 行内标签无法设置
  	p {
            height: 1000px;
            width: 50px;
        }
2.字体大小
	font-size: 99px;  # 字体大小一般有固定的大小参考(肉眼适应)
3.粗细
	font-weight: bolder;  
  font-weight: lighter;
4.文本颜色
	color:red;  # 第一种
	color:#4e4e4e;  # 第二种
	color:rgb(88,88,88)  # 第三种
 	color:rgba(88,88,88,0.2)  # 最后一个参数调整透明度(0-1)
5.文字对齐
	text-align: center;  # 居中展示
6.文字装饰(很常用!!!)
	text-decoration: none;  # 主要用于去除a标签默认的下划线
7.首行缩进
	text-indent: 32px;  # 默认文字大小是16px

背景属性

background-color: orange;  # 背景颜色
background-image: url('url');  # 背景图片
background-repeat: no-repeat;  # 是否铺满
background-position:左右 上下;  # 图片位置
"""多个属性名前缀相同 那么可以简写"""
background:orange url('url');  # 一个个编写即可 不写就默认
  
# 如何实时修改图片位置
	浏览器找到标签的css代码 然后方向键上下按住即可动态调整

边框属性

				p {
            /*border-left-color: red;*/
            /*border-left-style: solid;*/
            /*border-left-width: 3px;*/
            /*多个属性有相同的前缀  一般都可以简写*/
            /*border-left: 5px red  solid;   !*没有顺序*!*/
            /*border-top:orange 10px dotted;*/
            /*border-right: black dashed 5px;*/
            /*border-bottom: deeppink 8px solid;*/
            /*多个属性有相同的前缀  一般都可以简写*/
            border: 5px red solid;  /*上下左右一致*/
        }
        div {
            height: 500px;
            width: 500px;
            border: 5px solid red;
          	/*画圆*/
            border-radius: 50%;
        }

display属性

div {
            display: inline;  /*行内*/
}

span {
            /*display: block;  !*块级*!*/
            display: none;
            /*
            隐藏标签 页面上看不见也不再占用页面位置
            但是通过浏览器查找标签是可以看到的
            到后面学习django会讲跨站请求伪造(钓鱼网站)
            */
        }

p {
            display: inline-block;
            /*
            具备块级标签可以修改长宽的特性
            也具备行内标标签文本多大就占多大的特性
            */
        }

盒子模型

"""
以快递盒为例
	1.快递盒与快递盒之间的距离		外边距(标签之间的距离)
	2.快递盒的厚度				边框
	3.内部物品到盒子的距离			内边距(文本内容到边框的距离)
	4.物品本身的大小				文本大小
"""
# body标签默认自带8px的外边距 在编写的时候应该提前去掉
	 body {
            margin: 0;
        }
1.外边距(标签之间的距离)
	margin简写
	margin:0px;  # 上下左右都一致
	margin:10px 10px;  # 第一个控制上下 第二个控制左右
	margin:20px 10px 20px;  # 上 左右 下
	margin:10px 2px 3px 5px;  # 上 右 下 左
2.内边距(文本内容到边框的距离)
	padding简写
	padding:0px;  # 上下左右都一致
	padding:10px 10px;  # 第一个控制上下 第二个控制左右
	padding:20px 10px 20px;  # 上 左右 下
	padding:10px 2px 3px 5px;  # 上 右 下 左

推荐这些文章:

前端 字体 颜色 背景 边框 盒子模型

内容概要

伪元素选择器
字体样式
颜色
背景、边框
盒子模型

内容详细
伪元素选择器
# 首字调整>>>:也是一种文档布局的方式
p:first-letter {
font-size: 48px; /*字体大小*/
color: red;
}
# 在文本的前面通过css动态渲染文本>>>:特殊文本无法选中
p:before {
conte...

前端CSS之文本属性及盒子模型

WEB前端基础之CSS(字体颜色背景-盒子模型)
一:伪元素选择器
1.首字调整>>>:也是一种文档布局的方式
p:first-letter {
font-size: 48px; /*字体大小*/
color: red;
}

2.在文本的前面通过css动态渲染文本>>>:特殊文本无法选中
p:before {
content: '嘿嘿';
color: red;
}

标签

<p>::before言而有信 品行...

前端微讲解(三)

前端微讲解(三)
伪元素选择器
# 1.修改首个字体样式
p:first-letter {
color: red; # 让文本第一个字变为红色
font-size: 48px; # 让文本第一个字大小变为48px
}
# 2.在文本开头添加内容
p:before {
content: '**'; # 在文本开头添加两个星号
color: gold;
}
# 3.在文本结尾添加内容
p:after {
content: '**'; ...

day04.26前端之CSS

伪元素选择器

first-letter

常用的给首字母设置(修改)特殊样式。

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

before

在文本开头添加内容。

/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}

after

在文本结尾添加内容。

/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:bl...

前端之CSS

css简介
CascadingStyleSheets 的简称,层叠样式表
给HTML标签修改样式

语法结构

选择器 {
属性名1:属性值1;
属性名2:属性值2
}

注释语法

/*注释内容*/

/*
单独开设的css文件内代码也是非常多的 可以借助于注释管理
/*导航条样式*/
/*侧边栏样式*/
*/

引入方式

1.style内部直接编写css代码
平时学习、练习的时候推荐使用
2.link标签引入外部css文件
正式工作、实际生产环境推荐使用
3.标签内直接书写
一般情况下不推荐使用 容易造成荣誉现象

1、基本选择器(...

WEB前端基础之SCC(字体颜色背景-盒子模型)

目录一:伪元素选择器1.首字调整>>>:也是一种文档布局的方式2.在文本的前面通过css动态渲染文本>>>:特殊文本无法选中3.在文本的后面通过css动态渲染文本>>>:特殊文本无法选中二:选择器的优先级1.选择器优先级2.相同选择器不同导入方式(相同距离优先)3.不同选择器不遵循就近原则>>>:优先级三:字体相关1.高度和宽度2.字体大小3.字重(粗细)四:文本颜色1.第一种方式2.第二种方式(颜色编码)3.第三种方式(0-255)4. 文字属性5.文字对齐6.文字装饰(很常用!!!)7.主要用于去除a标签默认的下划线...

6.盒模型补充

盒模型补充
1. 盒子大小
默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing用来设置盒子尺寸的计算方式(设置 width 和 height 的作用)
.box {
width: 200px;
height: 200px;
background-color: yellow;
border: 10px red solid;
/* box-sizing: content-box; */
box-sizing: border-box;
}

可选值:

content-box 默认值,宽度和高度用来设置内容区的大小

borde...

CSS04:盒子模型

所有HTML元素可以看作盒子,封装了周围的HTML元素,包括边距、边框、填充和实际内容。

边框、内外边距

粗细、样式、颜色
总宽度=外边距+边框+内边距+内容宽度

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<title>我的网页</title>

<style>

/*默认标签如body、ul、ol、p、a等都有默认的边距值,可以手动清零(*代表所有标签)*/
...

前端三剑客之CSS

目录前端三剑客之CSS1、css简介1.1 css语法结构1.2 css注释语法2、css引入方式2.1 style内部直接编写css代码2.2 link标签引入外部的css文件2.3 标签内直接书写3、css基本选择器3.1 标签选择器3.2 类选择器3.3 id选择器3.4 通用选择器4、css组合选择器4.1 后代选择器4.2 儿子选择器4.3 毗邻选择器4.4 弟弟选择器5、css属性选择器6 、css选择器的分组与嵌套6.1 多个相同选择器并列使用6.2 多个不同选择器并列使用6.3 不并列同样可以使用组合选择器6.4 直接筛选6.5 练习题7、伪元素选择器7.1 鼠标悬浮在上面7...

盒子模型及边框使用(内外边距及div居中)

盒子模型:

 
 
 margin:外边距
padding:内边距
border:边框
边框:
  边框的粗细
  边框的样式
  边框的颜色
 

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7
8 <style>
9
10 /*h1,ul,li,a,bo...

文章标题:3、前端–伪元素选择器、选择器优先级、字体、背景、边框、display、盒子模型
文章链接:https://www.dianjilingqu.com/51057.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>