CSS3基础知识通俗易懂

最新推荐文章于 2023-06-17 14:13:56 发布

耳冉鹅

最新推荐文章于 2023-06-17 14:13:56 发布

阅读量292

点赞数 1

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/qq_45366447/article/details/113242584

版权

前端基础专栏收录该内容

6 篇文章

订阅专栏

一、概述

如何学习

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字、阴影、超链接、列表、渐变）
盒子模型
浮动
定位
网页动画（特效效果）

1、什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

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

css的优势：

内容与表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

2、快速入门

HTML与CSS写在同一个文件下：

<!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>

HTML与CSS分离：

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

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

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

h1{
    color: red;
}

在这里插入图片描述

3、3种CSS导入方式

行内样式
内部样式
外部样式–推荐使用

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

    <!--        内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级：就近原则（距离标签最近的生效）-->

<!--行内样式： 在标签元素中，编写一个style属性，编写样式即可-->
<!--<h1 style="color: red">我是标题</h1>-->
<h1 >我是标题</h1>

</body>
</html>

h1{
    color: green;
}

扩展：外部样式两种写法

链接式：html

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

导入式：css2.1特有

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

二、选择器

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

1、基本选择器

标签选择器：选择一类标签标签{}
类选择器：选择所有class属性一致的标签，可跨标签 .类名{}
id选择器：全局唯一！ #id名{}
优先级： id选择器>类选择器>标签选择器

1.1 标签选择器

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

    <style>
        /*标签选择器，会选择到页面上所有标签*/
        h1{
            color: #4414ff;
            background-color: wheat;
            border-radius: 10px;
        }
        p{
            font-size: 50px;
        }
    </style>

</head>
<body>

<h1>Java</h1>
<h1>Java</h1>
<p>上小破站</p>

</body>
</html>

1.2 类选择器

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

    <style>
        /* 类选择器的格式： .class的名称{} */
        .ah1{
            color: wheat;
        }
        .ah2{
            color: #4ffffa;
        }
    </style>

</head>
<body>

<h1 class="ah1">标题1</h1>
<h1 class="ah2">标题2</h1>
<h1 class="ah1">标题3</h1>
<p class="ah1">P标签</p>
</body>
</html>

1.3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 ：  id必须保证全局唯一！！！
            #id名称{}
            优先级： id选择器>类选择器>标签选择器
        */
        #aaa{
            color: aquamarine;
        }
        .a{
            color: greenyellow;
        }
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1 id="aaa" class="a">标题1</h1>
<h1 class="a">标题2</h1>
<h1 class="a">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

2、层次选择器

后代选择器在某个元素后面祖爷爷爷爷爸爸你

/* 后代选择器*/
body p{
    background-color: red;
}

子选择器一代儿子

/* 子选择器*/
body>p{
    background-color: green;
}

相邻兄弟选择器只有一个（向下）

/* 兄弟选择器*/
.active+p{
    background-color: wheat;
}

通用选择器当前选中元素的向下的所有兄弟元素

/* 通用选择器*/
.active~p{
    background-color: wheat;
}

在这里插入图片描述

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

    <style>
        /* 后代选择器*/
        /*body p{*/
        /*    background-color: red;*/
        /*}*/

        /* 子选择器*/
        /*body>p{*/
        /*    background-color: green;*/
        /*}*/

        /* 兄弟选择器*/
        /*.active+p{*/
        /*    background-color: wheat;*/
        /*}*/

        /* 通用选择器*/
        .active~p{
            background-color: wheat;
        }
    </style>

</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

3、结构伪类选择器

伪类： ---->条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用.class #id-->
    <style>
       /* ul的第一个子元素*/
       ul li:first-child{
           background-color: #4414ff;
       }
       /* ul的最后一个子元素*/
        ul li:last-child{
            background-color: wheat;
        }
        /* 只选中p1:   定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才会生效
        即： 若body中在p1前有个h1标签，则需要p:nth-child(2)  样式才能生效
        */
        p:nth-child(2) {
            background-color: red;
        }

        /* 选中父元素下的p元素的第二个*/
        p:nth-of-type(2) {
            background-color: yellow;
        }

    </style>

</head>
<body>
<h1>h</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

在这里插入图片描述

4、属性选择器

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

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 4px;
            background-color: wheat;
            text-align: center;   /* 水平居中*/
            color: red;
            text-decoration: none;
            margin-right: 10px;
            font: bold 20px/50px Arial; /* 粗体 大小 字体 */
        }

        /*
            属性名，    属性名=属性值（正则）
            =   绝对等于
            *=  包含等于
            ^=  开头

        */

        /* 存在id属性的元素    a[]{} */
        a[id=first] {
            background-color: green;
        }

        /* class中有links的元素*/
        a[class*="links"] {
            background-color: blue;
        }

        /* 选中href中以https开头的元素*/
        a[href^=http] {
            background-color: blue;
        }

        /* 选中href中以png结尾的元素*/
        a[href$=png] {
            background-color: blue;
        }

    </style>

</head>
<body>

<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="" class="links item last">8</a>

</p>

</body>
</html>