【前端开发入门】css快速入门

news/2024/12/22 9:18:08/

目录

  • 引言
  • 一、css盒模型
    • 1. 盒模型概念
    • 2. 盒模型案例
  • 二、css编写
    • 1. html文件内部编写
      • 1.1 标签style属性编写
      • 1.2 css选择器关联
        • 1.2.1 id选择器
        • 1.2.2 class选择器
        • 1.2.3 标签选择器
        • 1.2.4 css选择器作用域
        • 1.2.5 其他选择器
        • 1.2.6 各css选择器优先级
    • 2. 单独维护css文件
      • 2.1 创建css文件
      • 2.2 在html中引入
  • 三、css常见属性（需记忆）
    • 1. 结构类
    • 2. 样式类
  • 四、css布局定位
    • 1. position定位
      • 1.1 属性值描述
      • 1.2 案例举例
    • 2. 弹性盒子布局
      • 2.1 常规用法
      • 2.2 案例举例
  • 总结

引言

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容，并不代表这部分内容不重要，只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端，细节技巧性内容，可以在后续的开发工作中自行发现并掌握。

在上一篇 【前端开发入门】html快速入门 中，你应该可以利用块级元素和行内元素的占位特点，完成基础的页面布局。

本篇将介绍css的常用属性及使用场景，为html标签添加样式，美化页面效果。关于css基础内容，请参考：MDN–CSS 基础，一些css属性的详细介绍和示例也可以在MDN网站上查询。

有关css的编写规范请参考我的另一篇文档：【CSS Tricks】深入聊聊前端编写css的方法论

css_11">一、css盒模型

还记得 html快速入门 文中介绍的容器概念吗？所有的页面元素都是一个容器，堆叠在一起形成了文档流。css其实就是对每一个容器进行粉饰美化。我们通常会按照一定规则去美化每一个容器，也就是所说的盒模型规则。这是一个重要的概念，理解了盒模型将对你编写css样式有很大帮助。

在这里插入图片描述
如上图所示，一个完整的html页面，就像是一个个粉饰好的元素盒子堆叠在一起。

1. 盒模型概念

css盒模型包含以下几个内容（从内向外）：

  • content（内容）：元素内部主要填写表达的内容。
  • padding（内边距）：元素内容到边框之间的空间。
  • border（边框）：紧贴内边距的四周的线边框。
  • margin（外边距）：边框外部与其他元素的碰撞范围，即其他元素要与当前元素边框保持的距离。

2. 盒模型案例

我们可以通过在浏览器页面中按 f12 打开开发者工具，更直观的查看元素样式

  • 设置css样式：
css">      .box2 {// content 宽高width: 100px;height: 100px;// 内边距padding: 30px;// 边框border: 30px solid #333;// 外边距margin: 30px;// 背景色background: blue;}
  • 在开发者工具中点选对应元素，在样式一栏中滑动到末尾查看盒模型
    在这里插入图片描述

css_48">二、css编写

1. html文件内部编写

在html文件内部编写css样式，可以直接写在标签的style属性中，也可以通过css选择器关联指定html标签，并将样式统一写在style标签中。

1.1 标签style属性编写

通过标签style属性编写的样式优先级最高

<div style="css">width: 100px; height: 100px; background: #333333">content</div>

css_56">1.2 css选择器关联

可以将以下各类选择器代码放置在html对应位置去看下效果。

1.2.1 id选择器

元素标签中设置唯一id名，表示单独匹配某一个元素。在style中通过 #id名 匹配到对应元素，在选择器后的大括号内部编写css样式，应用到指定id的元素身上。

<style>css">
#box1{width:100px;height:100px;background:red;
}
</style><body><div id="box1">box</div>
</body>
1.2.2 class选择器

元素标签中设置class名（可重复）表示匹配这一类的元素。在style中通过 .class名 匹配到对应元素，在选择器后的大括号内部编写css样式，应用到标记有相同class名的元素身上。class类可以设置多个，后设置的class类的属性值会覆盖先设置的class类的相同属性名的属性值。

