我要学前端 - -＞＞css的引入

最新推荐文章于 2023-12-07 09:20:00 发布

码农一号已就位

最新推荐文章于 2023-12-07 09:20:00 发布

阅读量142

点赞数

分类专栏： HTML css 文章标签： css html

本文链接：https://blog.csdn.net/xdc1812547560/article/details/108969952

版权

HTML 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

文章目录

什么是css

CSS是指层叠样式表(CascadingStyleSheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css有什么用

在这里插入图片描述

css常用样式

常用文本样式：
color文字颜色
font-size设置文字大小
font-family微软雅黑
font-style是否倾斜
italic-倾斜
normal-正常(通常用来去倾斜)
font-weight是否加粗
bold-加粗
normal-正常
line-height行高第二行底部到第一行底部的高度

颜色表示法：
1.颜色名表示-例如:red
2.rgb表示-例如：rgb(255,0,0)表示红色
3.16进制数值表示比如：#ff0000表示红色

引入css

外联式

新建css为尾缀的文件，且在文件当中写css样式
2.在<head>标签中

<head>
	<metacharset="UTF-8">
	<title>html之css</title>
	<link rel="stylesheet" href="文件相对路径">
</head>

例如：

<!DOCTYPE html>
<html>
<head>
	<title>css引入</title>
	<link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
	<h3>hello</h3>
	<div>world</div>
</body>
</html>

div{
	color: blue;
}

在这里插入图片描述

嵌入式

<head>
	<meta charset="UTF-8">
	<title>css的引入</title>
	<style type="text/css">
		h1{
			font-size:20px;
			cloor:blue;
			}
		</style>
</head>

例如：

<!DOCTYPE html>
<html>
<head>
	<title>css引入</title>
	<style type="text/css">
		h3{
			color: blue
		}
	</style>
</head>
<body>
	<h3>hello</h3>
	<div>world</div>
</body>
</html>

在这里插入图片描述

行内样式

<body>
	<a href="http://www.baidu.com" style="font-size:20px;color:red;">百度</a>
</body>

注：实际开发中主要使用外联式，不推荐使用行内样式。

例如：

<!DOCTYPE html>
<html>
<head>
	<title>css引入</title>
	
</head>
<body>
	<h3>hello</h3>
	<div>world</div>
	<a href="http://www.baidu.com" style="font-size: 20px;color: red;">百度</a>
</body>
</html>

在这里插入图片描述

码农一号已就位

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我要学前端 - -＞＞css的引入

文章目录什么是csscss有什么用css常用样式引入css外联式嵌入式行内样式什么是cssCSS是指层叠样式表(CascadingStyleSheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。css有什么用css常用样式常用文本样式：color文字颜色font-size设置文字大小font-family微软雅黑font-style是否倾斜italic-倾斜normal-正常(通常用来去倾斜
复制链接

扫一扫