当前位置: 首页 > news >正文

3、Web前端学习规划:CSS - 学习规划系列文章

       CSS作为Web前端开发的第2种重要的语言,笔者建议在学了HTML之后进行。CSS主要是对于HTML做一个渲染,其也带了一些语言语法函数,功能也非常强大。

  1、 简介;

  CSS(层叠样式表)是一种用于描述网页样式的语言。它可以控制网页中的字体、颜色、布局、背景等方面的样式。CSS可以与HTML和JavaScript一起使用,使网页更加美观和易于阅读。CSS还有许多高级功能,如响应式设计、动画效果、网格布局等。它是Web开发中不可或缺的一部分,可以帮助开发人员创建出更加美观和功能强大的网页。

  2、 语法;

  CSS的基本语法包括选择器、属性和值。选择器用于选择要应用样式的HTML元素,属性用于指定要更改的样式,值用于指定属性的具体设置。例如,以下代码将更改所有段落的颜色为红色:

  p { color: red; }

  CSS还支持层叠和继承。层叠是指多个样式规则应用于同一元素时,它们将按照特定的优先级顺序进行组合。继承是指子元素可以继承其父元素的某些样式属性。

  3、 框架;

  l  CSS框架是一种用于快速构建网站和应用程序的工具,它提供了一系列预定义的样式和组件,使开发者可以更快速、更高效地创建网站和应用程序。以下是一个常用的CSS框架介绍:

  l  Bootstrap:Bootstrap是一个流行的CSS框架,由Twitter开发。它提供了一系列响应式网格系统、UI组件和JavaScript插件,使开发者可以快速构建现代化的网站和应用程序。Bootstrap还提供了大量的文档和示例,使开发者可以更容易地学习和使用它。

  l  Foundation:Foundation是另一个流行的CSS框架,由ZURB开发。它提供了一系列响应式网格系统、UI组件和JavaScript插件,使开发者可以快速构建现代化的网站和应用程序。Foundation还提供了大量的文档和示例,使开发者可以更容易地学习和使用它。

  l  Semantic UI:Semantic UI是一个基于语义化的CSS框架,它提供了一系列响应式网格系统、UI组件和JavaScript插件,使开发者可以快速构建现代化的网站和应用程序。

  4、 使用的工具;

  CSS的开发工具,目前仍然以前端开发工具VS Code为主,里面提供了CSS的提示和开发的提醒。其它的工具也有,但是目前笔者推荐的还是这个,具体的工具在其它的博文中等笔者总结后再另写。

  5、 网站;

  学习CSS的网站有不少,下面列举一些:

       runoob.com

       http://www.w3cschool.cc/

       笔者认为这些网站学习一些基本的语法等,然后再下载笔者共享的电子书籍去学习记忆即可。

  6、 学习建议;

  l  先学习CSS基础知识,包括CSS语法、选择器、盒模型、布局等基本概念。

  l  掌握CSS常用属性,如颜色、字体、背景、边框、定位等。

  l  学习CSS动画和过渡效果,包括CSS3动画、过渡、变形等。

  l  学习CSS预处理器,如Sass、Less等,提高CSS编写效率。

  l  学习CSS框架,如Bootstrap、Foundation等,快速搭建网站。

  l  学习响应式设计,掌握媒体查询、弹性布局等技术,使网站适应不同设备。

  l  学习CSS模块化,如BEM、SMACSS等,提高代码可维护性。

  l  学习CSS优化,如压缩、合并、缓存等技术,提高网站性能。

  7、 总结;

  CSS的学习,笔者认为先去网址学习基本的语法,然后再进行学习一些案例进行。后面根据项目需要进行总结和复用代码即可。

  下面提供笔者的一个博文,对于学习者提供的电子书籍能够查看,能够更快的学到该知识:https://www.cnblogs.com/lzhdim/p/4604031.html

相关文章:

3、Web前端学习规划:CSS - 学习规划系列文章

CSS作为Web前端开发的第2种重要的语言,笔者建议在学了HTML之后进行。CSS主要是对于HTML做一个渲染,其也带了一些语言语法函数,功能也非常强大。 1、 简介; CSS(层叠样式表)是一种用于描述网页样式的语言。它可以控制网页中的字体、…...

城市轨道交通列车时刻表优化问题【最优题解】

文章目录城市轨道交通列车时刻表优化问题思路文章底部城市轨道交通列车时刻表优化问题 最新进度在文章最下方卡片,加入获取思路数据代码论文:2023十三届MathorCup交流 (第一时间在CSDN分享,文章底部) 题目为数据分析类题目。列车时刻表优化…...

常年不卷,按时下班,工作能力强,同事求助知无不言,不扯皮,不拉帮结派,这样的职场清流竟然被裁掉了!...

在职场上,你永远想不到什么样的员工会被优化,比如下面这位:常年不卷,按时下班,工作很专业,同事问什么都回答,不扯皮,不拉帮结派,简直是职场清流。在上个月竟然被优化了&a…...

基于改进多目标灰狼优化算法的考虑V2G技术的风、光、荷、储微网多目标日前优化调度研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

Python 函数、文件与模块

“探索 Python” 这一系列的前几篇文章已为 Python 编程新手介绍了几方面的主题,包括变量、容器对象和复合语句。本文以这些概念为基础,构造一个完整的 Python 程序。引入了 Python 函数和模块,并展示了构建一个 Python 程序、将其存储在文件…...

在Spring Boot微服务使用RedisTemplate操作Redis

记录:400 场景:在Spring Boot微服务使用RedisTemplate操作Redis缓存和队列。 使用ValueOperations操作Redis String字符串;使用ListOperations操作Redis List列表,使用HashOperations操作Redis Hash哈希散列,使用SetO…...

