CSS3详解

最新推荐文章于 2024-07-09 20:13:17 发布

qdyones

最新推荐文章于 2024-07-09 20:13:17 发布

阅读量1.4k

点赞数 5

分类专栏：基础学习文章标签： css3 css html

本文链接：https://blog.csdn.net/qdyones/article/details/123102483

版权

这篇博客详细介绍了CSS3，包括它的简单介绍、发展史、快速入门、四种导入方式、三种基本选择器、层次选择器、结构伪类选择题、属性选择器、CSS作用、字体和文本样式、背景图像应用、盒子模型、定位、Z-index、透明度、动画等核心概念，旨在帮助读者全面掌握CSS3。

摘要由CSDN通过智能技术生成

1.CSS3简单介绍

HTML+CSS+JavaScript=结构+表现+交互
在这里插入图片描述

什么是CSS？

Cascading Style Sheet层叠级联样式表
CSS:表现(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

CSS发展史

CSS1.0
CSS2.0 DIV (块) + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1浮动，定位
CSS3.0圆角，阴影，动画…浏览器兼容性~

2.CSS快速入门以及其优势

初次使用css改变文字标题颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网站</title>
    <!--规范
    style可以编写css代码
    h1{ }代表针h1标签写css代码
    语法:
    选择器{
        声明1;
        声明2; .
        声明3;
        }

    -->
    <style>
        h1{
     color:red

        }

    </style>

</head>


<body>
<h1>我的一级标题</h1>

</body>
</html>

创建css文件

创建完css文件直接在css文件中粘贴style内容即可

在这里插入图片描述
当HTML 和CSS分开编写之后需要再HTML文件中编写一个“指向地址”
如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网站</title>
    <!--规范
    style可以编写css代码
    h1{ }代表针h1标签写css代码
    语法:
    选择器{
        声明1;
        声明2; .
        声明3;
        }

    -->
    <link rel="stylesheet" href="CSS/style.css">

</head>


<body>
<h1>我的一级标题</h1>



</body>
</html>

css的优势:
1、内容和表现分离
2、网页结构表现统一-, 可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO,容易被搜索弓|擎收录!

3.四种CSS导入方式

1.行内样式
2.内部样式
3.外部样式

三种方式优先级：

三种导入CSS方式：行内样式、内部样式、外部样式
就近原则，谁离h1标签比较近就比较优先

第一种情况：（蓝、黄、绿）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <!--内部样式表-->
    <style>
       h1{
     
           color: green;
       }
    </style>


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

</head>


<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blue">一级标题</h1>
</body>
</html>

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

第二种：（黄、绿）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    <!--内部样式表-->
    <style>
       h1{
     
           color: green;
       }
    </style>


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

</head>


<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 >一级标题</h1>
</body>
</html>

第三种：（绿、黄）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
    

    <link rel="stylesheet" href="CSS/style.css">
    <!--内部样式表-->
    <style>
        h1{
     
            color: green;
        }
    </style>

</head>


<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 >一级标题</h1>
</body>
</html>

外部样式有两种：1.链接式
2.导入式
缺点，打开大网站的时候会先展示骨架再展示渲染后的样式，CSS2.1属于，现在多数都是用CSS3.0的链接式
@import是CSS2.1特有的
导入式外部样式代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入式外部样式-->
    <style>@import url("CSS/style.css");;</style>

</head>
<body>
<h1>导入式外部样式</h1>
</body>
</html>

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

4.三种基本选择器（重点）

为什么用选择器？————可以选择页面上的某一个或者某一类元素

标签选择器

用标签改变带有h1标签的文字的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
</head>
<style>
    h1{
     
        /*标签选择器会选中页面上带有这个标签的字体*/
        color: #010507;
        background: blue;
        border-radius: 50px;
    }
    p{
     
        font-size: 100px;
    }
</style>

<body>
<h1>&nbsp;&nbsp;&nbsp;&nbsp;学java</h1>
<p>听课程</p>


</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
<!--类选择器的格式———— .class的名称{}
    类选择器的好处:可以按照标签归类，可以复用

    -->
    <style>
        .第一个类标签{
     
            color: green;
        }
        .第二个类标签{
     
            color: blue;
        }


    </style>

</head>


<body>

<h1 class="第一个类标签">标题一</h1>
<h1 class="第二个类标签">标题二</h1>
<h1 class="第一个类标签">标题三</h1>
<p class