CSS3 上篇

一、简介

　　　　是一个层叠级联样式表（Cascading Style Sheet）

　　　　作用：美化网页

　　优势：

　　　　1、内容和表现分离

　　　　2、网页结构表现统一、可以实现复用

　　　　3、样式十分丰富

　　　　4、可以单独使用css文件

　　　　5、利用SEO，容易被搜索引擎收录

二、快速入门

语法：(每一个声明，最好使用分号结尾)

    选择器{
        声明1;
        声明2;
        声明3;
     }

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    
    <style>
        h1{
            color: red;
        }
    style>
head>
<body>
    <h1>我是标题h1>
body>
html>

三、CSS的导入方式

　　　　1、行内样式

　　　　　　　　在标签元素中

<h1 style="color: red">我是标题h1>

　　　　2、内部样式

　　　　　　　　在head标签中　　　

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        h1{
            color: aqua;
        }
    style>
head>

　　　　3、外部样式

　　　　　　　　在head标签中，利用link标签引入外部的css样式文件

 <link href="../css/style.css" rel="stylesheet">

它们的优先级：就近原则（谁离编写代码内容进，谁的优先级就越高）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <style>
        h1{
            color: aqua;
        }
    style>
    
    <link href="../css/style.css" rel="stylesheet">
head>
<body>
    
    <h1 style="color: red">我是标题h1>
body>
html>

　　拓展：外部样式的两种写法

　　　　　　链接式：link

  <link href="../css/style.css" rel="stylesheet">

　　　　　　导入式（是CSS2.1特有的）：@import url（“css文件地址”）

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        @import url("../css/style.css");
    style>
head>

　　区别：

　　　　1、link和import的语法结构不同，

　　　　2、link是html标签，只能放入html源代码中使用

　　　　　 import可以看作css样式，作用是引入css样式功能

　　　　3、import在html使用时候需要