CSS知识总结与例子-CSDN博客

本文链接：https://blog.csdn.net/z_h1212/article/details/112058655

css是为了弥补HTML不足而产生的的一套扩展样式标准
CSS样式包括三种：选择符{属性：属性值；}
（一）CSS选择器:
（1）标记选择器：有很多标记组成，如图像标记,超链接标记表格标记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 120px;
			}
		</style>
	</head>
	<body>
		<span>我是span111111111111</span>
		<span>我是span222222222222</span>
		<div>我是div111111111111111</div>
		<div>我是div222222222222222</div>
	</body>
</html>

			   （2）类别选择器：只想改变部分标记由用户定义并且由.开头，要用类别选择器的HTML标记，只需要用class属性来声明即可。


```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.readF{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>我是黑色</span>
		<span class="readF">我是红色</span>
		<div>我是黑色</div>
		<div class="readF">我是红色</div>
	</body>
</html>

(3)id选择器：通过HTML的id属性来进行选择HTML页面不能包含两个相同的id所以定义的id选择器只能被使用一次定义的id要以#号开始，感觉这个和属性选择器差不多，多一种选择罢了。
	

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>span1：我是黑色</span>
		<span>span2：我是红色</span>
		<div>div1:我是黑色</div>
		<div id="d1">div2:我是红色</div>
	</body>
</html>

还要补充一下选择器可以有层级关系，这样可以更精确的选择吧，具体如下。


```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div font{
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<font>我想变红</font>
			我想保持黑色
		</div>
		<font>我保持黑</font>
	</body>
</html>


（二）在页面中包含CSS
在页面中包含CSS的几种方式：
（1）行内样式：定义在HTML标记以内，用过style属性来实现，灵活性不强，且CSS和HTML混在一起不利于后期修改。

```html
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<a style="font-size: 7.5rem ;color: red;">冬冬最帅</a>
	</body>
</html>

（2）内嵌式：内嵌式是使用将CSS语句写在head里面，title的下面，其中内嵌式相比行内样式更加容易维护，当然要结合选择器，适合页面中样式的复用。

<!DOCTYPE html>
<html>
	/*适合页面中进行样式复用*/
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				color:red;font-size: 0.625rem;
			}
		</style>
	</head>
	<body>
		<a>冬冬最帅</a>
		<a>冬冬最帅</a>
		<a>冬冬最帅</a>
		<a>冬冬最帅</a>
		<a>冬冬最帅</a>
	</body>
</html>

(3)链接式：最常用的一种引用表方式，将样式定义在一个单独的文件夹中在HTML页面通过进行引用是一种最为有效的CSS样式的方式标记的语法格式如下，适合样式文件的复用link的语法规则如下：

rel:定义外部文档和调用文档之间的关系 href:CSS文档的绝对路径和相对路径 type:外部文件的MIME类型

<!DOCTYPE html>
/*适合样式文件的复用*/
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="demo.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<a>帅冬冬</a>
		<a>帅冬冬</a>
		<a>帅冬冬</a>
		<a>帅冬冬</a>
	</body>
</html>

（三）盒子模型：
（1）border：边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				/*border-top: 0.0625rem solid red;*/
				border: 0.0625rem solid red;
			}
		</style>
	</head>
	<body>
		<div>内容体</div>
	</body>
</html>

（2）内边距：padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 0.0625rem solid red;
				/*padding-top: 0.625rem;
				padding-left: 0.625rem;*/
				padding: 6.25rem;
			}
		</style>
	</head>
	<body>
		<div>内容体</div>
	</body>
</html>

(3)外边距：margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 0.0625rem solid red;
				/*margin-top: 1.25rem;
				margin-left: 0.625rem;*/
				margin: 0.625rem;
			}
		</style>
	</head>
	<body>
		<span>内容体</span>
		<div>内容体</div>
	</body>
</html>

（四）CSS3的新特征
（1）模块与模块化结构
避免某个浏览器对摸个模块完全不支持的现象，比如pc和手机采用不同的支持模块

(五)块级元素和内元素。块元素：以区域块形式出现，每个块标签独自占据一整行或多整行
块结束会自动换行常见的块元素有

<ul等>
行内元素：根据内容多少来占据行内空间不会自动换行常见的元素有：等–
display属性可以使得元素在内元素和块元素之间相互转换
block块元素
inline行元素
none不显示，不占用空间

<!DOCTYPE html>
<!--块级元素和内元素。块元素：以区域块形式出现，每个块标签独自占据一整行或多整行
块结束会自动换行常见的块元素有<h1> <p> <div> <ul等>
行内元素：根据内容多少来占据行内空间不会自动换行常见的元素有：<span> <a>等--
display属性可以使得元素在内元素和块元素之间相互转换
block块元素
inline行元素
none不显示，不占用空间-->

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display: inline;
			}
			span{
				display: block;
			}
			a{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1></h1>
		<div>111</div>
		<div>112221</div>
		
		<span>
			12
		</span>
		<span>123</span>
		
		<a>12</a>
		<a>123</a>
		年后
	</body>
</html>

CSS知识总结与例子

<ul等> 行内元素：根据内容多少来占据行内空间不会自动换行常见的元素有： 等– display属性可以使得元素在内元素和块元素之间相互转换 block块元素 inline行元素 none不显示，不占用空间

<ul等>
行内元素：根据内容多少来占据行内空间不会自动换行常见的元素有：等–
display属性可以使得元素在内元素和块元素之间相互转换
block块元素
inline行元素
none不显示，不占用空间