CSS入门

最新推荐文章于 2024-07-12 20:49:16 发布

ff张岩

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量109

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_52750693/article/details/129734693

版权

引入

前面简单的学习了HTML，了解了HTML中的常用标签，但是我们写的网页十分简单，并且没有修饰，说白了就是丑。接下来我们学习样式表语言，通过CSS对我们的网页进行修饰。这里我们仅仅只是初步了解，不是Java前端人员的全部CSS知识

一、CSS概述

CSS是Cascading Style Sheets（级联样式表语言）。
CSS是一种样式表语言，用于为Html文档控制外观，定义布局。例如CSS涉及字体，颜色，边距，高度，宽度，背景图像，高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在Html文档中，而用于定义表现形式的CSS在一个.css文件或者Html文档的一部分。

二、基本语法

这里先插一句，如果光使用上节课的HTML语言，用HTML中的标签修饰一句话，可能会出现这种情况：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			<big>
				<font color="red">
					<i>
						<b>
							高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。
						</b>
					</i>
				</font>
			</big>
		</p>
	</body>
</html>

以后是不是随便写几分钟就近百行代码了，不知是好是坏
在这里插入图片描述
为了改变这种窘境，CSS出现了，下面便是解决办法

2.1行内样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			行内样式表，一般开发用的较少，虽然减少了标签的使用，但是如果有两句话
			要修饰的格式一模一样，那还的在来一遍style="...."	
		 -->
		<p style="color: red;font-size: 20px;font-weight: 800;">
			高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。
		</p>
	</body>
</html>

行内样式表虽然减少了标签的使用，但是仍有代码赘余，下面内嵌样式表便可以解决

2.2内嵌样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: red;
				font-size: 20px;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<p>
			高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。
		</p>
		<p>
			高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。
		</p>
	</body>
</html>

内嵌样式表虽然避免了行内样式表代码赘余，但是在代码量过大的情况下，甚至不知道刚写的代码在哪，所以外部样式表直接将CSS代码与HTML代码分离，使得代码结构更加条理清晰。

2.3外部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/CSS.css"/>
	</head>
	<body>
		<p>
			高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。
		</p>
		<p>
			高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想，弘扬伟大建党精神，自信自强、守正创新，踔厉奋发、勇毅前行，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。
		</p>
	</body>
</html>

三、选择器

3.1标签选择器

通过标签名进行修饰
语法：

标签名{
	
}

3.2类选择器

在需要修饰的标签加入class=‘xx’,类选择器会将类名匹配的标签进行修饰
语法:

.类名{}

3.3id选择器

在需要修饰的标签加入id=‘xx’,类选择器会将id匹配的标签进行修饰
语法：

#id名{}

3.4选择器组合

通过选择器分组可以同时选择多个选择器对应的标签
语法：

选择器1，选择器2，选择器N{}

3.5通配选择器

可以用来选中页面中的所有标签
语法

*{}

注意：选择器有优先级，目前来说：id选择器>类选择器>标签，要深入了解参考选择器权重

四、文本，背景，列表，伪类，透明

4.1文本

color:字体颜色
font-size:字体大小
font-family:字体
text-align:文本对齐
text-decoration:line-through:定义穿过文本的一条线
text-decoration:underline:定义文本下的一条线
text-decoration:none:定义标准的文本
font-style:italic:斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing:可以指定字符间距
text-indent:用来设置首航缩进

参考代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				color: #0000FF;
				font-size: 20px;
				font-weight: 900;
				font-family: 隶书;
				/* 这里如果设置的字体不管用，要么你写的根本没有，要么电脑的
					字体库里没有这个字体这是win10的字体库路径：C:\Windows\Fonts
				text-align: center;
				text-decoration: underline;文本修饰-下划线
				text-decoration: line-through;文本修饰-删除线 
				font-style: italic;斜体
				line-height: 50px;行高
				letter-spacing: 20px;文字间距
				*/
			   text-indent: 2em;/*首行缩进，表示缩进两个字符em表示1个字符大小*/
			   
			}
		</style>
	</head>
	<body>
		<p class="p1">
			高举中国特色社会主义伟大旗帜，全面贯彻新时代中国特色社会主义思想
		</p>
	</body>
