【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

在这里插入图片描述

欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。

1. 什么是CSS

CSS,即层叠样式表(Cascading Style Sheets),是一种用于控制网页样式和布局的标记语言。它与HTML结合使用,通过为HTML元素添加样式,可以改变元素的外观和布局。CSS使用选择器和属性来定义样式规则,让我们能够以一种简洁和灵活的方式控制网页的外观。

2. 为什么要使用CSS

使用CSS有以下几个重要的原因:

a. 分离样式和内容: 使用CSS可以将样式与内容分离,使得网页结构更清晰,易于维护。通过将样式定义在单独的CSS文件中,我们可以在不改变HTML结构的情况下修改样式,提高开发效率。

b. 统一风格和布局: CSS提供了一致的样式和布局规则,可以确保网站在不同浏览器和设备上呈现一致的外观。通过定义全局样式,我们可以轻松实现网站的整体风格和布局。

c. 提高可访问性: 使用CSS可以改善网站的可访问性。通过使用适当的标记和样式,我们可以使网站内容更易读,更易于导航,并提供更好的用户体验。

d. 增强用户体验: CSS提供了丰富的样式效果和交互特性,可以为用户提供更好的视觉体验。通过添加动画、过渡和响应式布局,我们可以使网站更具吸引力和互动性。

3. CSS的语法

CSS的基本语法由选择器和声明块组成。选择器用于选择要应用样式的HTML元素,而声明块则包含了一系列的样式声明。

以下是一个简单的CSS规则的示例:

h1 {color: blue;font-size: 24px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-blU0U9gt-1687925268908)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628103111628.png)]

在上面的示例中,h1是选择器,表示选择所有<h1>标签。大括号内的部分是声明块,其中包含两个样式声明,分别设置了文本颜色和字体大小。

4. 如何插入CSS

有多种方式可以将CSS样式应用到HTML文档中:

a. 内联样式: 可以在HTML元素的style属性中直接定义CSS样式。例如:

<h1 style="color: blue; font-size: 24px;">Hello, CSS!</h1>

b. 嵌入样式: 可以在HTML文档的<head>标签内使用<style>标签来嵌入CSS样式。例如:

<head><style>h1 {color: blue;font-size: 24px;}</style>
</head>
<body><h1>Hello, CSS!</h1>
</body>

c. 外部样式表: 可以将CSS样式定义在外部的CSS文件中,并通过<link>标签将其引入到HTML文档中。例如:

<head><link rel="stylesheet" href="styles.css">
</head>
<body><h1>Hello, let's study CSS!</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9TbanXC-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628111652108.png)]

5. CSS的基本概念

在使用CSS时,有一些基本概念需要了解:

a. 选择器: 选择器用于选择要应用样式的HTML元素。常见的选择器有元素选择器、类选择器、ID选择器、属性选择器等。

b. 属性和值: CSS样式规则由属性和对应的值组成。属性描述了要设置的样式特性,而值定义了属性的具体设置。

c. 盒模型: 盒模型是CSS中用于描述元素布局和尺寸的概念。它由内容区域、内边距、边框和外边距组成。

d. 流动性和定位: CSS提供了不同的布局方式,如流动布局、浮动布局和定位布局,可以控制元素在页面上的位置和排列方式。

6. CSS选择器

选择器是CSS中用于选择要应用样式的HTML元素的一种模式。常见的选择器包括:

a. 元素选择器: 通过HTML元素的标签名选择元素。例如,h1选择所有<h1>标签。

b. 类选择器: 通过元素的类名选择元素。类选择器以.开头,例如,.my-class选择所有具有my-class类的元素。

c. ID选择器: 通过元素的ID选择元素。ID选择器以#开头,例如,#my-id选择具有my-id ID的元素。

d. 属性选择器: 通过元素的属性选择元素。例如,[type="text"]选择所有type属性为text的元素。

还有许多其他类型的选择器,包括后代选择器、子元素选择器、相邻兄弟选择器等,它们提供了更多灵活的选择元素的方式。

7. CSS选择器的优先级

当多个CSS规则同时应用到同一个元素时,可能会出现冲突。为了解决这种冲突,CSS使用选择器的优先级来确定哪个规则将被应用。

选择器的优先级由四个部分组成,按重要性依次为:

a. 内联样式: 内联样式的优先级最高,即在HTML元素的style属性中直接指定的样式。

b. ID选择器: ID选择器具有较高的优先级,即通过元素的ID选择元素的样式。

使用自定义名称,以 # 作为前缀,然后通过HTML标签的id属性进行名称匹配

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p {color: red;font-size: 20px;}h2 {color: green;}.hello {background: purple;}.world {font-weight: bold;}#haha {color: blue;}</style>
</head><body><p>hello world!</p><h2>WEB前端开发</h2><h3>Nodejs开发</h3><hr><p class="hello">welcome to css!</p><div class="hello">程序员小豪</div><div class="world">test</div><hr><h1 id="haha">23333</h1>
</body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwMFBCgR-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628113426689.png)]