<style>css">
.box{width:100px;height:100px;background:blue;margin: 20px;
}
</style><body><div class="box">box1</div><div class="box">box2</div><div class="box">box3</div>
</body>
1.2.3 标签选择器

html的标签名同样可以作为选择器匹配到元素，和class的匹配范围类似。在style中通过 标签名 匹配到当前作用域下的对应元素，在选择器后的大括号内部编写css样式，应用到具有相同标签名的元素身上。

<style>css">
div{width:100px;height:100px;background:green;margin:20px;
}
</style><body><div>box1</div><div><div>嵌套的box1</div><div>嵌套的box2</div></div>
</body>
css_116">1.2.4 css选择器作用域

如1.2.3示例中，div的样式会遍历body中的所有div标签，层层渗透直到都赋予相同的样式。如果我想单独为 嵌套的box1 和 嵌套的box2 设置另一种样式，其他的div保持全局的div样式，该如何处理？

  • 一种方案是为两个嵌套的box设置class类，在style中为这个类设置另一种样式。
  • 另一种方案是为包裹他俩的父元素div设置class类或者id，在这个作用域下匹配所有的div。如下示例：
<style>css">
div{width:100px;height:100px;background:green;
}
.area > div {background:yellow;
}
</style><body><div>box1</div><div class='area'><div>嵌套的box1</div><div>嵌套的box2</div></div>
</body>

解释下这里的代码：

  • 首先是全局作用域，我们直接编写的div样式默认的作用域为body，他会匹配到body下所有的div，并赋予样式。
  • 然后是局部作用域，我们通过 .area > div 选择器，限定了类名为 .area 的标签下作用域的所有div子元素。如果有更深一级的嵌套，那就继续使用 > 去向下匹配作用域。
  • 所以整体的渲染过程是先将body下的所有div渲染为宽高各100px，背景色为绿色。然后通过 .area > div 选择器匹配到的div元素修改背景色为黄色（重新覆盖了全局作用域的样式），并继续保持宽高100px（继承了全局作用域的部分样式）。
1.2.5 其他选择器

现在还不是时候，不过可以先熟悉一下名字：css伪类、css伪元素、标签属性选择器。

css_152">1.2.6 各css选择器优先级

因为css样式是可以重复覆盖掉的，所以判断css选择优先级的意义是，决定哪种类型的选择器所携带的css样式会最终渲染到元素身上。

首先明确一点，在标签的style属性中编写css样式优先级最高。

css选择器按照优先级排序分别为：id、class、标签名。

当出现了css选择器作用域等复杂情况时，可以通过比较选择器的 特定性 去判断。在开发者工具中可以看到，id选择器的 特定性 为：（1，0，0），标签选择器 特定性 为：（0，0，1），.area > div 选择器包含了class类选择器和标签选择器，他整体的 特定性 为：（0，1，1）。id代表特定性第一位，class代表特定性第二位，标签代表特定性第三位。
由此我们可以整理出规则，按照特定性三位数依次作比较

  • 按位对比，第一位为1的情况，也就是包含id的选择器优先级最高。
  • 当第一位相同，则对比第二位为1的情况，也就是包含class选择器的优先级高。
  • 当前两位相同，则对比第三位为1的情况，也就是包含标签选择器的优先级高。
  • 当三位特定性值都相同，那么谁编写的位置靠后谁优先级高。相同优先级的选择器，后写的样式会覆盖掉先写样式的重复项。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

css_170">2. 单独维护css文件

单独维护css文件其实就是将html文件中的style内容复制出来放置在独立的css文件中，通过引用文件的方式注入到页面的style中去。根据业务模块的需求，可以同时创建多个css文件，分别独立维护方便管理。

css_172">2.1 创建css文件

在html同级目录下创建后缀为 .css的文件如：style.css，写入内容：

css">div{width:100px;height:100px;background:green;
}
.area > div {background:yellow;
}

2.2 在html中引入