</html>

4.2背景

background-color:背景颜色
background-image：背景图片
background-repeat：背景重复
background-size：背景尺寸
background-position：背景位置

参考代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			.p1{
				width: 400px;
				height: 400px;
				/* 设置背景颜色先设置width和height，不设置默认width和body
					一样长，高为零，所以无法显示颜色，*/
				background-color: #FF0000;
				/*照片大小120*120，通过重复填充，将400*400的面积全部覆盖
					并且将背景颜色全部覆盖*/
				background-image: url(img/什么鬼.jpg);
				/* 背景图片不重复 */
				background-repeat: no-repeat;
				/* 设置背景图片位置 */
				background-position: right bottom;
				/* 设置图片大小 */
				background-size: 200px 200px;/*宽 高*/
			}
			
		</style>
	</head>
	<body>
		<p class="p1">
			
		</p>
	</body>
</html>

4.3列表

CSS列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

list-style-image:将图像设置为列表项标志
list-style-position:设置列表中列表项的位置
list-style-type:设置类表项标志的类型
list-style:简写属性

4.4伪类

CSS伪类专门用来表示标签的一种特殊状态，当我们需要为处在这种特殊状态的标签设置样式时，就可以使用伪类。
伪类的语法：

:hover:伪类表示鼠标移入的状态
:active:表示被点击时的的状态
:focus:向拥有键盘输入焦点的标签添加样式

4.5透明

定义透明效果的属性是opacity
opacity属性设置标签的不透明级别值为1
规定不透明度从0.0 ( 完全透明 ) 到1.0 ( 完全不透明 )

五、块级，行级，行级块标签，display标签

5.1什么是块级标签？

块级标签：无论内容多少，都会独自占据一行的。
默认的宽与浏览器一致/或者与父标签一致
默认的高，如果没有内容，高度是零，有内容，与内容高度一致
块标签可以设置宽与高
块级标签主要用来不知网页
例如：<h1>,<p>,<ul>,<ol>

5.2什么是行级标签？

行级标签：只占据自身大小的标签，不会独占一行。
不能设置宽和高，设置了也是无效的
主要用来包裹(选中)的文字内容，对文字内容进行修饰
例如<font>,<b>,<i>,<a>等。

5.3什么是行级块标签？

可以设置宽高，不占据一行
例如：<input>,<img>等
注意：一般使用块级标签包含行级标签，不使用行级标签包含块标签。a可以包括任何标签，出去a本身。

不可以包含任何的块标签。

5.4Display

通过Display样式可以修改标签的类型。
可选值：
block:设置标签为块标签
inline:设置标签为行标签
inline-block:设置行级块标签
none:隐藏标签

六、div和span

6.1div标签

div是块级标签，可以放置任何标签
div没有任何附加功能，给什么属性就能变成什么样
div的主要功能是被用来布置网页。
span标签

6.2span是行级标签

span没有任何附加功能，给了什么属性就变成什么样
span标签被用来选中文档中的文字
h1,p…这些标签都有一些默认的样式，会影响到网页布局，div，是一个块标签，可以包含任何标签。没有任何附加功能，设置什么属性，就变成什么样子

七、盒子模型，内边距，边框，外边距

7.1盒子模型-内容区

内容区指的是盒子放置内容的区域，与就是标签中的文本内容，子标签都是存在于内容区中的
如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的
通过width和height两个属性设置内容区的大小而不是整个盒子的大小。
width和height属性只适用于块标签(包括行级块)

7.2盒子模型-内边距

内边距指定是标签内容区到边框的距离
内边距会影响整个盒子的大小
使用padding属性来设置标签的内边距。
例如：
padding-left：10px;
padding-right:10px;
padding:10px 20px;
这样上下内边距10px，左右内边距为20px
padding:10px 20px 30px 40px;
这样会设置标签的上，右，下，左四个方向的内边距。

7.3盒子模型-边框

