CSS基本语法

CSS的4种导入方式

  • <h1 style="color: red;"> 行内样式表
  • <style> 内部样式表
  • <link rel="stylesheet" type="" href=""> 外部样式表
  • <style>@import url("$FILE_PATH") 导入式外部样式表

 优先级对比: 就近优先

CSS的基本选择器

  • 标签选择器
  • 类选择器
  • id选择器

 优先级对比: id选择器 > 类选择器 > 标签选择器

CSS的层次选择器

  • 后代选择器    body p {} body下的所有p标签
  • 子选择器    body>p {} body下的第1层p标签
  • 相邻兄弟选择器    .Class_Name+p {} 类选择器下的第1个p标签,必须结合类选择器使用,且对下不对上
  • 通用选择器    .Class_Name~p {} 类选择器下所有同层级的p标签

CSS的结构伪类选择器

  • ul li:first-child {}    ul下的第1个li子标签,如果选中的非li标签则css不生效
  • ul li:last-child {}        ul下的最后1个li子标签
  • p:nth-child(2)        选中当前p标签的父级标签下的第1个标签;选中的标签也必须是p标签CSS才会生效,如果选中的不是p标签css不会生效
  • p:nth-of-type(2) {}        选中父标签下p标签的第2个,与nth-child不同的是,此选择器锁定p标签后进行轮循,不会出现选中其他标签的情况
  • a:hover {}            设置一个动作,可以在a连接上设置背景颜色,鼠标悬浮在标签上时会生效

CSS属性选择器

  • a[id] {}        选中a标签下所有存在id元素的a标签
  • a[id=first] {}    选中a标签下id元素值是first的a标签
  • a[class*="links"] {}    选中class元素值中包含links的a标签
  • a[href^="http"] {}    选中href元素值以http开头的a标签
  • a[href$="pdf"] {}    选中href元素值以pdf结尾的a标签

盒子模型主要的3点

  • margin    外边距,body 默认存在一个8px的外边距
  • padding    内边距
  • border    盒子线条

CSS 属性

排版

查看代码 
text-align: center;    /*居中*/
text-indent: 2em;    /*首行缩进，em表示2个中文字符*/
line-height: 25px;    /*设置文本行高*/
text-decoration: none;    /*去除 a 标签的下划线*/

list-style: none;    /*不显示列表前面的点*/

盒子模型

盒子模型主要是3点设置：margin / border / padding，分别对应外边距、线条、内边距

查看代码

margin: 10px;    /*外边框间距*/
border: 1px solid red;    /*3个属性值分别对应 线条粗细、线条类型、线条颜色*/
padding: 5px;    /*内边框间距*/

圆角边框和阴影

利用圆角边框可以实现一些非常有意思的效果，阴影则是用到的时候可以通过w3school查询属性值

查看代码

border-radius: 50px 20px;	/*圆角边框的生效顺序按顺时针排序：左上、右上、右下、左下，两个值则取对角*/
box-shadow: 10px 10px 10px 1px yellow;	/*盒子阴影，这几个值分别对应 水平阴影、垂直阴影、模糊距离、阴影尺寸、颜色*/
img {border-radius: 50px;}	/*圆形头像，在img标签应用原件边框实现类似QQ头像一样的效果*/

display与浮动

display 常用到的属性值是 inline-block，默认情况下行内标签可以写在块级标签下，反之不行，而 display 可以直接将当前标签更改为行内标签或块级标签，这对排版非常有帮助，display 还有一个属性值是 none，表示不显示；浮动属性表面上看起来仅仅是排版移动标签，但实际上浮动属性类似图层的概念，拥有浮动属性的标签会位于底层html之上的第2层

使用 overflow 属性触发隐藏或滚动条的前提条件，是要为当前应用 overflow 属性的标签设置长宽值，例如为 div 标签设置长宽值后再应用 overflow 属性；未给当前标签设置指定的长宽值的条件下应用 overflow，不会出现切割隐藏内容或滚动条的情况，具体表现为当前标签会将所有子标签包含在框内，例如没有为 div 标签设置长宽值，则 overflow 默认涵盖此 div 下的所有内容的长宽总和

查看代码

