CSS基础篇一

最新推荐文章于 2023-06-04 10:30:00 发布

weixin_45846263

最新推荐文章于 2023-06-04 10:30:00 发布

阅读量124

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45846263/article/details/103021773

版权

本文是CSS基础篇，介绍了CSS的概念、使用方法，包括内联样式、内部样式和外部样式表。详细讲解了CSS的基础选择器、尺寸属性、盒子模型，以及margin:0 auto的使用条件和vertical-align属性的应用。

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

CSS基础篇一

一、什么是CSS

CSS ：
层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系：
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性

二、CSS的使用

1.内联样式（行内样式）
将样式声明在元素的style属性中
语法：
<p style=“color: red;”></p>
注意：所有的样式都必须在双引号之内并且中间用分号进行分隔
代码：

<p style="color: green;font-family: 华文彩云;font-size: 80px;">你好</p>

2.内部样式
将样式声明定义在页面的Style属性中
步骤：
1.在head标签里面添加一个style标签
2.在style中书写样式
语法：
<style type=“text/css”>
p{
/字体的颜色/
color: green;
/字体的大小/
font-size: 80px;
/文字的字体样式/
font-family: “华文彩云”;
}
</style>

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			p{
    
					/*字体的颜色*/
					color: green;
					/*字体的大小*/
					font-size: 80px;
					/*文字的字体样式*/
					font-family: "华文彩云";
				}
		</style>
	</head>
	<body>
		<p>你好</p>	
	</body>
</html>

效果：
在这里插入图片描述
3.外部样式表
步骤：
创建一个新的CSS文件
创建和HTML文件的关联
书写样式
<link href=“css/style01.css” type=“text/css” rel=“stylesheet”/>

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset

最低0.47元/天解锁文章

weixin_45846263

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