CSS-----css概述和三种导入方式

什么是CSS？

css：Cascading Style Sheet，层叠级联样式表，主要用于美化网页，包括不限于：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
发展史：

1、CSS1.0

2、CSS2.0 ：DIV块+CSS，HTML与CSS结构分离的思想，网页变得简单， SEO（Search Engine Optimization，搜索引擎）

3、CSS2.1 ：浮动，定位

4、CSS3.0 ：圆角，阴影，动画…浏览器兼容性
练习：导入方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 规范：<style>可以编写CSS的代码，每一个声明，最好使用一个分号结尾,
语法：
     选择器{
     声明1；
     声明2；
     声明3；
     }
 -->
    <style>
        h1{
     
     
          color: #377375;
        }
    </style>
</head>
<body>
<h1>hello word</h1>
</body>
</html>

导入方式二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello word</h1>
</body>
</html>

h1{
    
    
    color: #CE4A50;
}

CSS的优势：

1.内容和表现分离

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

3.样式更加丰富

4.使用独立于html的css文件

5.利于SEO，容易被搜索引擎收录

1.2、css导入方式

1.行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ONE</title>
</head>
<body>
<!--行内样式，在标签元素内，编写一个style属性，编写样式即可-->
<h1 style="color: red">one</h1>
</body>
</html>

2.内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ONE</title>
<!--内部样式-->
    <style>
        h2{
       
       
            color: #3d6694;
        }
    </style>
</head>
<body>
<!--行内样式，在标签元素内，编写一个style属性，编写样式即可-->
<h1 style="color: red">one</h1>

<h2>TWO</h2>
</body>
</html>

3.外部样式：链接式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ONE</title>
<!--内部样式-->
    <style>
        h2{
       
       
            color: #3d6694;
        }
    </style>
</head>
<body>
<!--行内样式，在标签元素内，编写一个style属性，编写样式即可-->
<h1 style="color: red">one</h1>

<h2>TWO</h2>
<!--外部样式：链接式-->
<link rel="stylesheet"href="CSS/importStyle.css">
<h3>Three</h3>
</body>
</html>

h3{
      
      
    color: antiquewhite;
}

4.内部样式和外部样式的优先级：内部样式和外部样式针对同一个选择器时，谁离得近便执行谁的声明

CSS-----css概述和三种导入方式

什么是CSS？

1.2、css导入方式

猜你喜欢