找到html的 head 标签，在 head 标签内部使用 link 标签引入css文件。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title>// link标签引入css文件<link rel="stylesheet" href="./style.css"></head><body><div>box1</div><div class="area"><div>嵌套的box1</div><div>嵌套的box2</div></div></body>
</html>

你同样可以使用@import 关键字在style标签中引入css文件，但是更推荐使用link方法。所以这里不做过多介绍，自行查阅资料了解。

css_213">三、css常见属性（需记忆）

css属性多的数不清，我们不可能将其全部记住。我将列举几个必须要记的几个属性，其余的在开发过程中百度即可。

css属性按照效果来划分，可以大致分为两类：结构类和样式类

1. 结构类

表示元素的物理外在表现，比如：高矮胖瘦、和其他元素距离多少。

  • width和height，用于设置元素的宽高，一般取值为数字+单位。
css">.box{// 表示宽度为100像素点。width:100px; // 表示宽度为父元素宽度的20%width:20%;// 表示宽度为整个浏览器视口的宽度的100%，仅浏览器页面区域，不包含顶部标签页、导航栏、收藏夹等区域。width:100vw;// 表示高度为整个浏览器视口的高度的100%，仅浏览器页面区域，不包含顶部标签页、导航栏、收藏夹等区域。高度单位只有vh这一个区     别，其他和宽度单位一致。height:100vh;// 表示宽度为当前默认字体大小的1.5倍width:1.5rem;
}
  • margin，表示外边距。即元素边框外与其他元素的碰撞距离。单位与宽高一致。
css">.box{// 表示四周边距均为10像素margin:10px;// 第一个值表示上下边距为10像素，第二个值表示左右边距为20像素margin:10px 20px;// 第一个值表示上边距为10像素，第二个值表示左右边距为20像素，第三个值表示下边距为10像素margin:10px 20px 10px;// 四个值的顺序为上、右、下、左边距。顺时针四个边距margin:10px 20px 10px 20px;// 以下四种分别为单独某个方向设置边距。一般推荐使用margin四参数。margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;
}
  • padding，表示内边距。表示元素内容到边框之间的距离。单位与宽高一致。
css">.box{// 表示四周内边距均为10像素padding:10px;// 第一个值表示上下内边距为10像素，第二个值表示左右内边距为20像素padding:10px 20px;// 第一个值表示上内边距为10像素，第二个值表示左右内边距为20像素，第三个值表示下内边距为10像素padding:10px 20px 10px;// 四个值的顺序为上、右、下、左内边距。顺时针四个内边距padding:10px 20px 10px 20px;// 以下四种分别为单独某个方向设置内边距。一般推荐使用padding四参数。padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;
}
  • border，设置元素边框。
css">.box{// 第一个参数为边框宽度。// 第二各参数为边框线形，一般取值为solid（实线）、dashed（虚线）。其他取值不推荐，可以自行探索。// 第三个参数为边框颜色。颜色值在样式类详解。border: 1px solid #333;// 设置边框四角曲度，取值可以为具体像素值也可以为百分比。border-radius: 10px;
}
  • overflow，设置了当元素的内容太大超出设置宽高范围时，元素容器的表现行为。当值不为visible时可用于形成 BFC
css">.box{// 默认值，如果虽然设置了元素容器宽高，但子元素内容过多仍会超出宽高范围overflow:visible;// 子元素内容过多超出元素容器宽高范围时，将被裁剪掉。overflow:hidden;// 子元素内容过多超出元素容器宽高范围时，将出现侧边滚动条，超出部分内容被遮挡，通过滚动滚轮查看全部内容。overflow:scroll;// 自动调节：子元素内容在元素容器宽高范围内时，和visible表现一致。子元素内容过多超出元素容器宽高范围时，将出现侧边滚动条，超出部分内容被遮挡，通过滚动滚轮查看全部内容。overflow:auto;// 将超出部分分为横向和纵向，单独控制超出时元素容器的表现，当你确认横向或纵向某一方向不会超出时使用。参数与overflow一致。overflow-X: auto;overflow-Y: auto;}

2. 样式类

表示元素的涂装，一般指各种颜色和阴影效果。