c. 类选择器、属性选择器和伪类选择器: 类选择器和属性选择器的优先级相同,它们较低于ID选择器。

伪类选择器根据不同的状态显示不同的样式,有四种类型:

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上,即移动在连接上
  • :active 选定的链接,被激活
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>伪类选择器</title><style>a:link,a:visited {color: green;font-size: 13px;text-decoration: none;}a:hover,a:active {color: pink;text-decoration: underline;}/*普通的标签也可以使用伪类选择器*/p:hover {color: yellow;}p:active {color: red;}</style>
</head><body><a href="1.html">go!CSS!</a><p>CSS零基础入门</p>
</body></html>

在这里插入图片描述

d. 元素选择器、伪元素选择器和通用选择器: 元素选择器和通用选择器的优先级最低,它们适用于所有元素。

下面是常用的伪元素选择器

  • :first-letter 为第一个字符的样式
  • :first-line 为第一行添加样式
  • :before 在元素内容的最前面添加的内容,需要配合content属性使用
  • :after 在元素内容的最后面添加的内容,需要配合content属性使用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>p:first-letter {color: blue;font-size: 30px;}p:first-line {background: green;}p:before {content: "额额";}p:after {content: "嗯嗯";}</style>
</head><body><p>test test</p><hr><p>gogogogo <br>come on css!</p>
</body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h52EzjEO-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628115728816.png)]

e. !important: 可以使用!important使某个样式有最高的优先级

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="style/world.css"><style>div {font-size: 20px;}.hello {font-weight: bold;color: black !important;}#world {text-decoration: underline;color: green;}p {color: red;}</style>
</head><body><div class="hello" id="world" style="color:#4190f7">CSS零基础入门</div><p>程序员小豪</p>
</body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jXcGyojY-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628113126102.png)]

通过合理使用选择器和避免过度使用内联样式,可以更好地控制样式的优先级。

CSS权重

这里先介绍一下负责选择器:

  1. 复合选择器(Compound Selector):复合选择器是由多个简单选择器组合而成的选择器。它们通过在选择器之间没有空格或其他符号来组合。复合选择器可以用来选择同时满足多个条件的元素。

    .container.main {/* 样式规则 */
    }
    

    在上面的例子中,.container.main是一个复合选择器,它同时选择具有container类和main类的元素。

  2. 组合选择器(Combinator Selector):组合选择器通过使用不同的符号和空格来定义选择器之间的关系。组合选择器用于选择满足特定关系的元素。

    • 后代选择器(Descendant Selector):使用空格选择元素的后代。

      .container .item {/* 样式规则 */
      }
      

      上面的例子中,.container .item是后代选择器,它选择.container元素内的所有.item元素。

    • 子元素选择器(Child Selector):使用>选择直接子元素。

      .container > .item {/* 样式规则 */
      }
      

      这个选择器选择.container元素下作为直接子元素的所有.item元素。

    • 相邻兄弟选择器(Adjacent Sibling Selector):使用+选择紧接在另一个元素后的兄弟元素。

      .sibling + .target {/* 样式规则 */
      }
      

      这个选择器选择.target元素,它紧接在.sibling元素后面。

    • 通用兄弟选择器(General Sibling Selector):使用~选择与另一个元素具有相同父元素的兄弟元素。

      .sibling ~ .target {/* 样式规则 */
      }
      

      这个选择器选择.target元素,它与.sibling元素有相同的父元素,并且在.sibling元素之后。

  3. 嵌套选择器(Nested Selector):嵌套选择器是一种将一个选择器嵌套在另一个选择器内部的方法,用于选择具有特定关系的元素。嵌套选择器使用较高的可读性和维护性,可以减少选择器的复杂性。

    .container {/* 样式规则 */.item {/* 样式规则 */}
    }
    

下面是css选择器权重图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0chJmK2F-1687925268911)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628112250182.png)]

我们可以按照权重图去计算样式的权重

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KusA1Y5V-1687925268911)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628112658161.png)]

8. 总结

本篇博客介绍了CSS的基本概念和选择器。我们了解到CSS是一种用于控制网页样式和布局的语言,通过选择器和属性,我们可以为HTML元素添加各种样式。

我们学习了CSS的语法,包括选择器和声明块的组成,以及如何插入CSS样式到HTML文档中。我们还了解了CSS的基本概念,如盒模型和布局方式。

最后,我们深入研究了CSS选择器,包括常见的选择器类型和优先级的概念。

通过掌握这些基础知识,你已经迈出了成为CSS专家的第一步。在接下来的学习中,我们将深入学习如何设置颜色、字体、边框和背景等常用样式属性,为网页添加更多的视觉效果。