4月软件测试面试太难,吃透这份软件测试面试笔记后,成功跳槽涨薪30K

4 月开始,生活工作渐渐步入正轨,但金三银四却没有往年顺利。昨天跟一位高级架构师的前辈聊天时,聊到今年的面试。有两个感受,一个是今年面邀的次数比往年要低不少,再一个就是很多面试者准备明显不足。不少候选人能力其…...

人人拥有ChatGPT的时代来临了,这次微软很大方!

技术迭代的在一段时间内是均匀发展甚至止步不前的,但在某段时间内会指数级别的爆发。 ChatGPT背后的GPT 3.5训练据说花了几百万美金外加几个月的时间,参数大概有1700多亿。 这对于绝大多数的个人或企业来说绝对是太过昂贵的。 然而,微软&am…...

【C++11】自动类型推导(Type Inference)

C11 中的自动类型推导是通过 auto 关键字实现的。auto 关键字可以用于声明变量,让编译器自动推导变量的类型。具体来说,编译器会根据变量的初始化表达式来推导变量的类型。 例如,下面的代码中,变量 x 的类型会被推导为 int 类型&…...

拐点!智能座舱破局2023

“这是我们看到的整个座舱域控渗透率,2022年是8.28%,主力的搭载车型仍然是30-35万区间。”3月29日,2023年度(第五届)高工智能汽车市场峰会上,高工智能汽车研究院首发《2022-2025年中国智能汽车产业链市场数…...

SAP开发环境ABAP的搭建(客户端和服务器),Developer Key和AccessKey的绕过方法

目录 一.前言 二.客户端GUI安装 1.下载好SAP GUI 750 2.解压后找到SAPGUISetup.exe 3.安装 4.安装完整教程 三.服务端搭建 1.安装VmWare虚拟机 2.下载虚拟机镜像 3.打开虚拟机 4.调整内存大小 5.启动虚拟机 四.创建程序 1.创建包 2.创建程序 3.Developer Key和A…...

VSCode的C/C++编译调试环境搭建(亲测有效)

文章目录前言1.安装VSCode和mingw642.配置环境变量3.配置VSCode的运行环境3.1设置CodeRunner3.2设置C/C4.调试环境配置前言 这片博客挺早前就写好了,一直忘记发了,写这篇博客之前自己配的时候也试过很多博客,但无一例外,都各种js…...

物理世界的互动之旅:Matter.js入门指南

theme: smartblue 本文简介 戴尬猴,我是德育处主任 欢迎来到《物理世界的互动之旅:Matter.js入门指南》。 本文将带您探索 Matter.js,一个强大而易于使用的 JavaScript 物理引擎库。 我将介绍 Matter.js 的基本概念,包括引擎、世界…...

在线文章生成器-文章生成器在线生成

免费自动写作软件 目前市面上存在一些免费自动写作软件,以下介绍几个开源的自动写作软件。 GPT-2:这是由OpenAI推出的一款自动写作工具,它可以生成高质量的文章,其优点在于能够理解语言结构和语法规则,从而生成表达自…...

第十四届蓝桥杯大赛软件赛省赛-试题 B---01 串的熵 解题思路+完整代码

欢迎访问个人网站来查看此文章:http://www.ghost-him.com/posts/db23c395/ 问题描述 对于一个长度为 n 的 01 串 Sx1x2x3...xnS x_{1} x_{2} x_{3} ... x_{n}Sx1​x2​x3​...xn​,香农信息熵的定义为 H(S)−∑1np(xi)log2(p(xi))H(S ) − {\textstyl…...

【Leetcode】消失的数字 [C语言实现]

👻内容专栏:《Leetcode刷题专栏》 🐨本文概括: 面试17.04.消失的数字 🐼本文作者:花 碟 🐸发布时间:2023.4.10 目录 思想1:先排序再查找 思想2:异或运算 代…...

SpringBoot接口 - 如何实现接口限流之单实例

在以SpringBoot开发Restful接口时,当流量超过服务极限能力时,系统可能会出现卡死、崩溃的情况,所以就有了降级和限流。在接口层如何做限流呢? 本文主要回顾限流的知识点,并实践单实例限流的一种思路。 SpringBoot接口 …...

【花雕学AI】深度挖掘ChatGPT角色扮演的一个案例—CHARACTER play : 莎士比亚

CHARACTER play : 莎士比亚 : 52岁,男性,剧作家,诗人,喜欢文学,戏剧,爱情 : 1、问他为什么写《罗密欧与朱丽叶》 AI: 你好,我是莎士比亚,一位英国的剧作家和诗人。我很高兴你对我的…...

腾讯云物联网开发平台 LoRaWAN 透传接入 更新版

前言 之前有一篇文章介绍LoRaWAN透传数据,不过还是用物模型云端数据解析脚本,不是真正的透传。腾讯云物联网开发平台也支持对LoRaWAN原始数据的透传、转发。今天来介绍下。腾讯云 IoT Explorer 是腾讯云主推的一站式物联网开发平台,IoT 小能手…...

4.6--计算机网络之TCP篇之TCP的基本认识--(复习+深入)---好好沉淀,加油呀

1.TCP 头格式有哪些? 序列号: 在建立连接时由计算机生成的随机数作为其初始值,通过 SYN 包传给接收端主机,每发送一次数据,就「累加」一次该「数据字节数」的大小。 用来解决网络包乱序问题。 确认应答号: …...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

大话软工笔记—需求分析概述

需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

反射获取方法和属性

Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...

今日科技热点速览

🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...

AI,如何重构理解、匹配与决策?

AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...