颜色取值一般为HEX（#ffffff）、RGB（rgb(255，255，255)）、HSL（hsl(255，90%，50%)）三种形式。
HEX格式中如果每两位数字都相同可以简写，例如：#11ee00 等价于 #1e0 ; #ffffff 等价于 #fff。

  • 字体样式
css">.box{// 字体大小，每个浏览器都会有默认的字体大小（16px）和最小字体大小(chrome最小6px)font-size: 16px;// 不填写font-weight属性为默认字体粗细（值等价于400），bold为加粗字体（值等价于700），取值范围为1-1000，以100为倍数。font-weight: bold;// 字体颜色color: #333333;
}
  • 背景色
css">.box{// 背景色background: #333;// 背景图片，背景图微调详情查询MDN网站background: url('./bg.png');
}
  • 阴影，在线调试页面
css">.box{/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 10px 10px 0 10px #333;
}

css_344">四、css布局定位

UI设计稿一般情况下都不会规规矩矩自左而右、自上而下的排列元素，往往都是比较有设计感的到处飞。

在完成了基础的元素外形、涂装的css样式设置后，我们需要考虑如何将元素放置在指定位置。

一般情况下，我们可以基于 块级元素 和 行内元素 基础的占位特性，加上一些margin微调，即可完成基础布局。但实际上会经常出现一些特殊状况，比如一批元素需要对齐、单独移动一个元素而不想影响其他元素等。这时候单纯的margin就无法便捷的完成目标，我们需要一些特殊手段：这里只推荐position和弹性盒子布局（用的比较多），其他可以根据喜好自己研究一下。

1. position定位

针对单独移动某一元素而不想影响其他元素位置的情况，一般推荐使用position属性设置定位。默认属性值为：static ，常用的属性值有：relative 、absolute 。

1.1 属性值描述

  • relative，相对定位。设置position为relative时，会在原来元素应该占据的位置预留一个尺寸相当的空白区域（不影响原有的文档流布局），当前元素则悬浮于空白区域正上方。此时该元素获得了额外五个属性：top、right、bottom、left、z-index。
    • top，元素相对于原来位置的上边缘的偏移值，取值为像素或百分比。正值向下偏移，负值向上偏移
    • right，元素相对于原来位置的右边缘的偏移值，取值为像素或百分比。正值向左偏移，负值向右偏移
    • bottom，元素相对于原来位置的底边缘的偏移值，取值为像素或百分比。正值向上偏移，负值向下偏移
    • left，元素相对于原来位置的左边缘的偏移值，取值为像素或百分比。正值向右偏移，负值向左偏移
    • z-index，表示元素堆叠层级序号，取值整数，值越大越靠上（想象为一摞纸张，值越大越靠上。当没有比他大的值，则排在第一张）
    • top和bottom不同时出现，left和right不同时出现
  • absolute，绝对定位。设置position为absolute时，需要确保该元素的父元素设置了position为relative或absolute，如果没有的话就继续往父元素的父元素找，直到找到一个设置了position为relative或absolute的元素（暂时叫相对父元素），如果最终没有找到，则body为相对父元素。此时该元素脱离文档流，即不占据文档流的位置（注意relative仍占据文档流位置），该元素将单独形成一个图层覆盖在原文档流上方。
    • 同样的该元素也将额外获得五个属性：top、right、bottom、left、z-index，元素的四边将相对于 相对父元素 的对应四边进行偏移。
    • 同时z-index也基于相对父元素的z-index产生，不是单纯的叠加。（细节问题，篇幅原因不展开描述，私信交流或后期单独写一篇描述）
  • 其他属性自行探索，常用的就记住relative和absolute两个就够。

1.2 案例举例

元素垂直水平居中

html部分

    <div class="box"><div class="item"></div></div>

css部分

css">  .box {width: 100vw;height: 100vh;position: absolute;}.item {width: 100px;height: 100px;background: red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

