CSS基础(part1)--引入CSS的方式

学习笔记，仅供参考，有错必纠

文章目录

CSS
- CSS的定义
- 引入CSS的方式
- - 行内样式
  - 嵌入样式
  - 外联CSS样式
  - 导入样式

CSS

CSS的定义

什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

HTML和CSS的关系

HTML为结构层，负责从语义的角度搭建页面结构；

CSS为样式层，负责从审美的角度美化页面；

JavaScript为行为层，负责从交互的角度提升用户体验。

引入CSS的方式

所有的标签都有一个默认样式，我们称为浏览器样式，或者默认样式.

行内样式

知识点回顾：所有的HTML标签都有id, name, style等属性.

行内样式，是通过在标签中设置style属性来达到控制标签样式的效果。例如：

<h1 style="color: red;">我是红色的h1标签</h1>
<!--属性名1:属性值1;属性名2:属性值2;-->

在标签的style属性中，我们可以设置多条的CSS样式：

<h1 style="color: red;font-size:12px;">我是12像素的红色h1标签</h1>

嵌入样式

在head标签中，可以嵌套一个style标签，在style标签中，可以书写CSS的样式内容，style标签有一个属性type属性，默认值就是 text/css，也可以省略。例如：

<style type="text/css"> /*css注释方式*/p { /*对p标签的样式进行设置*/color: green; /*设置前景色，也就字体的颜色*/background-color: silver; /*设置背景色，也就字体的颜色*/}ul {background-color: red;}</style>

外联CSS样式

我们可以通过link标签引入外部的CSS样式文件，比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><link rel="stylesheet" href="CssFile/main.css"><!--rel：是指当前HTML文件与CSS文件的关系href：是指外联样式表的路径--><!--stylesheet表示当前页面的样式表--><!--href属性指向的路径为我们的css样式文件的地址,它是相对地址-->
</head>
<body><ul><li><a href="#">小黄</a></li><li><a href="#">大白</a></li><li><a href="#">小黑</a></li></ul>
</body>
</html>

CSS样式文件main.css：

a {color: yellow;
}

页面：

导入样式

@import导入样式会导致css文件不能并行下载，所以，我们并不推荐这种导入方式。

注意，导入样式的书写必须在所有的css规则书写之前。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习</title><style>/*将某一个CSS文件的样式直接导入到当前的位置*//*导入样式必须写在所有的其他样式设置之前*/@import url(CssFile/main.css);p {color: green; /*设置前景色，也就字体的颜色为绿色*/background-color: red;/*设置背景色为红色*/}</style>
</head>
<body><p>我是一个Bunny列表</p><ul><li><a href="#">小黄</a></li><li><a href="#">大白</a></li><li><a href="#">小黑</a></li></ul>
</body>
</html>

页面：

现在，我们创建b.css样式文件：

a {background-color: blue;
}

并在main.css中导入b.css：

@import url(b.css);
a {color: yellow;
}

现在，我们再看一下我们的页面：