HTML+CSS布局

最新推荐文章于 2024-05-17 07:28:12 发布

小脑斧123

最新推荐文章于 2024-05-17 07:28:12 发布

阅读量184

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/106884004

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS页面引入方法

1、外链式：通过link标签，链接外部样式表到页面中（推荐）

2、嵌入式：通过style标签，在网页上创建嵌入样式表（不完全推荐，可以做首页的性能优化）

3、行内样式：通过标签的style属性，在标签上直接写样式（冗余）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<!--插入样式的方式一：外链式-->
	<link rel="stylesheet" type="text/css" href="css/main.css">

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

	</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 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px 'Microsofr Yahei';
line-height 设置文字的行高，如：line-height:24px;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>常用文本样式</title>
	<style type="text/css">
		div{
			font-size: 20px;
			color: green;
			font-family: "Microsofr Yahei";  /*微软雅黑,中文容易失效*/
			font-style: italic;  /*文字倾斜,默认不倾斜normal*/
			line-height: 40px;  /*第二行底部到第一行底部的距离*/
			text-indent: 40px  /*首行缩进*/
		}

		em{
			font-style: normal;  /*em倾斜变不倾斜*/
			color: gold;
			text-decoration: underline;  /*下划线*/
		}

		span{
			color: red;
			font-size: 30px;
		}

		h1{
			font-weight: normal;  /*bold 加粗 normal不加粗*/
		}

		a{	
			font:bold 24px/40px 'Microsofr Yahei';
			text-decoration: none;  /*去掉下划线*/
			/*a标签不可居中，本身就是居中*/
		}

		p{
			text-align: center;  /*水平居中*/
		}

	</style>
</head>
<body>
	<h1>样式演示</h1>
	<div>
		<span>层叠样式表</span>(英文全称：<em>Cascading Style Sheets</em>)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
	</div>

	<p>这是一个p标签</p>
	<a href="www.baidu.com">百度一下</a>

</body>
</html>

小脑斧123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS布局

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化...
复制链接

扫一扫

专栏目录