解释下这里的代码，box元素设置宽高为视口宽高的100%并设置相对定位。item元素设置宽高100px背景为红色并设置绝对定位，item的上边缘相对于box的上边缘移动了box的50%高度，左边缘相对于box的左边缘移动了box的50%宽度，此时相当于item的左顶点处于box的正中心（思考下这里）。最后需要用到transfrom变换平移，将item分别向左向上平移自身宽高的50%（负值），那么此时item的正中心就和box的正中心重合，完成了元素垂直水平居中。

transform属性会在一些特效样式时常用，大多数时间仅会出现在垂直水平居中案例这种情况里。根据喜好在MDN中查询体验其他特性。

2. 弹性盒子布局

弹性盒子布局，目前用的最多的布局方式，一维空间最好的布局方式。本篇仅介绍常用的属性，详细介绍参考：弹性盒子布局

弹性盒子布局一般用于对一批元素进行整合排布，比如对齐、分隔等操作。

2.1 常规用法

准备一份html素材，在本地测试下如下代码。

    <div class="box"><div class="item item1"></div><div class="item item2"></div><div class="item item3"></div></div>
  1. 简化垂直水平居中写法
css">.box{width:100vw;height: 200px;// 将父元素设置为弹性盒子，其子元素将依照弹性盒子规则布局。display: flex;// 默认情况下主轴方向上（横向）的对齐方式，center表示水平居中对齐，可选值有：flex-start或start（居左对齐）、flex-end或end（居右对齐）justify-content: center;// 默认情况下交叉轴（纵轴）的对齐方式，center表示垂直居中对齐，可选值有：flex-start或start（向上对齐）、flex-end或end（向下对齐）align-items: center;
}
.item{width:100px;height:100px;background:red;
}
  1. 改为纵向轴向
css">.box{width:200px;height: 100vh;// 将父元素设置为弹性盒子，其子元素将依照弹性盒子规则从左至右布局。display: flex;// 改变弹性盒子轴向为纵向，子元素将从上至下布局。flex-direction: column;// 主轴方向上（纵向）的对齐方式，center表示垂直居中对齐，可选值有：flex-start或start（居上对齐）、flex-end或end（居下对齐）justify-content: center;// 交叉轴（横轴）的对齐方式，center表示水平居中对齐，可选值有：flex-start或start（向左对齐）、flex-end或end（向右对齐）align-items: center;
}
.item{width:100px;height:100px;background:red;
}
  1. 设置子元素单独属性
css">.box{display: flex;// 设置子元素与子元素之间间隔为10像素，仅在display值为flex时存在gap属性。gap:10px;
}
.item1{background:red;// 将class名为item1的元素宽度设置为box总宽度减去item2和item3后的剩余宽度。理解为按照比例分配父元素的剩余空间。详细使用方式查询MDNflex:1;// 单独设置item1的交叉轴（纵轴）对齐方式为向上对齐。可选值有：center（垂直居中）、flex-end或end（向下对齐）、stretch（拉伸item1的高度为父元素的高度）align-self: flex-start;
}

2.2 案例举例

左中右布局，左右各占据300px定宽，中间宽度根据窗口变化动态调整。（比较经典的页面布局方式）

html部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./style.css" /><title>Document</title></head><body><!-- 总容器 --><div class="container"><!-- 左侧区域 --><div class="panel leftPanel"></div><!-- 中间区域 --><div class="panel centerPanel"></div><!-- 右侧区域 --><div class="panel rightPanel"></div></div></body>
</html>

css部分，同级目录下单独创建style.css文件

css">/* 样式初始化 */
html,
body {width: 100vw;height: 100vh;margin: 0;padding: 0;overflow: hidden;
}/* 总容器样式 */
.container {width: 100%;height: 100%;display: flex;
}/* 面板通用样式 */
.panel {align-self: stretch;width: 300px;
}
/* 左侧面板样式 */
.leftPanel {background: greenyellow;
}/* 中间面板样式 */
.centerPanel {background: pink;flex: 1;
}
/* 右侧面板样式 */
.rightPanel {background: orangered;
}

看下效果：
在这里插入图片描述

总结

