《CSS 简易速速上手小册》第1章:CSS 基础入门(2024 最新版)

在这里插入图片描述

文章目录

  • 1.1 CSS 语法和选择器:挑选你的画笔
    • 1.1.1 基础知识
    • 1.1.2 重点案例:创建一个响应式导航菜单
    • 1.1.3 拓展案例 1:为特定链接添加图标
    • 1.1.4 拓展案例 2:创建一个简单的问答折叠面板
  • 1.2 盒模型的基础:构建你的乐高城堡
    • 1.2.1 基础知识
    • 1.2.2 重点案例:创建一个卡片布局
    • 1.2.3 拓展案例 1:垂直居中一个元素
    • 1.2.4 拓展案例 2:创建带有内边距和外边距的流式布局
  • 1.3 级联、继承和特异性:谁是场上的老大
    • 1.3.1 基础知识
    • 1.3.2 重点案例:个性化按钮样式
    • 1.3.3 拓展案例 1:解决样式冲突
    • 1.3.4 拓展案例 2:利用继承简化 CSS

1.1 CSS 语法和选择器:挑选你的画笔

在 CSS 的世界里,语法和选择器是你用来创造和实现想象中的设计的基本工具。理解它们,就像是学会了掌握画笔,能让你在网页这幅画布上自由地挥洒。

1.1.1 基础知识

  • CSS 语法:CSS 的基本结构由选择器和声明块组成。选择器用于指定我们要样式化的 HTML 元素,而声明块则包含了一个或多个声明,用大括号 {} 包围。每个声明由一个属性和一个值组成,属性和值之间用冒号 : 分隔,多个声明之间用分号 ; 分隔。例如:
p {color: red;font-size: 16px;
}
  • 类型选择器:直接通过标签名来选择元素,如 pdivh1 等。
  • 类选择器:通过元素的 class 属性值来选择元素,前面加点 . 表示,如 .classname
  • ID 选择器:通过元素的 id 属性值来选择元素,前面加 # 表示,如 #idname
  • 属性选择器:根据元素的属性及属性值来选择元素,如 [type="text"]
  • 伪类选择器:用于定义元素的特殊状态,如 :hover:focus 等。
  • 伪元素选择器:用于样式化元素的特定部分,如 ::before::after

1.1.2 重点案例:创建一个响应式导航菜单

想象你正在为一个网站设计导航栏。你需要一个横向布局的导航菜单,当用户鼠标悬停时,菜单项的背景色变化,并且在小屏幕设备上自动转换为纵向布局。

  • HTML 结构
<nav class="navbar"><a href="#" class="nav-item">首页</a><a href="#" class="nav-item">关于我们</a><a href="#" class="nav-item">服务</a><a href="#" class="nav-item">联系方式</a>
</nav>
  • CSS 样式
.navbar {display: flex;justify-content: space-around;background-color: #333;
}.nav-item {color: white;text-decoration: none;padding: 15px 20px;
}.nav-item:hover {background-color: #ddd;color: black;
}@media (max-width: 600px) {.navbar {flex-direction: column;}
}

在这个案例中,我们使用类选择器 .navbar.nav-item 来样式化导航栏和菜单项。伪类选择器 :hover 用于定义鼠标悬停状态,而媒体查询 @media 用于在屏幕宽度小于 600px 时改变导航栏的布局。

1.1.3 拓展案例 1:为特定链接添加图标

假设你想为所有指向外部链接的 a 标签自动添加一个外链图标,提示用户这将打开一个新窗口。

  • CSS 样式
a[href^="http"]:not([href*="yourwebsite.com"])::after {content: "⇗";padding-left: 5px;
}

这里我们使用属性选择器 a[href^="http"] 来选择所有 href 属性值以 “http” 开头的 a 标签,且通过 :not([href*="yourwebsite.com"]) 排除了指向你自己网站的链接。伪元素 ::after 用于在

这些链接文本之后添加一个上箭头图标。

