第16天（前端的东西好好玩啊）

最新推荐文章于 2024-08-30 16:13:36 发布

wdchun__

最新推荐文章于 2024-08-30 16:13:36 发布

阅读量856

点赞数 8

文章标签：前端 css3 学习开发语言

本文链接：https://blog.csdn.net/wdchun__/article/details/140743033

版权

CSS

什么是css

如何学习

1.css是什么

2.css怎么用（快速入门）

3.css选择器（重点+难点）

4.美化网页（文字，阴影，超链接，列表，渐变）

5.盒子模型

6.浮动

7.定位

8.网页动画（替换动画）

runoob.com

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

基础入门

<!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优势：

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>
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
</body>
</html>

/*外部样式*/
h1{
    color: blue;
}

拓展:外部样式两种写法

链接式：

html标签

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

导入式：

CSS2.1特有

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

2.选择器

作用：选择页面上的某一个或某一个元素

2.1基本选择器

1.标签选择器


    <style>
        /*标签选择器，会选择到页面上的所有标签*/
        h1{
            color: #21bb3e;
            background: #bbb72a;
            border-radius: 24px;
        }
        p{
            font-size: 33px;
        }
    </style>

2.类选择器class

 <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式  .class的名称{}
        好处，可以多标签归类，是同一个class，可以复用

        */
        .wangdong{
            color: #bb42b6;
        }
        .wangwang{
            color: #8658bb;
        }

    </style>

3.Id选择器

  <style>
        /*类选择器的格式  .class的名称{}
        好处，可以多标签归类，是同一个class，可以复用

        */
        .wangdong{
            color: #bb42b6;
        }
        .wangwang{
            color: #8658bb;
        }

    </style>

优先级：id>class>标签