CSS快速入门与实战-优快云博客

本文链接：https://blog.youkuaiyun.com/HongLingya/article/details/114655178

1、什么是CSS

如何学习

1. css是什么
2. css怎么用 （快速入门）
3. css选择器 （重点 + 难点）
4. 美化网页 （文字，阴影，超链接，渐变.....）
5. 盒子模型 
6. 浮动
7. 定位
8. 网页动画 （特效动画）

1.1 什么是CSS

CSS：表现(美化网页) 包括内容如下：

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

1.2 CSS发展史

CSS1.0

CSS2.0 DIV(块级元素) + CSS，HTML和CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动和定位

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

CSS3.0继承CSS2.0所有

1.3 快速入门

1.基本入门

这种是内部CSS样式

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

<!--
        规范，style 可以编写css代码，每一个声明最后都使用分号结尾
        语法：
            选择器{
                声明1：
                声明2：
                声明3：
            }
-->

    <style>

        h1{
           color: rosybrown;
        }

    </style>

</head>
<body>

    <h1>Holle world！</h1>

</body>
</html>

建议使用这种方式，外部引入CSS

在这里插入图片描述

2.CSS的优势

1. 内容和表现分离
2. 网页结构表现统一，可以实现复用性
3. 样式十分的丰富
4. 建议使用独立于html的css文件，也就是上方的外部引入css
5. 利用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">Holle world！</h1>

</body>
</html>

拓展：外部样式两种写法

导入式：@import 是CSS2.1特有的

	<style>
        @import url("css/style.css");
    </style>

链接式：

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

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。