1.1.4 拓展案例 2:创建一个简单的问答折叠面板

想要在常见问题(FAQ)页面上实现一个简单的折叠效果,当点击问题时,相应的答案可以展开或隐藏。

  • HTML 结构
<div class="faq-item"><h2 class="faq-question">什么是 CSS ?</h2><p class="faq-answer">CSS 是用于样式化网页的语言。</p>
</div>
  • CSS 样式
.faq-answer {display: none;
}.faq-question:hover + .faq-answer {display: block;
}

在这个案例中,我们使用 :hover 伪类选择器来实现当鼠标悬停在问题上时显示答案。这是一个简单的实现方式,展示了选择器和伪类如何用于创建交互式元素。

通过这些案例,我们可以看到 CSS 选择器和语法的强大之处,它们让我们能够以几乎无限的方式来创造和控制网页的每个细节。继续实验,挑战自己,很快你就会发现自己能够轻松地将任何设计想法转化为现实。

在这里插入图片描述


1.2 盒模型的基础:构建你的乐高城堡

CSS 盒模型是网页布局的基石,理解它就像是掌握了搭建任何结构的乐高积木。每个元素都被视为一个盒子,这个盒子包括了内容(content)、内边距(padding)、边框(border)、和外边距(margin)。掌握盒模型意味着你可以精确地控制元素的大小、间距以及它们之间的关系。

1.2.1 基础知识

  • 内容(Content):这是盒子的主体部分,包括文本和图片等。
  • 内边距(Padding):内容与边框之间的空间。
  • 边框(Border):围绕内边距和内容的边线。
  • 外边距(Margin):盒子与其他盒子之间的空间。

重要属性:

  • box-sizing:控制盒模型的计算方式。默认为 content-box,表示盒子的宽高只包括内容区域;设为 border-box 时,盒子的宽高还包括了边框和内边距。

1.2.2 重点案例:创建一个卡片布局

假设你需要为一个网站创建一个简单的卡片布局,每个卡片显示一篇文章的概览,包括一个图片、标题和简介。

  • HTML 结构
<div class="card"><img src="thumbnail.jpg" alt="Article Thumbnail" class="card-img"><h3 class="card-title">文章标题</h3><p class="card-desc">这是一篇非常有趣的文章。</p>
</div>
  • CSS 样式
.card {box-sizing: border-box;width: 300px;border: 1px solid #ccc;padding: 20px;margin: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);
}.card-img {width: 100%;margin-bottom: 15px;
}.card-title, .card-desc {margin: 0 0 10px 0;
}

这个案例展示了如何使用盒模型的各个部分来创建一个有吸引力的卡片布局。box-sizing: border-box; 确保了元素的宽度包含了内容、内边距和边框,这样可以更容易地控制卡片的总体大小。

1.2.3 拓展案例 1:垂直居中一个元素

垂直居中是一个常见的布局需求。使用盒模型的特性,我们可以轻松实现这一点,特别是当我们不知道内容的具体高度时。

  • HTML 结构
<div class="centered-container"><p class="centered-content">我是垂直居中的内容!</p>
</div>
  • CSS 样式
.centered-container {display: flex;height: 200px;align-items: center;justify-content: center;
}.centered-content {padding: 20px;background-color: lightgrey;
}

通过使用 Flexbox(一个 CSS3 的布局模式),我们可以很容易地实现垂直和水平居中,而盒模型的 paddingbackground-color 属性让内容更加突出。

1.2.4 拓展案例 2:创建带有内边距和外边距的流式布局

流式布局是响应式设计的关键元素,允许内容随着浏览器窗口的大小变化而自适应。

  • HTML 结构
<div class="container"><div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div>
</div>
  • CSS 样式
.container {display: flex;flex-wrap: wrap;
}.box {flex: 1;min-width: 100px;margin: 10px;padding: 20px;background-color: lightcoral;
}