display: block;    /*block 可以更改为 inline 或 inline-block，分别表示为 块标签、行内标签、两者兼具*/
float: left;    /*浮动可以调整块级标签位置，但会随着浏览器的伸缩自动重新排版，会导致画面看上去非常混乱*/
clear: right;	/*表示右侧不允许有浮动元素，如果右侧有浮动元素，会自动排版到下面；right 也可以更改未left、both或none，分别表示左侧、两侧和不允许存在浮动元素*/
overflow: hidden;	/*将超出限定长宽的内容切割隐藏；可将 hidden 更改为 scroll，表示为超出限定长款的内容设置滚动条*/

只要有出现浮动元素时，必须要考虑父级边框塌陷问题的解决

 

父级边框塌陷问题解决

html的body

查看代码


<body>
	<div id="father">
		<div class="layer01"><img src="resources/image/1.jpg" alt="loading" title="wallpaper" width="200px" height="400px"/></div>
		<div class="layer02"><img src="resources/image/2.gif" alt="loading" title="wallpaper"/></div>
		<div class="layer03"><img src="resources/image/3.jpg" alt="loading" title="wallpaper" width="200px" height="200px"/></div>
		<div class="layer04">
			浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
		</div>
		<div class="clear"></div>
	</div>
</body>

 1. 增加父级标签高度 

固定高度对后续的标签扩展并不友好

查看代码

#father {
	border: 1px solid black;
	height: 800px;
}
.layer01 {
	border: 1px dashed red;
	display: inline-block;
	float: left;
}
.layer02 {
	border: 1px dashed red;
	display: inline-block;
	float: right;

2. 在所有浮动标签的末尾添加一个空div标签解决

代码中需要尽量避免空div，或者说需要尽量避免无用的代码

查看代码


.clear {
	clear: both;
	margin: 0px;
	padding: 0px;
}

3. 通过overflow元素解决

使用overflow元素的前提是需要为父标签设置固定的长宽，如果没有为父标签设置长款，则默认以父标签下包含的所有内容的长宽总和作为父标签的长宽，overflow元素有多个值，hidden表示超出显示部分会被切割隐藏，scroll表示超出显示部分会以滚动条的形式展示，一般使用hidden，因为莫名其妙的滚动条可能会显得网页非常诡异

查看代码


#father {
	border: 1px solid black;
	overflow: hidden;
}

4. 父类添加一个伪类

为父类添加一个伪类的解决方式与第2种在末尾添加空div标签的方式思路上是一致的，只不过伪类避免了在html中添加多余的代码行；此方式在不改变原有代码的情况下可以实现解决父级边框塌陷问题

查看代码

#father:after {
	content: "";    /*添加一个空白，后续的所有元素作用在此空白上*/
	display: block;
	clear: both;
}

浮动小结

只要有出现浮动元素时，必须要考虑父级边框塌陷问题的解决

 

定位

html代码

查看代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			body {
				margin: 0px;
				padding: 0px;
			}
			div {
				margin: 10px;
				padding: 5px;
				font-size: 12px;
				line-height: 25px;
			}
			#father {
				border: 1px solid aqua;
				padding: 0px;
			}
			#first {
				border: 1px dashed orange;
			}
			#second {
				border: 1px dashed antiquewhite;
			}
			#third {
				border: 1px dashed green;
			}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="first">first box</div>
			<div id="second">second box</div>
			<div id="third">third box</div>
		</div>
	</body>
</html>

1. 相对定位

相对于自身原来的位置进行偏移，相对定位的原位置仍保留在标准文本流中，仅仅是看起来向浮动元素

查看代码

#first {
	border: 1px dashed orange;
	position: relative;    /*相对定位*/
	top: -20px;            /*距离原位置需要上移-20px*/
	left: 20px;            /*距离原位置需要左移20px*/
}
#third {
	border: 1px dashed green;
	position: relative;
	bottom: 10px;          /*距离原位置需要下移20px*/
}

2. 绝对定位

相对于父级元素或浏览器的位置进行指定的偏移，绝对定位不在标准文档流中（等同于浮动），原来的位置不会被保留，绝对定位场景分为3种场景：

1. 父级标签不存在定位元素的前提下，相对于浏览器定位

2. 父级标签存在定位元素时，相对父级元素进行偏移

