《HTML+CSS+JavaScript》之第11章 CSS简介_html+css+js第十一章-CSDN博客

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125608784

《HTML+CSS+JavaScript》之第11章 CSS简介

11.1 CSS简介

11.1.1 CSS是什么

Cascading Style Sheet，层叠样式表，控制网页外观。

11.1.2 CSS和CSS3

CSS1.0、CSS2.0、CSS2.1、CSS3.0。
这里CSS指CSS2.1。

11.2 引入方式

11.2.1 外部样式表

HTML文件中使用link标签引用CSS文件。

link标签放在head标签内。

<link rel="stylesheet" type="text/css" href="css文件"/>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>

11.2.2 内部样式表

CSS代码放在style标签内，style标签放在head标签内。

<style type="text/css">
	......
</style>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
</body>
</html>

11.2.3 行内样式表

CSS在标签的style属性中定义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>