可以在标签周围创建边框，边框是标签可见框的最外部
可以用border属性来设置盒子的边框
border:1px red solid;
上面分辨设置了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框
边框可以设置样式:
dotted(点线)dashed(虚线)solid(实线)double(双线)groove(槽线)
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
如果要设计的一个标签既有内边距也有边框大小，在不改变标签整个大小的前提下，必须用标签的大小减去内边距和边框，不然最后标签的大小为内容区+内边距+边框

7.4盒子模型-外边距

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距。用法与padding类似，同样也提供了四个方向。
外边距不会影响盒子的整体大小，但会影响盒子的位置，会影响盒子实际控制范围。
外边距不会叠加，你距我5m，我距你5m，我么距离5m

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				background-color: #008000;
				width: 176px;
				height: 176px;
				padding: 10px;
				border: 2px solid #FF0000;
				border-radius: 10px;
			}
			#box2{
				margin-top: 10px;
				/* auto默认最大值处理 */
				/* top和buttom不能设置auto，设置了也是0 */
				margin-left: auto;
				margin-right: auto;
				background-color: #008000;
				width: 176px;
				height: 176px;
				padding: 10px;
				border: 2px solid #FF0000;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			div
		</div>
		<div id="box2">
			div
		</div>
	</body>
</html>

八、文档流，浮动，定位

8.1文档流

文档流指的是文档中的标签在排列时所占用的位置。将窗体自上而下分成一行行，并在每行中按从左往右的顺序片列标签，即为文档流。
也就是说在文档流中标签默认会紧贴上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
这样以来每一个块便签都会另起一行，那么我们想在文档流中进行布局就会变得非常麻烦。

8.2浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
- 浮动使用float属性
- 可选值：
  - none：不浮动，在默认情况下就是none
  - left：向左浮动
  - right：向右浮动
块级标签和行级标签都可以浮动，当一个行级标签浮动以后会自动变为一个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以漂浮一个块级标签的时候，我们都会指定一个宽度。
当一个标签浮动以后，其下方的标签会上移。
浮动会使标签完全脱离文档流，也就是不再在文档中再占有位置，标签浮动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动的标签不会撑开父标签。

如何解决上述第四种情况，这时候需要清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响，其他标签的位置不发生变化。
可选值：left忽略左浮动，right忽略右浮动，both：忽略全部浮动
以后在写网页时，在一组浮动的盒子后一定要加，
一个浅显易懂的例子，可以将文档流的盒子视为大楼的第一层，而开启浮动的盒子依次在二层，三层 …，这就解释了为什么第三点，因为盒子飞往第二层了，第一层便没有了标签，根据文档流自上而下的顺序，文档流的标签会上移；再看第四点如何理解，因为浮动的盒子已经不在第一层了，所以它理当不占据一楼的空间，换言之，一楼啥也没有，高度必然为0。