3. 相对父级元素偏移时，只能够在父级元素范围内移动，元素值超出一定范围也不会生效

position: absolute; 仅声明此元素时，即便不添加偏移距离，由于其浮动效果和原位置不被保留的性质，也会立即令标签产生效果，具体表现为与其他标签重叠

查看代码

#father {
	border: 1px solid #666;
	padding: 0px;
	position: absolute;    /*父级元素的绝对定位*/
}

#second {
	background-color: #255099;
	border: 1px dashed #255066;
	position: absolute;
	right: 30px;    /*相对父级元素的右边框偏移30px*/
}

一般绝对定位都是相对父级元素进行偏移，相对浏览器偏移会使用固定定位

3. 固定定位 fixed

绝对定位在相对浏览器定位的场景下，在网页初始化时定位完成，且后续浏览不再发生改变，具体表现形式是 网页向下拉时，定位元素会随网页一起向上滚动；

固定定位元素始终都会定位在网页的某一个位置，且这个位置会随着滚动浏览不断变化，具体表现形式是 无论怎么操作网页，定位元素始终都在同一位置；

查看代码

div:nth-of-type(1) {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;    /*绝对定位，定位到浏览器的右下角*/
	right: 0px;
	bottom: 0px;
}
div:nth-of-type(2) {
	width: 50px;
	height: 50px;
	background: green;
	position: fixed;    /*固定定位，定位到浏览器的右下角*/
	right: 0px;
	bottom: 0px;
}

4. z-index 层级堆叠和透明

z-index:2; 设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面

查看代码 
.tiptext {
	color: white;
	z-index: 2;    /*位于tipbg上面显示*/
}
.tipbg {
	background-color: black;
	opacity: 0.5;    /*设置背景颜色透明度*/
}

z-index 仅能在定位元素上生效，例如 position: absolute

属性关键词
font-size: 20px;font-weight: bold; 字体大小/字体粗细
border-radius: 10px; 圆角边框10px,配合background-color使用
display: none; 不显示
float: left; 向左浮动
display: block; 显示为块级元素
font: oblique bold 20px/50px Arial; 字体:斜体 加粗 字体大小/行高 字体类型

文本样式
color: rgb(0,255,255);        rgb颜色,此3个数值直接通过计算得出颜色
color: rgba(0,255,255,0.5);    与rgb不同的是添加了一个透明度值
text-align:center;        文本居中,center可替换为 left 或 right
text-indent: 2em;        首行缩进,em 表示字符单位
text-shadow: blue 10px 10px 2px    阴影,阴影颜色\水平偏移\垂直偏移\阴影半径
height: 300px;        配合 background-color 使用,设置一块区域的总行高
line-height: 300px;    设置一行文本的行高,如果 line-height 与 height 相等,则一块文本会被拆分为多行,且每行文本居中
text-decoration: underline;    下划线,值为 line-through 时表示中划线, overline 表示上划线
img {vertical-align: middle;}    图片插入文字的相对居中

超链接的伪类(共4种伪类,常用的是此2种)
a:hover {color: orange;}    鼠标悬浮时变为橙色
a:active {color: green;}    鼠标点击未释放时变为绿色

列表样式
list-style: none;    不显示无序列表前面的点或不显示有序列表的数字

背景图片及渐变应用
background-image: https://www.grabient.com/    渐变借鉴站点
background-image: url("Resource_PATH")    默认以平铺的方式作为背景
background-repeat: repeat-x    水平方向平铺,repeat-x/repeat-y/no-repeat 分别表示水平平铺/垂直平铺/不平铺,默认平铺使用的值是 repeat
background: red 99% 50% url("../html/resources/picture/xia.jpeg") no-repeat;    综合应用,两个百分比表示背景图片位置
border: 1px solid black;    边框粗细/实线/黑色

默认情况下 body 标签下会默认存在一些设置,例如默认存在一个8px的外边距,为了将代码标准化,一开始书写代码时会先对 body 标签将外边距和内边距等设置为0px

posted @   hebo  阅读(94)  评论(0)  编辑  收藏  举报
相关博文：
·  html关键词
·  JS基本语法
·  前端之CSS初识
·  CSS基础
·  CSS定位
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手