在这个案例中,.container 使用了 Flexbox 的 flex-wrap: wrap; 属性,使得 .box 元素可以在容器宽度不足以并排显示所有元素时自动换行。每个 .boxmarginpadding,确保了内容的可读性和美观。

通过这些案例,我们可以看到盒模型是如何在实际的网页布局中发挥作用的。无论是创建卡片布局、实现元素的居中,还是设计响应式的流式布局,掌握盒模型都是实现这些布局的关键。练习和实验这些案例,让你更加熟悉盒模型的各个方面,为构建更复杂的布局打下坚实的基础。

在这里插入图片描述


1.3 级联、继承和特异性:谁是场上的老大

在 CSS 的世界里,了解级联(Cascading)、继承(Inheritance)和特异性(Specificity)的规则至关重要,因为它们决定了哪些样式将被应用到你的网页元素上。这些规则就像是网页设计的游戏规则,掌握了它们,你就能成为场上的老大。

1.3.1 基础知识

  • 级联(Cascading):CSS 的全称是“Cascading Style Sheets”,其中“Cascading”指的是多个样式表的样式可以叠加应用,而最终样式的决定遵循一定的优先级规则。
  • 继承(Inheritance):某些 CSS 属性会从父元素继承到子元素,例如字体和颜色,这意味着你不需要在每个元素上重复相同的样式声明。
  • 特异性(Specificity):当多条规则应用于同一个元素时,CSS 通过特异性来决定使用哪条规则。特异性是通过计算选择器类型来决定的,通常:内联样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器。

1.3.2 重点案例:个性化按钮样式

假设你在设计一个网站,需要为不同的按钮应用基础样式和个性化样式。

  • HTML 结构
<button class="btn">普通按钮</button>
<button class="btn btn-primary">主要按钮</button>
  • CSS 样式
/* 基础按钮样式 */
.btn {padding: 10px 20px;border: 1px solid transparent;background-color: #f0f0f0;color: #333;
}/* 主要按钮样式 */
.btn-primary {background-color: #007bff;color: #fff;
}/* 悬停状态 */
.btn:hover {opacity: 0.8;
}

在这个案例中,.btn.btn-primary 类定义了按钮的基础和主要样式。由于 .btn-primary 有更高的特异性(同为类选择器,但它是直接应用于目标元素),它的样式会覆盖 .btn 的同名属性。悬停状态的样式通过伪类 :hover 添加,展示了级联的概念,即后来的规则可以增强或覆盖之前的规则。

1.3.3 拓展案例 1:解决样式冲突

在一个大型项目中,你可能遇到由于不同 CSS 文件中的规则冲突导致的样式问题。

  • HTML 结构
<p class="text-warning">警告信息</p>
  • CSS 样式
/* 来自第一个样式表 */
.text-warning {color: yellow;
}/* 来自第二个样式表 */
.text-warning {color: red;
}

为了解决这个冲突,你可以使用特异性原则,通过增加选择器的特异性来确保正确的样式被应用:

body .text-warning {color: red;
}

通过前置 body,增加了规则的特异性,确保文本显示为红色。

1.3.4 拓展案例 2:利用继承简化 CSS

设想你需要设置一个页面的基础字体样式,你不想在每个文本元素上重复设置字体样式。

  • HTML 结构
<div class="content"><p>这是一段示例文本。</p><p>这是另一段示例文本。</p>
</div>
```- **CSS 样式**:```css
.content {font-family: 'Arial', sans-serif;color: #333;
}

在这个案例中,.content 的字体和颜色样式会被它的所有子元素继承,这样你就不需要在每个 <p> 标签上单独设置字体和颜色了,展示了继承的强大用处。

通过这些案例,你可以看到级联、继承和特异性在 CSS 设计中的实际应用。掌握这些概念,可以帮助你更有效地解决样式冲突,优化你的 CSS 代码,并确保你的网页看起来正如你所期望的那样。练习这些案例,让自己成为掌控 CSS 规则的大师。

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

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

相关文章

