前端(三)
一.伪元素选择器
/*首字调整>>>:也是一种文档布局的方式*/ 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选择器 > 类选择器 > 标签选择器*/
三.字体相关
/*宽和高 只有块儿级标签可以设置 行内标签无法设置*/ p { height: 1000px; width: 50px; } /*字体大小*/ font-size: 99px; /*字体大小一般有固定的大小参考(肉眼适应)*/ /*粗细*/ font-weight: bolder; font-weight: lighter; /*文本颜色*/ color:red; color:#4e4e4e; color:rgb(88,88,88) rgba(88,88,88,0.2) /*文字对齐 text-align: center; # 居中展示*/ /*文字装饰(很常用!!!) 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; } /*外边距(标签之间的距离)*/ margin简写 margin:0px; # 上下左右都一致 margin:10px 10px; # 第一个控制上下 第二个控制左右 margin:20px 10px 20px; # 上 左右 下 margin:10px 2px 3px 5px; # 上 右 下 左 /*内边距(文本内容到边框的距离)*/ padding简写 padding:0px; # 上下左右都一致 padding:10px 10px; # 第一个控制上下 第二个控制左右 padding:20px 10px 20px; # 上 左右 下 padding:10px 2px 3px 5px; # 上 右 下 左
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」