前端学习之CSS3

最新推荐文章于 2024-08-16 23:09:58 发布

南部之星sir

最新推荐文章于 2024-08-16 23:09:58 发布

阅读量99

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/m0_46376377/article/details/116243013

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括CSS的定义、用途、三种导入方式，以及选择器的详细内容。通过实例展示了标签选择器、类选择器和ID选择器的用法，并讲解了选择器的优先级。此外，还提到了层次选择器，如后代选择器、相邻兄弟选择器和通用选择器的使用方法。

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

1.CSS学习第一天

1.css是什么？
2.css怎么用（快速入门）
3.css选择器（重点+难点）

1.1什么是css

Cascading style Sheet 层叠级联样式表

Css:表现（美化网络）

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zwom48kL-1619614200556)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\1619606111858.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范编写css代码的地方
    <style>可以编写css的代码，没一个声明最好用分号结尾
    语法：
    选择器：{
        声明1：
        声明2：
        声明:3
            }
            -->

    <!--css代码-->
    <style>

        h1{
            color: red;
        }

    </style>
</head>
<body>
<h1>阿打算</h1>
</body>
</html>

建议使用html和css分离的方式用link：相连

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zQsYyTTL-1619614200557)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\1619607988330.png)]

css的优点：

1.内容和表现分离

2.网页结构表现统一，可以实现复用

3.样式十分的丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录

1.2CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式  优先级：就近原则行-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

链接式：

html

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

导入式：

是css2.1特有的

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

2.选择器

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

2.1基本选择器

1.标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的整个标签的元素*/
        h1{
            color: bisque;
            background: red;
            border-radius: 13px;
        }
    </style>
</head>
<body>
<h1>java</h1>
<h1>人生苦短，我用python</h1>
<p>哈哈哈哈</p>
</body>
</html>

2.类选择器：class选择所有的class属性一致的标签，夸标签，类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处：可以进行多个标签归类
        是同一个class，可以复用
         */
    .JunXing{
        color: aqua;
    }
    .NBNB{
    color: red;
        }
        .
    </style>
</head>
<body>
<h1 class="JunXing">标题1</h1>
<h1 class="NBNB">标题2</h1>
<h1 class="NBNB">标题3</h1>
</body>
</html>

3.ID选择器：全局唯一！#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器
        #id名称{

        }
         id选择器不可以复用
         不遵循就近原则*/
        #hello{
            color: red;
        }
        #hello3
        {
            color: blue;
        }
        .style{
            color: black;
        }
        #hello2{
            color: white;
        }
    </style>
</head>
<body>

<h1 class="style" id="hello">标题1</h1>
<h1 id="hello2">标题2</h1>
<h1 id="hello3">标题3</h1>
<h1 id="hello4">标题4</h1>

</body>
</html>

优先级：id>class>标签

2.2层次选择器

1.后代选择器:在某个元素的后面

/*后代选择器*/
body p{    
background: blue;
}

2.相邻兄弟选择器：同辈，下一个

/*相邻兄弟选择器：只有一个并且为同一级的，向下的一个*/.active+p{   
    background: skyblue;
}

3.通用选择器：同辈，下面全是

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: red;
        }

4.子选择器：一代，儿子

/*子选择器*/body>p{    background: red;}

南部之星sir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之CSS3

1.CSS学习第一天1.css是什么？2.css怎么用（快速入门）3.css选择器（重点+难点）1.1什么是cssCascading style Sheet 层叠级联样式表Css:表现（美化网络）字体，颜色，边框，高度，背景图片，网页定位，网页浮动…[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zwom48kL-1619614200556)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\1619
复制链接

扫一扫

专栏目录