选择器补充与CSS修改属性
2022/4/27 6:16:00
本文主要是介绍选择器补充与CSS修改属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
伪元素选择器
"""通过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.相同选择器 '就近原则':谁离标签越近就听谁的!!! 2.不同选择器 行内选择器 > id选择器 > 类选择器 > 标签选择器 CSS选择器是所有选择器的基础 后期框架提供的、后期爬虫模块提供的 所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少
CSS字体样式修改
# 文字字体 font-family: "Microsoft Yahei" # 字体大小 font-size: 24px # 字体粗细 font-weight: lighter\bolder # 字体颜色 方式1: color: red; 方式2: color: rgb(128, 128, 128); 方式3: color: #4f4f4f; """ 获取颜色的方式有很多 1.截图软件自带取色功能 微信、qq自带颜色编号 #4f4f4f 2.pycharm提供的取色器 左侧颜色块点击即可 """
文字属性的修改
# 文字对齐 text-align:center/left/right # 文字装饰(重点) """a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)""" text-decoration: none; 主要就是用于去除a标签的下划线 text-decoration: line-through; 删除线 text-decoration: overline; 上边线 text-decoration: underline; 下划线 # 首行缩进 text-indent: 32px; # 首行缩进32px """ 补充:可以使用浏览器做样式的动态调整 查找到标签的css 然后左键选中 通过方向键上下动态修改数值 """
背景属性
# 1.背景颜色 background-color: red; # 2.背景图片 background-image:url("111.png"); """背景图片如果没有设置的区域大 那么默认自动填充满""" background-repeat:no-repeat\repeat-x\repeat-y 是否平铺 background-position:left top; 图片位置 background-attachment: fixed; 背景附着 如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可) background:#336699 url('1.png') no-repeat left top;
边框
# 1.自定义调整每个边的边框 border-left/top/right/bottom-color: black; border-left/top/right/bottom-width: 5px; border-left/top/right/bottom-style: solid; # 2.统一调整每个边的边框 border: 5px solid black; 顺序无所谓 只要给了三个就行 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实线边框 # 3.画圆 border-radius: 50% 如果长宽一样那么就是圆 不一样就是椭圆
display属性
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定) display:inline 让标签具备行内标签的特性(不能设置长宽) display:block 让标签具备块儿级标签的特性(可以设置长宽) display:inline-block 使元素同时具有行内元素和块级元素的特点 display:none 隐藏标签(重点) 页面上不会保留位置也不显示 visibility:hidde 也是隐藏标签 但是位置会保留
盒子模型
学习盒子模型可以将标签看成是一个个快递盒 快递盒组成部分 盒子模型 内部物品 content(内容) 内部物品与盒子内部的距离 padding(内边距、内填充) 盒子的厚度 border\边框 盒子与盒子之间的距离 margin(外边距) ps:两个标签之间的距离 有时候可以用margin也可以用padding # 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉 margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0; margin: 1px 2px 3px 4px 上 右 下 左 margin: 1px 2px 3px 上 左右 下 margin: 1px 1px 上下 左右 margin: 1px 统一设置一个值 # 2.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类名 """
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0 } #d3 { width: 100%; height: 500px; background: url("https://img1.baidu.com/it/u=2364599438,612325272&fm=253&fmt=auto&app=138&f=JPEG?w=451&h=920") center center; background-attachment: fixed; } p[id='d1'] { margin: 5px; /*修改字体大小*/ font-size: 38px; /*修改字体粗细*/ font-weight: bold; /*修改背景颜色*/ /*background: hotpink;*/ /*修改字体*/ font-family: 楷体; /*调整缩进量*/ text-indent: 114px; /*添加边框*/ /*border-top\right\bottom\left--上\右\下\左*/ /*border-color: green 颜色;*/ /*border-width: 5px 宽度;*/ /*border-bottom-style: dashed; 虚线*/ /*border-bottom-style: dotted; 点状*/ /*border-bottom-style: solid; 实线*/ /*border-bottom-style: double; 双实线*/ /*总体统一调整*/ border: deepskyblue 5px solid; /*添加背景图片*/ /*background-image: url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17");*/ /*背景图片是否填充*/ /*background-repeat: repeat; */ /*background-repeat: no-repeat; 不填充*/ /*background-repeat: repeat-x; 横向填充*/ /*background-repeat: repeat-y; 纵向填充*/ /*调整背景图片位置*/ /*background-position: center center;*/ /*统一调整*/ background: hotpink url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17") repeat center center; } /*修改第一个文字*/ p[id='d1']:first-letter { background: beige; color: purple; font-size: 38px; font-weight: lighter; } /*文本前面加信息*/ h1:before { content: '问'; color: mediumspringgreen; /*margin: 22px 33px 44px 55px; 上、右、下、左*/ /*margin: 22px 33px 44px; 上、左右、下*/ /*margin: 22px 33px; 上下、左右*/ /*margin: 22px; 上下左右统一*/ } /*文本后面加信息*/ h1:after { content: '啊'; color: gold; } body { /*修改文字对齐方式左\中\右--left\center\right*/ text-align: center; /*文字装饰:删除线\下划线\上边线--line-through\underline\overline*/ text-decoration: greenyellow underline; /*background: pink url("https://img.ivsky.com/img/tupian/t/201707/30/xingganyoumeilidemeinvtupian-005.jpg") center center;*/ /*background-repeat: repeat;*/ /*background-position: center center;*/ /*float: left;*/ } .c2 { /*display: inline; 让块儿级标签具有行级标签的特性(不能自定义长宽)*/ /*display: block; 让行级标签具有块儿级标签的特性(能自定义长宽)*/ /*display: inline-block; 让标签具有块儿级标签和行级标签的特性*/ /*display: none; 隐藏标签*/ /*visibility:hidde 隐藏标签 但是位置会保留*/ width: 200px; height: 200px; /*画圆*/ border-radius: 50%; background: deepskyblue; background-image: url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17"); background-repeat: no-repeat; background-position: center center; /*标签水平居中*/ margin: 0 auto; } h1 { display: block; width: 100%; height: 100px; } .c1 { margin: 12px; } .c4 { width: 200px; height: 200px; float: left; background-color: red; border: green 5px solid; margin-right: 2px; } div[class='c4'] { margin: 5px 11px; background: deepskyblue url("https://img2.baidu.com/it/u=1453015798,3922096350&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=385") center center; } #id1 { /*width: 700px;*/ /*height: 220px;*/ border: mediumspringgreen 20px solid; background: pink url("https://img0.baidu.com/it/u=1393217030,2306235902&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413") center center repeat; } #d5 { clear: right; } .clearfix { content: ''; clear: both; display: block; } div[class='c7'] { clear: both; } </style> </head> <body> <p id="d1">谁能凭爱意将富士山拥有</p> <div> <h1 class="c1">谁能凭爱意将富士山拥有</h1> <div class="c1" id="d3"></div> <h2 class="c1">谁能凭爱意将富士山拥有</h2> <h3 class="c1">谁能凭爱意将富士山拥有</h3> <h4 class="c1">谁能凭爱意将富士山拥有</h4> <h5 class="c1">谁能凭爱意将富士山拥有</h5> <h6 class="c1">谁能凭爱意将富士山拥有</h6> </div> <div class="c2"> 谁能凭爱意将富士山拥有 </div> <div class="c6 clearfix" id="id2"> <div class="c4" id="d2" title="美女"></div> <div class="c4" id="d4"></div> <div class="c4" id="d5"></div> </div> <div class="c7"> <a href="https://www.baidu.com/" class="'c5">百度</a> <a href="#" class="'c5">啥都没有</a> </div> </body> </html>
这篇关于选择器补充与CSS修改属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南