1.3Web前端基础笔记

至暗

已于 2022-03-16 00:15:56 修改

阅读量112

点赞数

分类专栏： 1.web前端——html、css基础文章标签：前端 css3 html css web

于 2022-03-15 09:59:36 首次发布

本文链接：https://blog.csdn.net/m0_64838786/article/details/123485304

版权

1.web前端——html、css基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、CSS是什么？

层叠样式表，网页有多个层次结构，用css为每一层设置样式，我们最终能看到的是最上面一层。

1.内联样式、行内样式

在标签中通过style属性设置。

<body>
    <p style="color:blue; font-size: 50px;">唧唧复唧唧，木兰当户织</p>
</body>

2.内部样式表

将样式编写在head的style标签中，然后通过CSS选择器来选中元素并为其设置各种样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        p{
            color: aquamarine;
            font-size: medium;
        }
    </style>
</head>
<body>
    <p>唧唧复唧唧，木兰当户织</p>
    <p>双兔傍低走，安能辨我是雌雄</p>
</body>
</html>

3.外部样式表

将CSS编写到一个外部文件中，然后通过head中的link标签引入外部的CSS文件。可以在不同页面间复用，可以用到浏览器的缓存机制，提升加载速度。

p{
    color: blueviolet;
    font-size: 30px;
}

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

二、选择器

通过选择器可以选则指定的元素，如上图中的：p。

1.常用选择器

①元素选择器——根据标签选择，如：p{}、h1{}......

②id选择器——根据id属性值选中一个元素，id不能重复（ # 开头）。如：#box{}、#red{}......

③ 类选择器——根据元素的class属性值分类，class与id相似，但class可以重复，可以为一个元素指定多个class（ . 开头）。

④通配选择器——选中页面中的所有元素（ * 开头）。

 <style>
        #mulan{
            color: burlywood;
        }
 </style>

------------------------------------------------

<p id="mulan">问女何所思，问女何所忆。</p>


***********************************************************************

 <style>
        .ci{
            color: burlywood;
        }
 </style>

------------------------------------------------

 <p class="ci">问女何所思，问女何所忆。</p>
 <p class="ci">女亦无所思，女亦无所忆。</p>
 <p class="ci">昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。</p>

***********************************************************************

 <style>
        *{
            color: burlywood;
        }
 </style>

2.复合选择器

①交集选择器——同时复合多个条件的元素。

②并集选择器（选择器分组）——同时选择多个选择器对应的元素。

<style>
        h1.yi{
            color: burlywood;
</style>

********************************************************

<style>
        h1,span,#b1,h1.yi{
            color: burlywood;
        }
</style>

3.关系选择器

①子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        div > p > span{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1>木兰辞</h1>
        <p>
            唧唧复唧唧，木兰当户织
            <span>bbb</span>
        </p>
        <p>不闻机杼声，唯问女叹息</p>
        <p>问女何所思，问女何所忆。</p>
        <p>女亦无所思，女亦无所忆。</p>
        <p>昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。</p>
        <p>阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。</p>
        <span>aaa</span>
    </div>  
</body>
</html>

②后代元素选择器

<style>
        div span{
            color: red;
        }
</style>

③兄弟元素选择器

<style>
        /* p 后面紧挨着的 下一个 span */
        p + span{
            color: red;
        }

        /* h1 后面的 所有的 p */
        h1 ~ p{
            color: red;
        }
</style>

4.属性选择器

①[属性名]：选择有指定属性的所有元素；

②[属性名=属性值]：选择含有指定名值对的元素；

③[属性名^=指定值]：选择属性值以指定值开头的元素；

④[属性名$=指定值]：选择属性值以指定值结尾的元素；

⑤[属性名*=指定值]：选择属性值含有定值的元素；

5.伪类选择器

伪类（不存在的类）：用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素......

①ul:first-child —— 所有元素中的第一个子元素；

ul:last-child —— 所有元素中的最后一个子元素；

ul:nth-child(x) —— 所有元素中选中第x个子元素，特殊值：①n：全部；②2n或even：选中偶数位的元素；③2n+1或odd：选中奇数位的元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
    <style>
        ul>li:nth-child(3){
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <span>aaa</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

②ul>li:nth-child(1) —— 选中li元素中的第一个；

......

③ul>:first-of-type —— 所有不同元素的第一个；

ul>:last-of-type —— 所有不同元素的最后一个；

ul>:nth-of-type(x) ——所有不同元素中的第x个；

④:not() —— 否定伪类，将符合条件的元素去掉。

<style>
        ul>li:not(:nth-of-type(3)){
            color: blue;
        }
</style>

结果：

6.超链接的伪类

:link —— 用来表示正常的链接（没访问过）；

:visited —— 用来表示访问过的链接，由于隐私的原因，该伪类只能修改连接的颜色；

:hover —— 用来表示鼠标移入后的状态；

:active —— 用来表示鼠标点击后的状态；

7.伪元素

表示页面中一些并不存在的元素（特殊位置），（ :: 开头）。

::first-letter ：表示第一个字母；

::first-line：表示第一行；

::selection：表示选中的内容；

::before：元素的开始；

::after：元素的最后。

注：before和after必须结合content属性使用。

通过CSS添加到内容无法选中。

    <style>
        p::first-letter{
            color: aquamarine;
        }
        p::first-line{
            font-size: 20px;
        }
        p::selection{
            background-color: yellowgreen;
        }
        div::before{
            content: "abc";
        }
        p::after{
            content: 'bye';
            color: brown;
        }
    </style>