CSS3 入门

最新推荐文章于 2024-07-16 17:16:30 发布

Rella_w

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量598

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/Wjiahui/article/details/122765566

版权

什么是css?

如何学习？
1、css是什么
2、css快速入门
3、css选择器（重点+难点）
4、美化网页（文字、阴影、超链接、列表、渐变…）
5、盒子模型
6、浮动
7、定位
8、网页动画（特效）

1.1什么是css?

cascading style sheet层叠级联样式表
css：表现层（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…
在这里插入图片描述

1.2发展史

css1.0
css2.0 div(块)+css ，提出html与css结构分离的思想,网页变得简单，SEO
css2.1 浮动，定位
css3.0 圆角边框，阴影，动画… 浏览器兼容性

1.3快速入门

style
单独写一个css文件，不要和HTML代码写在一起。

在这里插入图片描述

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

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


    -->

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

</head>
<body>

<h1>我是一个小标题</h1>

</body>
</html>

h1{
    color: red;
}

请添加图片描述

css优势：
1、内容和表现分离
2、网页结构表现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于html的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">我是一个小标题</h1>


</body>
</html>

拓展：外部样式两种写法

链接式

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

导入式

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