CSS(一)---【CSS简介、导入方式、八种选择器、优先级】

零.前言

本系列适用于零基础小白，亦或是初级前端工程师提升使用。

知识点较为详细，如果追求非常详细，请移步官方网站或搬运网站。

1.CSS简介

CSS全称：“Cascading Style Sheets”，中文名：“层叠样式表”。

用于定义网页样式和布局的样式表语言。

通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框等等样式。

如果HTML是一个房子的骨架，那么CSS就是对房子进行精装修！

2.CSS一般语法

CSS通常由选择器（标签、id、class等）、属性、属性值组成。

需要注意的是：“属性对之间需要用分号隔开”、“属性对是以键：值对的形式出现的”。

例如一个<p>标签选择器：

p{
    background-color: aqua;
    font-size: 20px;
}

一.CSS的三种导入方式

1.1内部样式表

内部样式表将CSS样式放在HTML文档的<head>标签中，并且使用<style></style>来指定内部样式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            background-color: aqua;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>我的颜色是aqua并且字体大小是20像素</p>
</body>
</html>

效果如下：

1.2内联样式

内联样式将CSS样式作为属性嵌入到标签中，并且该样式只对嵌入该CSS样式的标签生效，使用style属性来指定样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: brown;font-size: larger;">我的颜色是brown并且字体大小是larger</p>
</body>
</html>

效果：

1.3外部样式表

外部样式表在HTML文档外部创建.CSS文件，并且引入.CSS文件来实现样式表。

例如我们在HTML文档目录下，有一个“style.css”文件：

在该css文件中，有如下样式：

那么我们就可以在HTML文档中输入该style.css文件的路径来导入这个样式表：

使用<link>标签的“href”属性来导入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <h3>我是使用外部样式表来装饰的h3标签~</h3>
</body>
</html>

效果：

1.4三种导入方式的优先级

优先级从高到低为：
“内联样式 > 内部样式表 > 外部样式表”。

当一个标签同时有上述多种样式时，将默认使用最高优先级的样式来装饰自己。

看下面一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        h3{
            color: aqua;
        }
    </style>
</head>
<body>
    <h3 style="color: blue;">我是使用最高优先级样式来装饰的h3标签~</h3>
</body>
</html>

最终效果：

可以看到，<h3>标签被内联样式所修饰。

二.8种选择器【重要】

2.0简介

选择器是使用CSS的基础，不会使用选择器就不会使用CSS。

8种选择器：“元素(标签)选择器”、“类选择器”、“ID选择器”、“通用选择器”、“子元素选择器”、“后代(包含)选择器”、“兄弟(并集)选择器”、“伪类选择器”。

选择器常在“内部样式表”、“外部样式表”中使用，内联样式默认就是“ID选择器”。

选择器的格式：

2.1元素(标签)选择器

顾名思义，该选择器会对所有的标签进行一个装饰，例如我们写了一个<p>标签的选择器，那么所有的<p>标签都会被这个选择器所修饰。

用法：