以上我们介绍完了css对于前端初学者来说的基础内容，到这里为止你应该可以按照UI设计稿完成大约70%-80%左右的样式编写。虽然仍会有不少特殊样式或者动效无法完成，不过那些都是你熟练掌握现有内容后的拓展知识，一点点进步就好。

这些内容只是css的一小部分，当你逐渐深入前端领域后，会有更多的内容需要学习探索。

再接再厉~


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

相关文章

VB.NET中如何利用LINQ to SQL进行数据库操作

VB.NET中如何利用LINQ to SQL进行数据库操作

在VB.NET中&#xff0c;利用LINQ to SQL进行数据库操作是一种强大的方式&#xff0c;它允许你使用VB.NET的查询语法来直接操作数据库&#xff0c;而无需编写大量的SQL代码。LINQ to SQL是一种ORM&#xff08;对象关系映射&#xff09;技术&#xff0c;它将数据库表映射为.NET中…
阅读更多...
注册安全分析报告：人民卫生音像

注册安全分析报告：人民卫生音像

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…
阅读更多...
架构设计笔记-5-软件工程基础知识-3

架构设计笔记-5-软件工程基础知识-3

知识要点 基于构件的软件开发中，已有的构件分类方法可以归纳为三大类： 关键字分类法：根据领域分析的结果将应用领域的概念按照从抽象到具体的顺序逐次分解为树形或有向无回路图结构。刻面分类法：利用 Facet（刻面）描述构件执行的功能、被操作的数据、构件应用的语境或任意…
阅读更多...
【华为HCIP实战课程一】OSPF相关基础介绍及基础配置，网络工程师必修

【华为HCIP实战课程一】OSPF相关基础介绍及基础配置，网络工程师必修

一、OSPF介绍 开放式最短路径优先协议OSPF（Open Shortest Path First），IPv4使用的OSPFv2，针对IPv6使用OSPFv3协议。 二、为什么需要OSPF OSPF出现之前，网络广泛使用RIP路由协议，RIP由于最大16跳数限制无法适应大型网络，RIP是基于距离矢量算法的路由协议，应用在大型网…
阅读更多...
PostgreSQL 主从的进程和Oracle dataguard的进程对比介绍

PostgreSQL 主从的进程和Oracle dataguard的进程对比介绍

PostgreSQL 主从的进程和Oracle dataguard的进程对比介绍 PostgreSQL 的主从复制和 Oracle Data Guard&#xff08;Oracle 的高可用、灾难恢复和数据保护解决方案&#xff09;在实现高可用性和数据保护方面有很多相似之处&#xff0c;但它们的实现细节和所涉及的进程有所不同。…
阅读更多...
10月2日笔记（内网资源探测篇）

10月2日笔记（内网资源探测篇）

内网资源探测 在内网渗透中&#xff0c;测试人员往往需要通过各种内网扫描技术来探测内网资源的情况&#xff0c;为后续的横向渗透做准备&#xff0c;通常需要发现内网存活的主机&#xff0c;并探测主机的操作系统、主机开放了哪些端口、端口上运行了哪些服务、服务的当前版本…
阅读更多...
每一个云手机的ip是独立的吗

每一个云手机的ip是独立的吗

每一个云手机的IP地址通常是独立的。以下是关于云手机IP地址的一些详细信息&#xff1a; 1. 云手机的概念 云手机是将手机操作系统&#xff08;如Android&#xff09;虚拟化后托管在云服务器上的一种服务。用户可以通过互联网访问和控制这些云手机&#xff0c;进行应用使用、…
阅读更多...
Spring Task 2024/9/30

Spring Task 2024/9/30

Spring Task是Spring框架提供的任务调度工具&#xff0c;可以按照约定时间自动执行某个代码逻辑。 作用&#xff1a;定时自动执行某段java代码。 cron表达式 在线Cron表达式生成器 (qqe2.com)&#x1f448;在线生成网站 入门案例 SkyApplication 启动类 package com.sky;im…
阅读更多...
最新文章

Copyright @ 2022~2023