请大家继续关注我,下一期我们会探索更多关于CSS样式属性的精彩内容!如有任何问题,请随时提问。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构OJ题】链表带环问题

目录 1.判断链表是否带环 证明 2.寻找环的入口点 1.判断链表是否带环 原题链接&#xff1a;力扣 思路一&#xff1a;先遍历一遍链表&#xff0c;计算出链表的长度&#xff0c;然后将长度除二&#xff0c;在遍历半个链表即可。但是这种方法效率比较低。 思路二&#xff1a;…

学习一波Java语言中的优先队列 PriorityQueue

目录 一、什么是优先队列 二、PriorityQueue 如何使用 三、优先队列的使用场景 一、什么是优先队列 优先队列是一种特殊的队列数据结构&#xff0c;它根据元素的优先级来确定元素的顺序。与普通队列不同的是&#xff0c;优先队列中的元素并不按照插入的先后顺序进行排列&am…

线性代数基础--向量

目录 向量的概念 基本概念 抽象概念 向量的意义 几何意义 物理意义 欧式空间 特点和性质 行向量与列向量 行向量 列向量 两者的关系 向量的基本运算与范数 向量的基本运算 向量的加法 数乘运算&#xff08;实数与向量相乘&#xff09; 转置 向量的范数 向量…

恒生电子联合恒生聚源发布数智金融新品,聚焦大模型技术金融业务应用

6月28日&#xff0c;恒生电子和旗下子公司恒生聚源正式发布基于大语言模型技术打造的数智金融新品&#xff0c;金融智能助手光子和全新升级的智能投研平台WarrenQ。此外&#xff0c;恒生电子金融行业大模型LightGPT也首次对外亮相&#xff0c;并公布最新研发进展。 恒生电子董…

线性代数高级--矩阵的秩--SVD分解定义--SVD分解的应用

目录 矩阵的秩 概念 k阶子式 矩阵的秩的定义 矩阵的秩的性质 SVD分解 概念 注意 SVD的分解过程 SVD分解的应用 矩阵的秩 概念 矩阵的秩是线性代数中的一个重要概念&#xff0c;用于描述矩阵的行&#xff08;或列&#xff09;向量的线性无关程度。矩阵的秩可以通过…

git的基础总结

写在前面&#xff1a; 前天搞了个面试&#xff0c;发现好多都是会使用&#xff0c;但是要我说&#xff0c;难得说出来&#xff0c;现在对基础进行巩固总结。其实我感觉要求背出来一样的没必要吧&#xff0c;ide基本上可视化了会用就行吧。 文章目录 介绍git的状态 使用/安装/…

编程语言的优劣评选标准与未来发展趋势——探索最佳编程语言选择

编程语言的优劣评选标准与未来发展趋势——探索最佳编程语言选择 评判标准不同编程语言的优点与缺点分析对编程语言未来发展的猜测和未来趋势 &#x1f495; &#x1f495; &#x1f495; 博主个人主页&#xff1a; 汴京城下君–野生程序员&#x1f495; &#x1f495; &#x…

耳挂式骨传导耳机哪个牌子好,分享几个品牌的骨传导耳机

骨传导耳机就是利用震动来传递声音的耳机&#xff0c;在运动时佩戴骨传导耳机&#xff0c;可以听歌也能听周围的声音&#xff0c;提高了运动时的安全性。目前市面上的骨传导耳机也是琳琅满目。今天就来给大家分享下目前市面上比较常见的几款骨传导耳机。希望对正在选购骨传导耳…

基于深度学习的高精度水果检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度水果&#xff08;苹果、香蕉、葡萄、橘子、菠萝和西瓜&#xff09;检测识别系统可用于日常生活中或野外来检测与定位水果目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的水果目标检测识别&#xff0c;另外支持结果可视…

【论文精读】《Classifying User Activities in the Encrypted WeChat Traffic》

Classifying User Activities in the Encrypted WeChat Traffic Authors:Chengshang Hou,Junzheng Shi,Cuicui Kang,Zigang Cao,Xiong Gang Journal:2018 IEEE 37th International Performance Computing and Communications Conference (IPCCC) (2018) 摘要 加密移动应用程序…

社区团购小程序怎么制作

社区团购小程序开发&#xff0c;有什么功能 商品管理&#xff1a;社区团购小程序提供商品管理功能&#xff0c;可以方便地添加、编辑和删除商品信息。你可以设置商品的价格、库存、规格等&#xff0c;并上传商品的图片和描述&#xff0c;以吸引用户关注。 配送管理&#xff1…

【③MySQL 数据查询】:提高查询的效率

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL数据查询的讲解&#xff08;基本、分组、排序、聚合、分页、条件查询&#xff09; 目录 前言一、基本查询二、条件查询三、聚合函数(统计函数)四、分组查询五、排序查询五、分页查询六、总结 一、基本查询 MySQ…