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

news/2024/11/16 13:53:06/

       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


http://www.ppmy.cn/news/44129.html

相关文章

ERTEC200P-2 PROFINET设备完全开发手册(5-3)

5.3 标识和维护数据(I&M) 标识和维护数据是一类特殊的数据记录,其中 “I&M0”(“16#AFF0”)用于有关模块或设备的常规信息。包含的信息例如:订货号/Order-ID, 硬件软件版本/hard- and software v…

pandas笔记:offset.DateOffset

进行date的偏移 class pandas.tseries.offsets.DateOffset 1 参数说明 n 偏移量表示的时间段数。 如果没有指定时间模式,则默认为n天。 normalize是否将DateOffset偏移的结果向下舍入到前一天午夜**kwds 添加到偏移量的时间参数 年(years&#xff09…

Linux复习 / 动静态库QA梳理 | 如何使用第三方库?

文章目录前言Q&A概念Q:使用静态库和使用动态库的程序有什么区别?Q:什么是静态链接/动态链接?使用与制作Q:如何制作动静态库?Q:如何使用第三方库?Q:程序加载时&#x…

Web 技术标准组织

个人博客 授人以鱼不如授人以渔. 所谓“一流的企业制定标准,二流的企业申请专利,三流的企业兜售产品”,这种说法虽不中亦不远。 追求专业精神的 IT 从业者不能只埋首于眼前的一亩三分地,被动承受变化,而要溯流而上&…

【剑指offer|6.寻找峰值】

0.寻找峰值 关键点: 返回任意一个峰值的下标即可nums[-1]nums[n]负无穷 输入:nums [1,2,3,1] 输出:2 解释:3 是峰值元素,你的函数应该返回其索引 2 1.傻瓜编程(纯属玩乐) class Solution { public:int findPeakElement(vector&l…

FMCW激光雷达,未来已来

2021年1月,一家名为Avea的激光雷达初创公司,与日本电装宣布达成合作协议,双方将共同推进FMCW(调频连续波)激光雷达的量产,目标是满足大众市场的需求。 众所周知,目前,大多数车载激光…

C++智能指针:更简单、更高效的内存管理方法

C智能指针:从新手到高手的心理密码C Smart Pointers: Psychological Passcodes from Beginner to Expert智能指针简介 (Introduction to Smart Pointers)智能指针类型 (Types of Smart Pointers)a. shared\_ptr (共享指针)b. unique\_ptr (独占指针)c. weak\_ptr (弱…

webgl-画三角形

html <!DOCTYPE html> <head> <style> *{ margin: 0px; padding: 0px; } </style> </head> <body> <canvas id webgl> 您的浏览器不支持HTML5,请更换浏览器 </canvas> <script src"./main.js"></script&g…