Redis -- 渐进式遍历

家&#xff0c;是心的方向。不论走多远&#xff0c;总有一盏灯为你留着。桌上的碗筷多了几双&#xff0c;笑声也多了几分温暖。家人团聚&#xff0c;是最美的风景线。时间&#xff1a;2024年 2月 8日 12:51:20 目录 前言 语法 示例 前言 试想一个场景,那就是在key非常多的…

【docker】docker-compose.yml 语法详解

文章目录 一、相关文章二、基本概念三、Docker Compose语法介绍1、version2、Servicesimagebuildportsnetworksvolumesenvironmentdeploydepends\_oncommandrestart 3、networks 使用docker 网络驱动类型 4、volumes 使用 四、和环境变量文件.env结合使用五、使用示例1、基本使…

STL演讲比赛流程管理系统

很难,一边看视频&#xff0c;一边思考了好多天 speaker.h #pragma once//防止头文件重复包含 #include<iostream> using namespace std;//设计选手类 class Speaker{public:string m_Name;//姓名 double m_Score[2];//double带了浮点,防止重复 2代表可能有人是两轮…

字节跳动官方出品AI,白嫖使用GPT4!

关注我&#xff0c;紧跟本系列专栏文章&#xff0c;咱们下篇再续&#xff01; 作者简介&#xff1a;魔都技术专家兼架构&#xff0c;多家大厂后端一线研发经验&#xff0c;各大技术社区头部专家博主&#xff0c;编程严选网创始人。具有丰富的引领团队经验&#xff0c;深厚业务架…

《CSS 简易速速上手小册》第8章:CSS 性能优化和可访问性(2024 最新版)

文章目录 8.1 CSS 文件的组织和管理8.1.1 基础知识8.1.2 重点案例&#xff1a;项目样式表结构8.1.3 拓展案例 1&#xff1a;使用BEM命名规范8.1.4 拓展案例 2&#xff1a;利用 Sass 混入创建响应式工具类 8.2 提高网页加载速度的技巧8.2.1 基础知识8.2.2 重点案例&#xff1a;图…

alist基本用法@文档阅读@挂载网盘@网盘webdav挂载

文章目录 alist官网alist网站风格说明alist软件版本 安装和启动使用必看文档&#x1f47a;alist for android版本启动alist网页挂载阿里云盘open获取阿里云令牌 主页检查挂载情况 常用页面以配置挂载列表管理配置页面 FAQ可能遇到的错误检查服务重启前后alist的动作(自动挂载)a…

django中实现观察者模式

在Django中实现观察者模式&#xff0c;你可以利用Django的信号&#xff08;Signals&#xff09;系统。Django的信号提供了一种发布/订阅模型&#xff0c;允许解耦应用程序组件之间的交互。一个组件可以发送一个信号&#xff0c;而其他组件可以监听这个信号并响应它。 下面是如…

Google刚刚推出了图神经网络Tensorflow-GNN

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Vue源码系列讲解——虚拟DOM篇【四】(优化更新子节点)

目录 1. 前言 2. 优化策略介绍 3. 新前与旧前 4. 新后与旧后 5. 新后与旧前 6. 新前与旧后 7. 回到源码 8. 总结 1. 前言 在上一篇文章中&#xff0c;我们介绍了当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时&#xff0c;Vue对子节点是 先外层循环newChil…

最佳视频转换器软件:2024年视频格式转换的选择

我们生活在一个充满数字视频的世界&#xff0c;但提供的内容远不止您最喜欢的流媒体服务目录。虽然我们深受喜爱的设备在播放各种自制和下载的视频文件方面变得越来越好&#xff0c;但在很多情况下您都需要从一种格式转换为另一种格式。 经过大量测试&#xff0c; 我们尝试过…

Tiny Http源码解析

