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

相关推荐
我要洋人死41 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#