零基础学前端(四)重点讲解 CSS

  1. 该篇适用于从零基础学习前端的小白

  2. 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识

  3. 初学者切忌,不要眼花缭乱,不要四处找其它文档,要坚定一个教授者的方式,将其学通透,才是好的学习方式。

  4. 本篇css我不会讲具体样式如何写,因为这些小细节,你只需搜索自己便可以学会。我侧重于css的核心概念

(盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放)

一、CSS概念

它名字叫 层叠样式表(英文全称:Cascading Style Sheets)是用来设计HTML表现的。

我们最重要的是明白它的"层叠"的意义,也就是样式之间可以覆盖。

二、盒子模型

盒子模型的概念有助于我们认识元素的基本构成

1. 盒子模型的基本组成

我们把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。

宽度(width) = content宽度 + padding-left(左内边距) + padding-right(右内边距) +

borde-left + border-right + margin-left + margin-right

=》高度组成同理

2. 使用chrome的开发者工具查看元素结构

使用chrome的开发者工具,查看css样式、网络请求是常用的开发手段,可以方便开发者快速定位到问题,目前我只介绍查看css样式

当然也可以直接按f12,有的电脑可能需要按Fn + F12才可以打开开发者工具

三、CSS 的常用选择器:class(类选择器) 、id 、标签选择器

选择器的意义就是帮助开发者找到要被操作的元素

1. class 和 标签选择器的使用

经过之前的实践你应该至少使用过 class 和 标签选择器。如下代码

html 复制代码
    <style>
        /* class 类选择器 */
        .leftTopBox{  
          
        }
          /* 标签选择器:它表示leftTopBox这个类选择器,下面的所有li标签 */
        .leftTopBox li{

        }
    </style>

<body>
    <ul class="leftTopBox">
        <li>新闻</li>
        <li>hao123</li>
        <li>地图</li>
        <li>贴吧</li>
        <li>视频</li>
        <li>图片</li>
        <li>网盘</li>
        <li>更多</li>
    </ul>
</body>

2. id 选择器的使用方法

html 复制代码
 <style>
    /*id选择器*/
      #head{
        color: aquamarine;
      }
    </style>

  <body>
      <div id="head"></div>
  </body>

3. 层叠样式,就是样式之间可以覆盖

接下来我们样式,假设id、class 两个选择器,都对同一个元素赋值了样式,效果会如何

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>Document</title>
    <style>
      #head{
        color: green;
      }
      .head2{
        color: red;
      }
    </style>
  </head>

  <body>
      <div id="head" class="head2">我到底是什么颜色</div>
  </body>
</html>

经过实我们看到 id 选择器,大于 class选择器,剩下初学者自己实践就好。

四、flex布局

为什么直接推荐学习使用flex布局呢?

因为在pc端、App、小程序都是统一支持Flex布局的,一劳永逸。

这里我不想重复介绍,直接借用阮一峰老师的博文。初学者学习基本布局就好,以后实战逐步深入

Flex 布局教程:实例篇 - 阮一峰的网络日志

五、结束语

没有任何一篇博客可以百分百将知识讲完、讲透,学习只能是一步一步实践才会学的更多更深入。我个人认为初学时,学的内容逻辑简单、思路清晰最重要,所以我只是挑取核心部分,初学者理解后,可直接上手项目,这就是我的思想逻辑。

css知识有很多,我不建议初学者去事无巨细的学每个知识点,我的看法是,带着问题,以实践的方式先将我博客逻辑跑通,让你对前端有个整体观念(从基础到最后发布网站,别人可以访问),到时你自己补充剩余。

记下来看我js更新吧(努力中。。。)

相关推荐
gnip11 分钟前
微前端框架选型
前端·javascript
芒果12521 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~31 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰35 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清36 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu40 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏1 小时前
React组件中的this指向问题
前端·react.js
passer9811 小时前
列表项切换时同步到可视区域
前端
FogLetter1 小时前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元1 小时前
设计模式-访问者模式
前端·后端·设计模式