标签名{

属性:属性值;

属性:属性值;

.......

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 */
        p{
            background-color: aqua;
            font-size: larger;
        }
    </style>
</head>
<body>
    <p>这是一个标签选择器示例</p>
    <p>这还是一个标签选择器示例</p>
</body>
</html>

效果：

 2.2类选择器

类选择器会修饰所有相同类的标签，哪怕标签种类不同。

用法：

注意类名前面有一个“点”

.类名{

属性:属性值;

属性:属性值;

.....

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 */
        .myclass{
            background-color: black;
            color: brown;
            font-size: larger;
        }
    </style>
</head>
<body>
    <p class="myclass">这是一个类选择器示例</p>
    <div class="myclass">这还是一个类选择器示例</div>
</body>
</html>

效果：

2.3ID选择器

ID选择器会唯一的修饰某个标签，通过ID来指定。

用法：

PS：一定注意在ID前面有一个“井号”

#ID{

属性:属性值;

属性:属性值;

....

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ID选择器 */
        #myp{
            color: blue;
            font-size: larger;
        }
    </style>
</head>
<body>
    <p id="myp">这是一个ID选择器示例</p>
    <p>这是另一个ID选择器示例,不过我没有被选中</p>
</body>
</html>

效果：

2.4通用选择器

顾名思义，给所有的标签修饰样式，不管有没有ID、class，故也被叫做“全局选择器”。

用法：

PS：只有一个“星号”表示全部！！

*{

属性:属性值;

属性:属性值;

.....

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通用选择器 */
        *{
            color: blue;
            font-size: larger;
        }
    </style>
</head>
<body>
    <p>这是一个通用选择器的示例</p>
    <p id="myid">这也是一个通用选择器示例</p>
    <p class="myclass">这还是一个通用选择器示例</p>
</body>
</html>

效果：

2.5子元素选择器

子元素选择器可以指定修饰某个标签的子元素的样式，对于父标签则不会修饰。

用法:

父元素方式 > 子元素方式{

属性:属性值;

属性:属性值：

....

}

这里的父元素方式和子元素方式不唯一，只要可以搜索到对应的父元素和子元素即可！

即方式可以是：“通过标签搜索”、“通过ID搜索”、“通过类名搜索”。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子元素选择器 */
        /* 父元素使用类名搜索，子元素使用ID搜索 */
        .father > #son{
            font-size: larger;
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        我是子元素,但我没有id
        <p id="son">我也是子元素,但我有id</p>
    </div>
</body>
</html>

效果：

2.6后代选择器

后代选择器也叫“孩子选择器”。

只要是父元素的孩子就可以被修饰，可能有点绕，不过仔细想一下就好了，子元素的子元素不就是父元素的孩子(重孙子)吗？

用法：

父元素方法 后代元素方法{

属性:属性值;

属性:属性值;

.....

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        .father .grandson{
            color: blue;
            font-size: larger;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="grandson">我是子代标签哦~</p>
        <div>
            <p class="grandson">我是后代标签哦~</p>
        </div>
    </div>
</body>
</html>

效果：

2.7兄弟(并集)选择器

某个标签下方最近的一个同级标签被修饰。

用法：

兄弟元素A + 兄弟元素B{

属性:属性值;

属性:属性值;

....

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 兄弟选择器 */
        h1 + p{
            color: blue;
            font-size: larger;
        }
    </style>
</head>
<body>
    <h1>我是兄弟A</h1>
    <p>我是兄弟B</p>
</body>
</html>

效果：

2.8伪类选择器【重要但不常用】

在某些特定条件下的元素应用样式(用户交互等)。

例如：鼠标悬停状态、鼠标跟踪等等

不常用，待用到的时候查查百度好了....

用法：

元素 : 伪类方法{

属性:属性值;

属性:属性值;

....

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪类选择器 */
        p:hover{
            background-color: blue;
        }
        p{
            background-color: brown;
        }
    </style>
</head>
<body>
    <p>鼠标悬停到我身上，我会变色哦~</p>
</body>
</html>

效果：

鼠标没有移动到<p>标签时：

移动上去后：

2.9八种选择器的优先级

优先级从高到低：

“ID选择器 > 类选择器 > 后代选择器 > 元素(标签)选择器”

“子代选择器 > 后代选择器”

“伪类选择器可以与其它任何选择器并存”

“元素(标签)选择器，优先级永远最低”

三.其它

关于CSS的属性设置、其它设置，请参考作者的下一篇文章：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/496845.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【正版特惠】IDM 永久授权 优惠低至109元！

【正版特惠】IDM 永久授权 优惠低至109元！

尽管小编有修改版IDM&#xff0c;但是由于软件太好用了&#xff0c;很多同学干脆就直接购买了正版&#xff0c;现在正版也不贵&#xff0c;并且授权码绑定自己的邮箱&#xff0c;直接官方下载激活&#xff0c;无需其他的绿化修改之类的操作&#xff0c;不喜欢那么麻烦的&#x…
阅读更多...
JUC内容概述

JUC内容概述

复习概念 Sleep和Wait的区别 Sleep是Thread的静态方法&#xff0c;wait是Object的方法&#xff0c;任何对象实例都可以使用sleep不会释放锁&#xff0c;他也不需要占用锁&#xff0c;暂停。wait会释放锁&#xff0c;但是调用他的前提是线程占有锁他们都可以被Interrupted方法…
阅读更多...
iOS - LLVM的中间代码（IR）

iOS - LLVM的中间代码（IR）

文章目录 iOS - LLVM的中间代码&#xff08;IR&#xff09;1. 转为汇编代码2. 中间代码&#xff08;IR&#xff09;2.1 Objective-C在变为机器代码之前&#xff0c;会被LLVM编译器转换为中间代码&#xff08;Intermediate Representation&#xff09;2.2 可以使用以下命令行指令…
阅读更多...
html音频和视频可输入表单input

html音频和视频可输入表单input

音频和视频 loop循环播放autoplay自动播放controls显示控制面板<audio src""> //<video src"#">muted静音播放 可输入表单input password密码框 radio单选框 checkbox复选框 file上传文件 text文本框 文本框<input type"text"…
阅读更多...
网络编程综合项目-多用户通信系统

网络编程综合项目-多用户通信系统

文章目录 1.项目所用技术栈本项目使用了java基础&#xff0c;面向对象&#xff0c;集合&#xff0c;泛型&#xff0c;IO流&#xff0c;多线程&#xff0c;Tcp字节流编程的技术 2.通信系统整体分析主要思路&#xff08;自己理解&#xff09;1.如果不用多线程2.使用多线程3.对多线…
阅读更多...
智能车主控板原理图原理讲解

智能车主控板原理图原理讲解

智能车主控板原理图原理讲解 综述&#xff1a;本篇文章对智能车主控板的一部分电路进行原理分析&#xff0c;文末附加整体原理图。 1. 电源电路 &#xff08;1&#xff09;通过外接电池供电并通过电源模块电路&#xff0c;运用稳压芯片lm2940&#xff0c;将电源电压转化为5V…
阅读更多...
原生JS上传大文件分片

原生JS上传大文件分片

代码&#xff1a;https://gitee.com/xproer/up6-vue-cli 1.引入up6组件 2.配置接口地址 接口地址分别对应&#xff1a;文件初始化&#xff0c;文件数据上传&#xff0c;文件进度&#xff0c;文件上传完毕&#xff0c;文件删除&#xff0c;文件夹初始化&#xff0c;文件夹删除&…
阅读更多...
市场复盘总结 20240328

市场复盘总结 20240328

仅用于记录当天的市场情况&#xff0c;用于统计交易策略的适用情况&#xff0c;以便程序回测 短线核心&#xff1a;不参与任何级别的调整&#xff0c;采用龙空龙模式 一支股票 10%的时候可以操作&#xff0c; 90%的时间适合空仓等待 二进三&#xff1a; 进级率中 40% 最常用的…
阅读更多...
代码随想录算法训练营第day60|84.柱状图中最大的矩形

代码随想录算法训练营第day60|84.柱状图中最大的矩形

84.柱状图中最大的矩形 力扣题目链接(opens new window) 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 思路&#xff1a; 为什么这么说呢&#xff…
阅读更多...
第三十二天-PythonWeb主流框架-Django框架

第三十二天-PythonWeb主流框架-Django框架

目录 1.介绍 发展历史 介绍 2.使用 1.安装 2.创建项目 3.项目结构 4.启动 3.开发流程 1.设置ip可访问 2.创建模块 3.第一个页面 4.视图 5.include()参数 6.url与视图的关系 7.响应内容 4.视图处理业务逻辑 1.响应html 2.获取url参数 3.从文件响应html内容 …
阅读更多...
趣味物理知识竞赛活动方案

趣味物理知识竞赛活动方案

为了丰富校园文化生活&#xff0c;创建格调高雅、学习氛围浓厚、青春气息浓郁的校园文化&#xff0c;注重多样性全方面的发展&#xff0c;推进了素质教育向纵深拓展&#xff0c;全面提升大学生的综合素质和精神文明建设全面发展。为进一步引导大学生了解前沿科技&#xff0c;普…
阅读更多...
24计算机考研调剂 | 【官方】北京科技大学

24计算机考研调剂 | 【官方】北京科技大学

北京科技大学 考研调剂招生信息 招生专业&#xff1a; 085404&#xff08;计算机技术&#xff09; 081200&#xff08;计算机科学与技术&#xff09; 调剂要求&#xff1a;&#xff08;调剂基本分数&#xff09; 我中心将在教育部“全国硕士生招生调剂服务系统”&#xff08…
阅读更多...
面试算法-124-二叉树的最近公共祖先

面试算法-124-二叉树的最近公共祖先

题目 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它…
阅读更多...
缓存雪崩问题及解决思路

缓存雪崩问题及解决思路

实战篇Redis 2.7 缓存雪崩问题及解决思路 缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力。 解决方案&#xff1a; 给不同的Key的TTL添加随机值利用Redis集群提高服务的可用性给缓存业务添加降…
阅读更多...
Requests教程-20-sign签名认证

Requests教程-20-sign签名认证

领取资料&#xff0c;咨询答疑&#xff0c;请➕wei: June__Go 上一小节中&#xff0c;我们学习了requests的token认证方法&#xff0c;本小节我们讲解一下requests的sign签名认证。 在进行接口调用时&#xff0c;一般会要求进行签名操作&#xff0c;以确保接口的安全性和完整…
阅读更多...
基于springboot实现课程作业管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现课程作业管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现课程作业管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;课程作业管理系统当然也不能排除在外。课程作业管理系统是以实际运用为开发背景…
阅读更多...
项目实战：电影评论情感分析系统

项目实战：电影评论情感分析系统

目录 1.引言 2.数据获取与预处理 3.构建文本分类模型&#xff08;使用LSTM&#xff09; 4.结果评估与模型优化 4.2.结果评估 4.2.模型优化 5.总结 1.引言 在本篇文章中&#xff0c;将通过一个完整的项目实战来演示如何使用Python构建一个电影评论情感分析系统。涵盖从数…
阅读更多...
OSCP靶场--pyLoader

OSCP靶场--pyLoader

OSCP靶场–pyLoader 考点(信息收集CVE-2023-0297) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap -Pn -sC -sV 192.168.178.26 --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-28 09:14 EDT Nmap scan report for 192.168.178.26 Host is up…
阅读更多...
二分图

二分图

数据结构、算法总述&#xff1a;数据结构/算法 C/C-CSDN博客 二分图&#xff1a;节点由两个集合组成&#xff0c;且两个集合内部没有边的图。换言之&#xff0c;存在一种方案&#xff0c;将节点划分成满足以上性质的两个集合。 染色法 目的&#xff1a;验证给定的二分图是否可…
阅读更多...
房间采光不好怎么改造？这里有6个实用的解决方案！福州中宅装饰，福州装修

房间采光不好怎么改造？这里有6个实用的解决方案！福州中宅装饰，福州装修

当装修中遇到房间采光不好的问题&#xff0c;可以从以下几个方面来解决&#xff1a; ①引入自然光源 尽可能减少光线阻碍物&#xff0c;例如可以考虑打通一些非承重墙&#xff0c;扩大窗户的面积&#xff0c;让阳光直接穿过阳台照射到室内。同时&#xff0c;也可以考虑在某些没…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站