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;  # 上 右 下 左

巴特西

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

伪元素选择器

选择器的优先级

字体相关

背景属性

边框属性

display属性

盒子模型

最新文章

热门文章