CSS基础

1、CSS简介

CSS(层叠样式表)是一种文本标记语言,是修饰 HTML 和 XML 的标记语言。

2、CSS引入方式

2.1 行内样式(内嵌样式)

在标签中写入style="名值对"的形式,多个名值对之间使用;隔开,但是这种方法不太适合于属性过多的标签中,样式不能复用,不便于维护。

html 复制代码
<p style="font-size: 20px;color: black">CSS</p>
2.2 内部样式

将CSS样式从HTML标签中分离出来,可以在同一HTML文件中多次利用,一般写入head内。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-size: 40px;
            color: red;
        }
    </style>
</head>

<body>
    <p>CSS</p>
    <p>CSS</p>
</body>

</html>

2.3 外部样式

将CSS样式写入独立的文件中,HTML文件中需要使用时,导入链接,使得不同HTML文件样式可以复用;

用户浏览网页时CSS样式文件会被暂时缓存,继续浏览其他网页时会优先使用缓存中的文件。避免重复下载,大大提高了网页的加载效率。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>

<body>
    <p style="font-size: 20px;color: red">CSS</p>
</body>

</html>
2.4 优先级

行内样式 > 外部样式表 = 内部样式表,同级别或同一样式表中后面的样式会覆盖前面的样式。

3、CSS选择器

3.1 通配选择器

选择所有元素。

html 复制代码
<style>
    * {
        font-size: 30px;
        color: blue;
    }
</style>
3.2 类选择器

根据元素的class值,选中某些元素。

html 复制代码
<style>
    .title {
        color: green;
        font-size: 50px;
    }
    .other {
        color: rgb(134, 144, 112);
        font-size: 30px;
    }
</style>
3.3 ID选择器

根据元素的ID值精准选取元素。元素的id不能包含空格。

html 复制代码
<style>
    #top1 {
        color: green;
        font-size: 30px;
    }
    #top2 {
        color: rgb(74, 18, 194);
        font-size: 30px;
    }
</style>
3.4 交集选择器

选中同时符合多个条件的元素。

html 复制代码
<style>
    span.other {
        font-size: 15px;
        color: bisque;
    }
</style>
3.5 并集选择器

选中多个选择器对应的元素,又称为分组选择器。

3.6 后代选择器

选中指定元素中,符合要求的后代元素。(只选择后代元素)

html 复制代码
<style>
    ul li {
        color: red;
    }

    ol li span {
        color: red;
    }

    .zu1 li {
        color: aqua;
    }
</style>
3.7 子代选择器

选中指定元素中符合要求的子元素。(只选择子元素)

html 复制代码
<style>
    ol>li {
        color: red;
    }
</style>
3.8 兄弟选择器
3.8.1 相邻兄弟选择器

选中指定元素后,紧紧相邻的兄弟元素。

html 复制代码
<style>
    div+li {
        color: aqua;
    }
</style>
3.8.2 通用兄弟选择器

选中指定元素后所有符合条件的元素。

html 复制代码
<style>
    div~li {
        font-size: 40px;
    }
</style>
3.9 属性选择器

语法:

  • 1、[属性名]:选中具有某个属性的元素;
  • 2、[属性名=属性值]:选中属性名具有指定值的元素;
  • 3、[属性名=^属性值]:选中属性值以指定值开头的元素;
  • 4、[属性名=$属性值]:选中属性值以指定值结尾的元素;
  • 5、[属性名=*属性值]:选中属性值包含指定值的元素。

4、伪类选择器

4.1 动态伪类选择器

伪类选择器是一种特殊的CSS选择器。它允许在不改变HTML结构的情况下,根据用户的动作来更改样式。

html 复制代码
<style>
    /* 正常显示标签属性 */
    a:link {
        color: red;
    }

    /* 访问过的标签属性 */
    a:visited {
        color: yellow;
    }

    /* 鼠标悬浮标签属性 */
    a:hover {
        color: blue;

    }

    /* 标签激活属性 */
    a:active {
        color: green;
    }

    /* 聚焦标签属性 */
    select:focus {
        color: red;
    }
</style>
4.2 结构伪类选择器

结构伪类选择器根据元素在结构树中的位置来选定元素。

4.2.1 一般结构伪类选择器
html 复制代码
<style>
    /* 选择所有div第一个子类元素为p标签的元素 */
    /* div>p:first-child {
        color: red;
    } */
    /* 选择所有div最后一个子类元素为p标签的元素 */
    /* div>p:last-child {
        color: red;
    } */
    /* 选择所有div奇数个子类元素为p标签的元素 */
    /* div>p:nth-child(2n+1) {
        color: red;
    } */
    /* 选择div同类元素的第一个子类元素 */
    /* div>p:first-of-type {
        color: red;
    } */
    /* 选择div同类元素的最后一个子类元素 */
    /* div>p:last-of-type {
        color: red;
    } */
    /* 选择div同类元素的偶数子类元素 */
    div>p:nth-of-type(2n) {
        color: red;
    }
</style>
4.2.2 特殊结构伪类选择器(了解即可)
  • :nth-last-child(n) 所有兄弟元素中的倒数第n个
  • :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
  • :only-child 选择没有兄弟的元素
  • :root 根元素
  • :empty 内容空的元素(空格也不能有)
4.3 否定伪类选择器

选中排除某些属性的元素。

html 复制代码
<style>
    /* 选中div除了第一个子类元素 */
    /* div>p:not(:first-child) {
        color: red;
    } */
    /* 选中div除了属性名class为last的元素 */
    div>p:not([class="last"]) {
        color: aqua;
    }
</style>

持续更新中!!!

相关代码地址:https://gitee.com/justinc666/web

相关推荐
雯0609~19 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ22 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z28 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5