首页 > 其他分享 >3、Web前端学习规划:CSS - 学习规划系列文章

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

时间:2023-04-13 11:56:31浏览次数:52  
标签:Web 网站 学习 样式 UI 开发者 规划 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

 

标签:Web,网站,学习,样式,UI,开发者,规划,CSS
From: https://www.cnblogs.com/lzhdim/p/17310815.html

相关文章

  • 动态规划02——45. 跳跃游戏 II
    45.跳跃游戏II给定一个长度为n的0索引整数数组nums。初始位置为nums[0]。每个元素nums[i]表示从索引i向前跳转的最大长度。换句话说,如果你在nums[i]处,你可以跳转到任意nums[i+j]处:0<=j<=nums[i] i+j<n返回到达 nums[n-1]的最小跳跃次数......
  • 动态规划03——322. 零钱兑换
    322.零钱兑换给你一个整数数组coins,表示不同面额的硬币;以及一个整数amount,表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额,返回 -1。你可以认为每种硬币的数量是无限的。示例 1:输入:coins=[1,2,5],amount......
  • vscode如何设置HTML/CSS/JS保存后自动格式化?
    具体操作:点击小齿轮,选择设置按钮  第二步:点击右上角按钮,进入设置页面  第三步:粘贴自动保存的js代码!  "editor.formatOnType":true,"editor.formatOnSave":true, ......
  • 6-面试题(Web自动化测试)
    1、如何提升webui自动化的稳定性1·导致ui自动化不稳定的因素1.1web页面的多变1.2页面隐藏元素1.3页面元素加载不稳定1.4系统业务复杂1.5ajax请求问题1.6测试环境数据准备问题2·解决问题的各种方法1.从自动化框架解决问题1.1设置显式等待重写selenium的底层接口......
  • 一个Java web 应用系统的需求文档示例:
    #需求文档##引言本文档旨在描述一个在线商城网站的需求,并给出设计方案。该网站是一个B2C电商平台,旨在提供给用户方便快捷的购物体验。本文档面向的读者包括项目经理、开发人员、测试人员和其他与该系统相关的人员。##功能需求本次需求的功能需求包括:1.用户登录和注......
  • AWS上DevOps实验(三)--- 使用Terraform创建Web应用基础架构
    从本文档起,作者计划在AWS上做一系列DevOps/IaC相关实验,本文是第三篇,使用Terraform创建Web应用基础架构。本次实验架构图本次实验架构图如下:Terraform代码本次代码可以从下载代码结构如下:文档如下:$lltotal52-rw-r--r--1ec2-userec2-user3201Mar603:22appser......
  • 基于蚁群优化算法的三维路径规划算法matlab仿真
    1.算法仿真效果matlab2022a仿真结果如下:2.算法涉及理论知识概要蚁群算法是受到对真实蚂蚁群觅食行为研究的启发而提出。生物学研究表明:一群相互协作的蚂蚁能够找到食物和巢穴之间的最短路径,而单只蚂蚁则不能。生物学家经过大量细致观察研究发现,蚂蚁个体之间的行为是相互作用......
  • web前端开发理论解析
    在Linux下,()命令是只查询系统内存的使用情况。A.topB.vmstatC.free-mD.iostatC.`free-m`命令是用来查询Linux系统内存使用情况的命令,它会显示空闲内存、已使用内存、缓存等信息。而`top`、`vmstat`和`iostat`命令则不仅可以查询内存使用情况,还能查看CPU、磁盘和网......
  • SpringBoot向web容器注入Servlet,Filter及SpringSecurity注册DelegatingFilterProxy
    从SpringSecurity架构图可知SpringSecurity的过滤器与Web容器的过滤器是通过DelegatingFilterProxy接入的。由DelegatingFilterProxy代理了FilterChainProxy,FilterChainProxy包含了SpringSecurity的过滤器链。 那么DelegatingFilterProxy是怎么创建及如何加入到Web容器中? 看......
  • 7663: 股票买卖 动态规划/线性dp
    描述 最近越来越多的人都投身股市,阿福也有点心动了。谨记着“股市有风险,入市需谨慎”,阿福决定先来研究一下简化版的股票买卖问题。假设阿福已经准确预测出了某只股票在未来N天的价格,他希望买卖两次,使得获得的利润最高。为了计算简单起见,利润的计算方式为卖出的价格减去买入的......