相关概念 源码 HTTP CGI getsockname() 函数说明 accept_request: 处理从套接字上监听到的一个 HTTP 请求&#xff0c;在这里可以很大一部分地体现服务器处理请求流程。bad_request: 返回给客户端这是个错误请求&#xff0c;HTTP 状态吗 400 BAD REQUEST.cat: 读取服务器上某…

《CSS 简易速速上手小册》第5章:CSS 动画与过渡(2024 最新版)

文章目录 5.1 CSS 过渡基础&#xff1a;网页的微妙舞步5.1.1 基础知识5.1.2 重点案例&#xff1a;按钮悬停效果5.1.3 拓展案例 1&#xff1a;渐变显示导航菜单5.1.4 拓展案例 2&#xff1a;动态调整元素大小 5.2 关键帧动画&#xff1a;编排你的网页芭蕾5.2.1 基础知识5.2.2 重…

ctfshow-web21~28-WP

爆破(21-28) web21 题目给了一个zip文件,打开后解压是爆破的字典,我们抓包一下网址看看 发现账号和密码都被base64了,我们发送到intruder模块,给爆破的位置加上$符圈住 去base64解码一下看看格式

golang常用库之-操作数据库ORM:GORM 包介绍 | 一些 GORM 提示和注意事项

文章目录 golang操作数据库ORM&#xff1a;GORM 包介绍及实战一、什么是GORM 包二、GORM基本使用官方快速开始demo 一些 GORM 提示和注意事项 参考 golang操作数据库ORM&#xff1a;GORM 包介绍及实战 一、什么是GORM 包 官网&#xff1a;https://gorm.io/ github&#xff1a…

【PyQt】09-控件提示信息、Lable标签

文章目录 前言一、控件提示信息1.1 代码1.2 解释 < b >在HTML标签中的作用1.3 添加按键后的代码运行结果 二、QLabel控件介绍2.1 内容2.2 常用的事件2.3 代码结果展示 总结 前言 1、控件提示信息 2、QLabel控件介绍 一、控件提示信息 关键点在于 效果如图所示&#x…

VR和AR傻傻分不清,一句话给你讲明白。

不说废话&#xff0c;直接说结论&#xff0c;虚拟现实&#xff08;Virtual Reality&#xff0c;VR&#xff09;和增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;。如果现实是A&#xff0c;虚拟是B&#xff0c;那么VRB&#xff0c;ARAB&#xff0c;就这简单&…

大模型实战营第二期——3. 基于 InternLM 和 LangChain 搭建你的知识库

github地址&#xff1a;InternLM/tutorial-书生浦语大模型实战营文档地址&#xff1a;基于 InternLM 和 LangChain 搭建你的知识库视频地址&#xff1a;基于 InternLM 和 LangChain 搭建你的知识库Intern Studio: https://studio.intern-ai.org.cn/console/instance动手学大模型…

2-8 单链表+双链表+模拟栈+模拟队列

今天给大家用数组来实现链表栈和队列 单链表&#xff1a; 首先要明白是如何用数组实现&#xff0c; 在这里需要用到几个数组&#xff0c;head表示头节点的下标&#xff0c;e[i]表示表示下标为i的值&#xff0c;ne[i]表示当前节点下一个节点的下标。idx表示当前已经用到那个点…

HTTP 协议在互联网中的作用是什么?

首先&#xff0c;HTTP 协议是互联网上应用最为广泛的一种网络协议。它被设计为无状态的&#xff0c;意味着服务器不会为每个请求保持状态。HTTP 协议的请求方法有 GET、POST、PUT、DELETE 等&#xff0c;分别对应着不同的操作。例如&#xff0c;GET 方法用于请求数据&#xff0…

Git的基础操作指令

目录 1 前言 2 指令 2.1 git init 2.2 touch xxx 2.3 git status 2.4 git add xxx 2.5 git commit -m xxxx 2.5 git log及git log --prettyoneline --all --graph --abbrev-commit 2.6 rm xxx 2.7 git reset --hard xxx(含小技巧) 2.8 git reflog 2.9 mv xxx yyy 1…