前端学习之CSS（01）概述及添加方式

最新推荐文章于 2022-12-03 11:30:03 发布

Duing_

最新推荐文章于 2022-12-03 11:30:03 发布

阅读量437

点赞数 1

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

本文链接：https://blog.csdn.net/J_Du_pro/article/details/105799714

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS概述及添加方法

一、CSS样式

HTML标签属性——网页的内容和样式

HTML：网页的内容
CSS：内容的样式

内容和样式相分离，便于修改样式，而不会影响内容的部分。
样例
仔细看这两张图片，他们的风格和样式是截然不同的，但是你仔细观察他们的内容，会发现他们有着相同的结构和内容，因为他们有着相同的HTML部分和不同的CSS部分。

二、CSS简单案例

案例
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>天使投资指早期投资，尤其指个人早期投资。</p>
		<p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p>
		<p>PE, Private Equity,所谓私募资本、非公开市场资本，既是私募股权投资的统称，又特指相对靠后的股权投资。</p>
	</body>
</html>

效果：
加了CSS后：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p{
	   font-size:12px;    /*字号*/
	   color:blue;        /*文字颜色*/
	   font-weight:bold;  /*加粗*/
	}
	</style>
</head>
<body>
	<p>天使投资指早期投资，尤其指个人早期投资。</p>
	<p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p>
	<p>PE, Private Equity,所谓私募资本、非公开市场资本，既是私募股权投资的统称，又特指相对靠后的股权投资。</p>
</body>
</html>

效果：

三、CSS添加方法

（一）行内样式
将属性及属性的取值设定直接添加到需要添加样式的元素的标签内部。
代码：

<p style="color: red;">
	天使投资指早期投资，尤其指个人早期投资。
</p>

效果：
（二）内嵌样式
将CSS代码内嵌到当前页面的head标签部分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>天使投资指早期投资，尤其指个人早期投资。</p>
	</body>
</html>

解释：

用一对style标签表示，type="text/css"表示当前的样式是以CSS文本来规定的。
当前样式只对当前页面有效。

效果：
内嵌样式的注意：

即使有公共CSS代码，也是每个页面都要定义的。
适合文件很少，CSS代码也不多的情况。
如果一个网站有很多页面，每个文件都会变大，后期维护难度也大。

（三）文件、链接样式
案例：
文件布局：
html01中代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<p>天使投资指早期投资，尤其指个人早期投资。</p>
	</body>
</html>

html02中代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<p>VC，Venture Capital，所谓风险投资、创业投资，是相对靠前的非公开市场股权投资。</p>
		<p>PE, Private Equity,所谓私募资本、非公开市场资本，既是私募股权投资的统称，又特指相对靠后的股权投资。</p>
	</body>
</html>