【云驻共创】如何更好的入门CSS?

举报
小Bob来啦 发表于 2021/08/06 12:38:53 2021/08/06
【摘要】 入门CSS的那些事~

大家好,我是小Bob,一个关注软件领域而又执着于计算机底层的开发者~

相信每个学理工科的都怀有一个理工科的梦。

我也不例外,自从入门计算机,从开始学习C语言到数据结构C++和数据结构等。还记得去年的暑假,我自己搭建了一个属于自己的博客,也很好奇它的实现。于是,渐渐的对前端也是更加好奇。

在华为云这里,我看到了华为云的全栈学习,刚好学校也还没教前端,于是趁着暑假便开始了前端学习之旅。

前端三大件分别为HTMLCSSJS。这里小编给大家介绍的是CSS

.什么是CSS

CSS英文全称为Cascading Style Sheets,中文名为级联样式单,一般也称为层叠样式表单。

简单来说,CSS是一种样式表现语言,它是对网页结构语言(HTML)的补充,就和好朋友一样一起完成对网页的布局。主要用于对网页样式的定义,例如布局、颜色、文本等的设计,从而精确控制页面中的每一个元素。

比如在代码中,我们会学到一些背景属性:colorimagerepeat等等;还有字体大小、边框设置以及效果渲染。

.CSS入门

这里小编带大家进行简单的入门。

1.下载VScode

首先推荐一款宇宙级好用的编辑器,用它来敲代码、写文档、甚至上班摸鱼看股票都行,它就是微软的VScode,此VScode不是VS哦。此前小编以为它们是一样的,然后下载下来不仅很大也木有小编想要的效果,所以一定要下VScode~

  • 首先,找到VScode的官网:https://code.visualstudio.com/
  • 然后点击上图中的Download下载:
  • 在上图中选择合适自己的版本下载即可。
  • 最后便是傻瓜式安装啦~这里小编提醒大家下载后可以下一个中文简体的插件,如下。在搜索栏中搜索Chinese便会找到简体中文的插件啦~

到这里我们便把写前端需要的编辑器下载好啦!

2.CSS简单入门

接下来我们便可以开始写一个简单的CSS程序啦~

首先,我们先介绍CSS的引入。至于为什么要先介绍CSS的引入呢?之前我们也有介绍过,HTML是网页的框架,那么CSSJS其实更多的是修饰和美观的作用。所以一般写前端会将HTMLCSSJS的代码分别写在不同的文件里,方便我们在后期的修改和整理。

那么我们在HTML代码里就要嵌入CSS和一些JS的代码,即引入。

  • CSS的引入
  1. 内联模式
    CSS样式直接写到HTML元素的style属性中
  2. 内部样式
    CSS样式写到<style>标签中
  3. 引入外部样式
    精确通过<link>元素引入外部的一个CSS文件
  4. 导入外部样式
    通过在<style>元素中,使用@import导入一个外部的CSS文件

怎么操作呢?

  • 打开VScode,新建一个HTML文件,输入html选择html:5快速弄出代码块:
  • 这里教大家一个简单的方法,如上图。首先打开VScode,按快捷键Ctrl+N新建一个文件,再按Ctrl+S快速保存到指定的文档并且将文件名和格式改好。
  • 之后我们便直接输入html,选择html:5即可快速调出HTML的代码块。

HTML代码块如下

那么现在简单的写一个引入CSS的代码:

    • 下面为一个test.html文件。
  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •     <meta charset="UTF-8">
  •     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  •     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  •     <title>CSS</title>
  •     <!-- <style>
  •         h1{
  •             color:green;
  •         }
  •     </style> -->
  •     <!--上面的为style标签-->>
  •  
  • <!--     <link rel="stylesheet" href="demo1.css"> -->
  •  
  •     <!-- <link rel="stylesheet" href="demo1.css" type="text/css">
  •     link方式: 上面是告诉游览器这是一个css文件> -->
  •  
  •         <style>
  •             @import 'demo1.css'
  •         </style>
  •     <!-- @import方式-->>
  •  
  • </head>
  • <body>
  •     <!--h1 style= "color:red;">CSS的学习</h1-->     <!-- 上面是红色的style属性-->>
  •     <h1>CSS的style标签</h1>
  •  
  • </body>
  • </html>
    • 现在新建一个CSS文件,如:demo.css文件。并写入以下代码:
  • h1{
  •     color: pink;
  • }

保存后我们用游览器打开上面的test.html文件即可。在CSS文件中,我们将h1的标题的颜色有所修改。

.CSS进阶

关于CSS的进阶,包括CSS的选择器和盒模型。

关于选择器的种类也是有很多,以后有机会再给大家一一描述。这里我们大致了解一下什么是盒模型。

1.盒子模型

盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子,它包括边距(margin)、边框(border)、填充(padding)、内容(content)、背景(backbround),下面对每一部分进行简单的说明。

  • margin:清除边框外的区域,外边距是透明的。
  • border:围绕在内边距和内容外的边框。
  • padding:清除内容周围的区域,内边距是透明的。
  • content:盒子的内容,显示文本和图像。
  • backbround:背景包含背景颜色(background-color)、背景图(background-image),给整个盒子添加上背景样式。

比如:


我们来简述一下这张图:图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框,然后最外层是外边距,整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。

那么,元素框的总宽度 = 元素的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;

元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。

2.盒子模型的设置

其次,我们需要了解的便是对盒子模型的设置。当我们在编写代码时,只要一个盒子被选中,就要考虑它的属性问题,比如盒子需要设置哪些属性,并且考虑是否需要并排显示,最后再考虑美化问题。

  1. 内容区域:width height
  2. 内填充区域: padding
  3. 边框: border
  4. 外填充区域:margin
  5. 背景: background

好比一张网页就是一堆的盒子堆积起来的。这里说的盒子就是标签,也是矩形。

 

CSS的学习相较于其它的比如CC++或者Python,没有那么繁琐,但也各有各自不同的地方,比起学习其它语言,CSS能给我最直接的效果便是可以自己可以独自修改博客了,也可以根据自己的喜好去创建一个你自己喜欢的博客风格。

 

最后,我想你肯定也想自己去新建一个属于自己的博客了吧,那顺便也可以将我的CSS也学了哦~嘿嘿,最后的最后,关于CSS的学习入门介绍暂时就到这里了,后续还会继续更新哦,敬请期待~

备注:本文来自于华为云内容共创系列

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200