一段导航栏代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.menu{
				width: 520px;
				margin: auto;
				/* height: 41px;此为清除浮动的第一种方式
					但是，假若在menu_box属性上下内边距变为
					15px的情况下，还要继续修改，十分麻烦*/
			}
			.menu_box{
				float: left;
				background-color: bisque;
				/*width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				这种写法十分麻烦*/
				padding: 10px 20px;
				/* 但是牵扯到内边距的时候要进行计算 */
				/* margin: auto;给浮动的盒子外边距设置auto没用 */
			}
			.menu_box:hover{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- 给浮动的标签外面添加一个div，此div没有浮动
			仍然在原始的文档流中(二维平面)
			
			浮动的问题：
				浮动后的标签，是不占据原来的文档流空间
				没有父标签撑开，称为高度塌陷
				会影响到后面标签的布局。
				解决办法：1.为父类标签设置高度(要和子类标签盒子匹配)
						2.清除浮动影响：<div style="clear: left;"></div>
							清除浮动后，会将父类标签自动撑开
		 -->
		<div class="menu">
			<div class="menu_box">目录目录</div>
			<div class="menu_box">目录目录</div>
			<div class="menu_box">目录目录</div>
			<div class="menu_box">目录目录</div>
			<div class="menu_box">目录目录</div>
			<!-- <div style="clear: left;"></div>此为解决浮动高度为0的第二种方式 -->
			<!-- 不管下面有没有盒子，都加上清楚浮动 -->
		</div>
	</body>
</html>

8.3定位

上面讲述了浮动为什么还要讲述定位？
浮动只能左浮动，右浮动，较为单一，而定位可以保证我们的标签出现在网页的任意位置。
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

8.3.1相对定位

相对定位是一个非常容易掌握的概念，相对他的起点进行移动，移动后原来的位置还被占用。可以通过position:relative;开启相对定位，left,right,top,bottom四个属性来设置标签的偏移量。
相对定位的特点：

当开启了标签的相对定位以后，而不设置偏移量，标签不会发生任何变化。
相对定位是相对于标签在文档流中原来的位置进行定位
相对定位的标签不会脱离文档流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				/* 开启相对定位，相对自己移动，如果不设置偏移，标签不会移动 */
				position: relative;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: slateblue;
			}
		</style>
	</head>
	<body>
		<!-- 
			定位就是让标签出现在我们想让它出现的位置，
			要定位，就得有参照物
			参照物可以是自己本身的位置，也可以是父标签，也可以是浏览器窗口
		 -->
		 <!-- 
			开启定位，告诉是相对定位还是绝对定位
			相对定位：以自己原来的位置进行移动，
				移动后，没有脱离文档流原来的位置仍然被占用
			-->
		 <div id="box1"></div>
		 <div id="box2"></div>
	</body>
</html>

8.3.2绝对定位

绝对定位是不占据空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会与其他标签重叠。可以通过position:absolute;开启绝对定位，left right top bottom四个属性来设置标签的偏移量。
绝对定位的特点

开启绝对定位后，会使标签脱离文档流
开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生改变。
绝对定位时相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）
绝对定位会使标签提升一个层级
绝对定位会改变标签的性质，行级标签变成块标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				/* 开启绝对定位， */
				position: absolute;
				left: 200px;
				top: 200px;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: slateblue;
			}
			#box3{
				width: 400px;
				height: 400px;
				background-color: darkblue;
				position: relative;
				/* 如果这里没有开启相对定位,box2不会和box3的右下角接壤*/
			}
		</style>
	</head>
	<body>
		<!-- 
			绝对定位：
				开启了标签的绝对定位，标签就回漂浮起来(脱离原来的文档流)
				绝对定位是相对于，离他最近的，开启了定位的父标签，以及
				浏览器窗口进行定位(不建议使用)
					所以，一般开启一个标签的绝对定位，都会为其父标签开启
					相对定位
		 -->
		 <div id="box3">
			 div3
		 	<div id="box1">div1</div>
		 </div>
		 <div id="box2">div2</div>
	</body>
</html>

绝对定位案例1：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				width: 590px;
				position: absolute;
				/* 再来个页面居中,刚才这里是relative，但是伪类居中只能改为absolute，body
				 修改为相对定位*/
				left: 50%;
				top: 50%;
				margin-left: -295px;
				margin-top: -235px;
			}
			.left,.right{
				opacity: 0.2;
				background-color: black;
				color: white;
				width: 30px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				position: absolute;
			}
			.left{
				border-radius: 0px 20px 20px 0px;
				left: 0px;
				top: 215px;
			}
			.right{
				border-radius: 20px 0px 0px 20px;
				right: 0px;
				top: 215px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<img src="../img/q.jpg" >
			<div class="left"><</div>
			<div class="right">></div>
		</div>
	</body>
</html>

ff张岩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门

CSS是Cascading Style Sheets（级联样式表语言）。CSS是一种样式表语言，用于为Html文档控制外观，定义布局。例如CSS涉及字体，颜色，边距，高度，宽度，背景图像，高级定位等方面。可将页面的内容与表现形式分离，页面内容存放在Html文档中，而用于定义表现形式的CSS在一个.css文件或者Html文档的一部分。块级标签：无论内容多少，都会独自占据一行的。默认的宽与浏览器一致/或者与父标签一致默认的高，如果没有内容，高度是零，有内容，与内容高度一致。
复制链接

扫一扫