什么是CSS3 (快速入门)_css3快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/AO_AEO/article/details/106722069

1、什么是CSS3

如何学习

CSS是什么
CSS怎么用(快速入门)
CSS选择器(重点＋难点)
美化网页(文字，阴影，超链接，列表，渐变…)
盒子模型
浮动
定位
网页动画（特效）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS ：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS 结构分离的思想

CSS2.1 浮动定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性~

练习格式：

在这里插入图片描述

1.3、快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    规范，<style>可以编写CSS的代码,每一个声明，最好使用分号结尾
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: red;
        }
    </style>

</head>
<body>
<h1>我是标题</h1>


</body>
</html>

建议使用这种样式

在这里插入图片描述

css优势：

内容与表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利于SEO，容易被搜索引擎收录！

1.4、CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->

<!--行内样式：在标签元素中编写一个style属性-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法

链接式：

html

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式

@import 是CSS2.1特有的！

<!--    导入式-->
    <style>
        @import url("css/style.css");
    </style>

链接：https://www.bilibili.com/video/BV1YJ411a7dy?p=3