CSS_1th_CSS基础样式

最新推荐文章于 2023-12-29 12:43:57 发布

weqpo

最新推荐文章于 2023-12-29 12:43:57 发布

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： html css 基础样式

本文链接：https://blog.csdn.net/weqpo/article/details/63253690

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、CSS
1、Cascade Style Sheet层叠样式表
用来装饰HTML/XML的标记集合

2、特点
1）样式表由样式规则组成，以告诉浏览器如何显示一个文档。
2）每个规则的组成包括一个选择符（通常是一个HTML的元素）和该选择符所接受的样式。
3）每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现。
4）总结：CSS是用来装修标签的。

3、例子
1）例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			h1{ font-size: 16px; color: red; }
			h2{ font-size: 10px; color: green; }
		</style>
	</head>
	<body>
		<h1>Hello</h1>
		<h2>World</h2>
	</body>
</html>

总结：
①font-size（字体大小）和color（字体颜色）是CSS中的两个属性，属性与属性之间用分号隔开，属性与属性值之间用冒号隔开。
②style标签写在head中，这是CSS内部样式的用法。

2）例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 style="font-size: 20px; color: blue;">Hello</h1>
		<h2 style="font-size: 10px; background: yellow; font-family: courier;">World</h2>
	</body>
</html>

总结：
①style可以写在标签内，这是行内样式。
②background:用于设置标签的背景颜色，font-family表示字体类型,如宋体、courier new等。
③font-style表示字体风格，如italic、oblique等。

3）例3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/03.css"/>
	</head>
	<body>
		<h1>Hello</h1>
		<h2>World</h2>
	</body>
</html>

03.css文件：

h1{ font-size: 16px; color: red; }
h2{ font-size: 10px; color: green; }

总结：
这是外部样式的用法。
①使用link来引入一个外部样式表。
②rel="stylesheet"表示引入的是一个样式表。
③type="text/css"表示是一个css文件，href表示该文件的位置。

二、CSS优先级问题
按照最靠近元素的定义来显示
1）例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/03.css"/>
	</head>
	<body>
		<h1 style="font-size: 20px; color: blue;">Hello</h1>
		<h2 style="font-size: 10px; background: yellow; font-family: courier;">World</h2>
		<h1>Hello2</h1>
	</body>
</html>

总结：
①Hello和World的样式由行内样式决定，Hello2由于没有行内样式，因此由link引入的外部样式来决定。