CSS|01 CSS简介CSS的3种书写方式注释

CSS简介

什么是CSS

CSS（Cascading Style Sheet），层叠样式表 或者 级联样式表，简称样式表。

CSS的作用

主要用来给 HTML网页 设置外观或者样式。

CSS的语法规则

h1 {属性:属性值}注意：1. CSS代码是由选择器和一对括号组成2. 大括号里面是由一条一条的声明语句组成3. 每一条语句都要使用英文状态下面的分号4. 每一条语句是由 属性:'属性值' 组成5. CSS中的属性值一般不加引号6. 在CSS中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般都是px（像素）7. 在CSS中不能出现HTML标签

快速入门

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">/*在这里书写CSS代码CSS代码：选择器：{语句1;语句2;};*/p{color: #FF0000; /*给文本设置颜色为#FF0000*/font-size: 18px; /*设置字体为100像素*/}</style></head>
<body><font color="red" size='7'>《红楼梦》</font><p>《红楼梦》，中国古代章回体长篇小说，中国古典四大名著之首。其通行本共120回，一般认为前80回是清代作家曹雪芹所著，后40回作者为无名氏，由高鹗、程伟元整理。小说以贾、史、王、薛四大家族的兴衰为背景，以大荒山青埂峰下顽石幻化的通灵宝玉为视角，以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线，描绘了一些闺阁佳人的人生百态，展现了真正的人性美和悲剧美，是一部从各个角度展现中国清代社会百态的史诗性著作。</p>
</body>
</html>

CSS代码的书写方式

什么是书写方式？

CSS代码应该写在什么地方！
书写方式分为三种：嵌入式、外链式、行内式

嵌入式（一般放在头部标签中）

将CSS代码嵌入到HTML中，嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中
语法规则：<style type="text/css">选择器{属性:值;属性:值;}</style>
如果我们使用的是HTML5的文档，type属性可以省略不写！

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>嵌入式</title><style type="text/css">/*嵌入式*//*选择器{属性：值}*/div{width: 100px;height: 100px;background-color: #FF0000;}</style>
</head>
<body><!--要使用CSS代码给div设置宽度100像素以及背景颜色为红色把div理解为一个存放东西的盒子 --><div></div>
</body>
</html>

外链式

外链式是以.css为扩展名的文件，然后再head标签中使用<link />标签，将这个css文件链接到html文件中。
注意：css文件不能单独运行，它必须依赖html文件！
语法格式<link rel="stylesheet" href="./css/index.css">一定确保css文件已经被正确引入成功！
检查是否正确引入css文件：1.当前页面，右击“检查”2.找到“网络”选项卡3.刷新当前网页4.查看网络选项卡中的status状态，如果是成功的，就表示文件已经被加载；如果是失败的，就表示文件没有被加载，需要检查文件路径。5.见图1可以同时引入多个css文件比如：<link rel="stylesheet" href="../css/index.css"><link rel="stylesheet" href="../css/public.css">

当前路径下须有对应的.css文件
在这里插入图片描述
public.css

body{background-color: #00f; /* f00  等价于 FF0000   蓝色*/
}

index.css

/*在index.css文件中书写CSS代码这个文件里面只能书写CSS代码选择器{属性:值;}
*/
div{width: 100px;height: 100px;background-color: #f00; /* f00  等价于 FF0000  红色*/
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>外链式</title><!-- 将单独的css文件链接到当前的html文件中 --><link rel="stylesheet" href="../css/index.css"><link rel="stylesheet" href="../css/public.css">
</head>
<body><div></div>
</body>
</html>

行内式

什么是行内式？将CSS代码书写在HTML标签的style属性中。style是一个通用属性，每一个标签里面都拥有这个属性！
语法格式：<标签名 style="属性:值"></标签名>
比如：<div style="width: 100px; height: 100px; background-color: #f00;"></div>

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><!-- 将DIV设置为宽度100px，高度100px，背景颜色为红色使用行内式的方式来设置 --><div style="width: 100px; height: 100px; background-color: #f00;"></div>
</body>
</html>

总结

1.使用嵌入式的方式来书写CSS代码，它只能作用于当前的HTML文件
2.使用外链式的方式来书写CSS代码，它可以作用于多个HTML文件

注释

格式

/* 注释的内容 */
千万不要在html中使用html注释

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>注释</title><style type="text/css">/*使用嵌入式来设置样式给div设置宽度100px 高度100px 背景颜色为红色选择器{属性:值;}*/div{width: 100px;height: 100px;background-color: #f00; /* 设置背景颜色为红色 */}</style>
</head>
<body><div></div>
</body>
</html>