CSS--网页样式布局(一)

最新推荐文章于 2024-08-09 16:30:00 发布

CS_GaoMing

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量752

点赞数

分类专栏： HTML 文章标签： CSS样式 CSS网页布局

本文链接：https://blog.csdn.net/CS_GaoMing/article/details/88623801

版权

本文介绍了CSS的基本概念，包括三种使用方式、文本属性设置、颜色表示、选择器的使用。详细阐述了块元素、内联元素、内联块元素的特性和转换，并探讨了浮动、盒子模型以及清除浮动的方法。通过实例展示了CSS在网页样式布局中的应用。

摘要由CSDN通过智能技术生成

CSS层叠样式表

一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。

三种使用方式：

外联式
内嵌式

行内式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 第一种插入样式的方式 外链式：css文件目录为同级目录文件夹css下.  -->
	<link rel="stylesheet" type="text/css" href="css/main.css">

	<!-- 第二种插入样式的方式 内嵌式  -->
	<style type="text/css">		
	h1{
      
		font-size:20px;
		color:gold;
	}

</style>

</head>
<body>

	<h1>页面标题</h1>
	<div>这是一个div标签</div>

	<!-- 第三种插入样式的方式 行内样式   -->
	<a href="http://www.itcast.cn" style="font-size:20px;color:pink">百度</a>
</body>
</html>

CSS文本属性设置

常用的应用文本的css样式：
- color 设置文字的颜色，如:color:red;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:'微软雅黑';.
- font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:'italic';设置文字倾斜.
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal; 设置不加粗.
- line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px; 行高示例图片.
- font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px; ‘微软雅黑’;
- text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉.
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 行高示例图片.
- text-align 设置文字水平对齐方式，如text-align:center; 设置文字水平居中.

文本属性设置实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用文本样式</title>
	<style type="text/css">
	div{
      
		
		color:green;

			/* font-size:20px;
			font-family:'Microsoft Yahei';	
			line-height:40px; */

			font:normal 20px/40px 'Microsoft Yahei';

			/* text-decoration:underline; */

			text-indent:40px;


		}
		em{
      
			font-style:normal;
			color:gold;
		}
		span{
      
			color:red;
			font-size:30px;
		}
		h1{
      
			font-weight:normal;
		}
		a{
      
			text-decoration:none;
			text-align:center;
		}

		p{
      
			text-align:center;
		}

	</style>
</head>
<body>
	<h1>样式演示</h1>
	<div>
		<span>中国近代史</span>，<em>中国</em>的历史发展也不像西方一样在进入某一个时代后自身发生显著的变化，因此中国近代史在时间的划分上有多种说法。然而此种观点并不确切，至少自先秦时期，中国就存在进步史观，例如战国时期便有上古、中古、近古、当世等划分，并有关于不同时代演化的论说；另一方面，中国自封建社会解体由秦汉入大一统皇朝时代起，政治上进入了王朝循环，没有革命性的变化，而就全球各地而言，今人所谓之近代的历史大变化也都是最近数百年的事情。
	</div>

	<p>这是一个下一个段落标签！！</p>

	<a href="http://www.baidu.com">百度一下</a>


</body>
</html>

预览效果

CSS的颜色表示

css颜色值主要有三种表示方法：

颜色名表示，比如：red 红色，gold 金色…
rgb表示，比如：rgb(255,0,0)表示红色.
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00.

颜色设置实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	div{
      
		font-size:30px;
		/* color:rgb(0,0,0); */
		color:#ffff00;
	}
</style>
</head>
<body>
	<div>这是一个测试！</div>
</body>
</html>

CSS选择器

标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。举例：
```
*{
	margin:0;
	padding:0
}
div{
	color:red;
}
```
id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
```
#div11{
	color:red;
}
<div id="div11">id选择器的使用方式.</div>
```

类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

#div11{
	color:green;
}
.red{
	color:red;
}
.big{
	font-size:20px;
}
.mt10{
	margin-top:10px
} 

<div id="div11" class="red">类选择器的使用,id优先级高，使用id的属性.</div>
<h1 class="red big mt10">类选择器的使用.</h1>
<p class="red mt10">类选择器的使用</p>

层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

.box span{
	color:red
}
.box .red{
	color:pink
}
.red{
	color:red
}

<div class="box">
    <span>这个会被span属性修饰.</span>
    <a href="#" class="red">这个会被red类属性修饰.</a>
</div>

组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

<!-- 设置的公共环境. -->
.box1,.box2,.box3{
	width:100px;
	height:100px;
}
.box1{
	background:red;
}
.box2{
	background:pink;
}
.box2{
	background:gold;
}

<div class="box1">使用box1修饰属性.</div>
<div class="box2">使用box2修饰属性.</div>
<div class="box3">使用box3修饰属性.</div>

伪类及伪元素选择器

实现悬浮想要悬浮的内容，内容悬浮后无法被选中，无法被复制。

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

<!-- content的内容会悬浮，不会被选中的效果. -->
.box1:hover{
	color:red；
}
.box2:before{
	content:'行首文字';
}
.box3:after{
	content:'行尾文字';
}
<div class="box1">正文内容！</div>
<div class="box2">正文内容！</div>
<div class="box3">正文内容！</div>