前端之CSS
伪元素选择器
-
first-letter
常用的给首字母设置(修改)特殊样式。
p:first-letter { color: red; font-size: 48px; }
-
before
在文本开头添加内容。
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
-
after
在文本结尾添加内容。
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
伪元素选择器的使用场景:
1、before和after常用于后面清除浮动带来的负面影响。
2、用于网站的内容防爬。
选择器的优先级
一般情况下,控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式。
相同选择器:遵循就近原则
不同选择器:统配<标签选择器 <class类选择器<id选择器<行间式<!important
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> #div { background-color: yellow; } .div { background-color: yellowgreen; } div { background-color: green!important; } * { width: 100px; height: 100px; background-color: darkgreen; } /*!important 优先级要强于行间式, 在属性值与;之间设定*/ </style> </head> <body> <div class="div" id="div" style="background-color: red"></div> <!--总结: 行间式优先级要高于内连外连所有选择器的优先级, 但是不能高于!important--> </body> </html>
css相关属性
-
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度,内联标签的宽度由内容来决定。
-
字体属性
- 文字字体>>>:font-family: "Microsoft Yahei"
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
- 字体大小>>>:font-size: 24px
如果设置成inherit表示继承父元素的字体大小值。
p { font-size: 14px; }
- 字重(粗细)>>>:font-weight: lighter\bolder
font-weight用来设置字体的字重(粗细)。
p { font-weight: lighter; }
值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,而700等同于bold |
inherit | 继承父元素字体的粗细值 |
- 文本/字体颜色
颜色属性被用来设置文字的颜色。
方式1:十六进制>>>:color: #4f4f4f;
方式2:一个RGB值>>>:color: rgb(128, 128, 128);
方式3:颜色的英文名字>>>:color: red;
-
文字属性
text-decoration 属性用来给文字添加特殊效果。
- 文字对齐
text-align:center/left/right 》》》居中、左对齐、右对齐
- 文字装饰
- text-decoration: none; 》》》主要就是用于去除a标签的下划线
- text-decoration: line-through;》》》 删除线
- text-decoration: overline; 》》》上边线
- text-decoration: underline; 》》》下划线
a { text-decoration: none; }
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属性的值。 |
- 文字首行缩进
/*将段落的第一行首行缩进32像素/* p { text-indent: 32px; }
-
背景属性
- 背景颜色:background-color: red;
- 背景图片:background-image:url("111.png");
- 背景重复:
repeat(默认):背景图片平铺排满整个网页
repeat-x:背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat:背景图片不平铺
背景图片如果没有设置的区域大,那么默认自动填充满。
- 背景位置:background-position:left top; 图片位置
简写模式:
background:#336699 url('1.png') no-repeat left top;
-
边框属性
自定义调整每个边的边框:
border-width》》》边框宽度
border-style》》》边框样式
border-color》》》边框颜色
border-radius 50%》》》用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。如果长宽一样那么就是圆,不一样就是椭圆。
#i1 { border-width: 2px; border-style: solid; border-color: red; } /*简写模式/* #i1 { border: 2px solid red; 顺序无所谓 只要给了三个就行 }
边框样式:
值 | 描述 |
---|---|
none | 无边框。 |
dotted | 点状虚线边框。 |
dashed | 矩形虚线边框。 |
solid | 实线边框。 |
-
显示方式display属性(用于控制HTML元素的显示效果。)
''' display: what:控制标签在页面中的显示方式的属性 why:通过设置该属性的不同属性值,使其在页面中的显示方式达到设定的效果,且对于CSS的样式支持程度也不一样 display: inline ; 1.同行显示 2.只支持部分CSS样式(不支持宽高) 3.宽高由文本内容撑开 display:block ; 1.异行显示 2.支持所有CSS样式 3.设置了宽高就采用设置的值,宽高也就有默认的特性 display:inline-block; 1.同行显示 2.支持所有的CSS样式 3.设置了宽高就采用设置的值 总结:标签的显示方式就是用display属性控制 1.带有inline的就会同行显示,带有block的就会支持所有CSS样式 2.带有inline的都是与内容相关的标签,带有block的主要用来搭建架构的 嵌套关系: 页面架构就是由标签一层层嵌套关系形成的 嵌套关系有一定的规则: 1.inline-block类型不建议嵌套任意标签,所以系统的inline-block都设计成了单标签 2.inline类型只嵌套inline类型的标签 3.block类型可以嵌套任意类型标签(注:hn和p只建议嵌套inline类型标签) 结论: 1.inline嵌套block和inline-block,不起任何作用,所以只能嵌套inline 2.inline-block可以嵌套其他类型标签,但一定要结合vertical-align属性操作,左右还有一空格间距 '''
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <! DOCTYPE html> < html > < head > < meta charset="UTF-8"> < title >display</ title > < style > span { width: 200px; height: 50px; background-color: yellow; } p { width: 200px; height: 50px; background-color: red; } img { width: 200px; /*height: 50px;*/ } </ style > </ head > < body > < span >123< i >456</ i >< b >789</ b ></ span > < span >123< i >456</ i >< b >789</ b ></ span > < p >123< i >456</ i >< b >789</ b ></ p > < p >123< i >456</ i >< b >789</ b ></ p > < img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt=""> < img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt=""> < hr > <!-- 通过display属性值进行划分 --> < style > Grace { color: blueviolet; width: 200px; height: 50px; background-color: red; } .o1 { display: inline; } .o2 { display: block; } .o3 { display: inline-block; } </ style > < Grace class="o1">123</ Grace > < Grace class="o1">123</ Grace > < hr > < Grace class="o2">123</ Grace > < Grace class="o2">123</ Grace > < hr > < Grace class="o3">123</ Grace > < Grace class="o3">123</ Grace > < hr > < style > .div { width: 100px; height: 100px; background-color: orange; display: inline-block; } /*标签的显示方式就是用display属性控制*/ </ style > < div class="div">000</ div > < div class="div">111</ div > </ body > </ html > |
值 | 意义 |
display:"none" | HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
display:"block" | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:"inline" | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
盒子模型
盒模型由四部分组成:
margin(盒子与盒子之间的距离》外边距)、border(盒子的厚度》边框)、padding(内边距)、content(盒子内部内容)。
''' 1.margin:用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。 2.border:边框,围绕在内边距和内容外的边框,样式/宽度/颜色(solid表示实线,dashed表示虚线,dotted表示点状线) 3.padding:内边距,用于控制内容与边框之间的距离,从显示角度控制文本的显示区域 4.content:内容区域,显示文本和图像,由宽 X 高组成 注意: 1.margin,padding:起始为上,顺时针依次赋值,不足边时去对边 2.要做到文本内移,设置padding,如果又想显示区域不变,相应减少content '''
margin的用法
body标签默认自带8px的margin值,我们在编写页面之前应该去掉。
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; } 简写: .margin-test { margin: 5px 10px 15px 20px; }
盒子模型页面布局:
标签的水平居中,可以使用固定搭配。
.mycenter { margin: 0 auto; }
note:
'''
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 统一设置一个值
'''
padding用法
padding用法与margin一致。
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } 简写: .padding-test { padding: 5px 10px 15px 20px; }
浮动
在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
关于浮动的两个特点:
- 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动造成的影响:浮动会造成父标签塌陷。
浮动的三种取值:
left:向左浮动
right:向右浮动
none:默认值,不浮动
解决浮动造成的影响:(清除浮动的副作用>>>父标签塌陷问题)
使用clear属性
clear属性规定元素的哪一侧不允许其他浮动元素。
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
clear属性只会对自身起作用,而不会影响其他元素。
主要有三种方式:
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法(万能公式)
.clearfix:after { content: ''; clear: both; display: block; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步