前戏

之前学习了HTML相关的知识，也能简单的写一个hello world的页面。但是，只学HTML满足不了我们的需求，而HTML、CSS、JavaScript三者搭配使用才能更好的完成我们需要的效果，那他们之间的关系是什么呢？

HTML是网页内容的载体

CSS样式是外观控制

JavaScript是行为，用来实现网页特效效果

什么是CSS呢

CSS层叠样式表（Cascading Style Sheets）用于定义HTML内容在浏览器内的显示样式

为什么要学习CSS

CSS简化HTML相关标签，网页体积小，下载快

解决内容与表现分离的问题

更好的维护网页，提高工作效率

CSS样式规则

了解了CSS之后，那怎么写CSS呢？CSS也有自己的规则，如下图

CSS规则由两部分组成：选择器、声明

css--使用的四种方法_css

要注意的是：所有符号都要在英文状态下输入，属性和值之间用：隔开，写完之后用；隔开

CSS注释

 注释是代码之母

在HTML里注释是<!---注释语句->

在CSS里注释是/*注释语句*/

 CSS使用方法

使用css有四种方法

1.行内样式（内联样式）

2.内部样式表（嵌入样式）

3.外部样式表

4.导入式

行内样式

行内样式是在标签内添加style属性

语法

<p style="color: red">内容</p>

css--使用的四种方法_html_02

css--使用的四种方法_html_03

<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>

   <p style="color: red">内容</p>

</body>
</html>

View Code

内部样式

把css样式代码写在head标签里的style里

语法：

<head>
    <style>
        p{color: blue}
    </style>
</head>

注意：一定要写在head标签里

css--使用的四种方法_html_02

css--使用的四种方法_html_03

<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style>
        p{color: blue}
    </style>
</head>
<body>

   <p >内容</p>

</body>
</html>

点我

CSS外部样式

外部样式表，把css样式代码单独写在独立的一个文件中

扩展名：CSS文件名.css

引用外部文件使用link

<link rel="stylesheet" href="css_file.css">

css--使用的四种方法_html_02

css--使用的四种方法_html_03

<!DOCTYPE html>
<html lang="en">
<head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="css_file.css">
</head>
<body>

   <p >内容</p>

</body>
</html>

点我

注意：link要放在head标签里

导入式

@import  "外部css样式"

注意：@import写在<style>标签内最开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <style>
         @import url("css_file.css");
     </style>
</head>
<body>

   <p >内容</p>

</body>
</html>

CSS使用方法区别

如下图，在项目中我们最常用的是外部样式

css--使用的四种方法_css_08

 

 CSS使用方法优先级

行内样式>内部样式>外部样式

说明：

　　1.链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

　　2.最后定义的优先级最高(就近原则)