学习笔记前端入门学习笔记

前端入门01--HTML和CSS基础

Catalogue
  1. 1. 前端入门 01 – HTML和CSS基础
    1. 1.1. 环境准备
    2. 1.2. HTML 最基础的结构
    3. 1.3. 引用 CSS 样式
      1. 1.3.1. 样式选择器
      2. 1.3.2. CSS 基本写法
      3. 1.3.3. 盒模型

前端入门 01 – HTML和CSS基础

环境准备

编辑器：

  • VS Code

插件：

  • City Lights Theme
  • Live Server
  • prettier
  • vim

HTML 最基础的结构

1
2
3
4
5
6
<html>
  <head> </head>
  <body>
      
  </body>
</html>

引用 CSS 样式

有三种方式引用CSS：

  • 内部引用，CSS比较少时，写在一个文件中看起来方便，或者用在复杂的覆盖层级
1
<style></style>
  • 外部引用，写在单独一个文件时比较方便，使用在CSS较多时，或者用他人CSS时
1
<link rel="stylesheet" type="text/css" href="./style.css">
  • 内联样式，作为元素的style属性，常用于覆盖其他样式
1
2
3
<div style="width:50px;" class="red">
    hello world
</div>

内部引用样式优先级顺序取决于写在style标签里的先后顺序，写在后面的会覆盖写在前面的样式

三种样式引用优先级顺序为：内联样式 > 内部样式 > 外部样式

样式选择器

  • id选择器：选取id属性，例如：#red
  • 类选择器：选取class属性，例如：.red
  • 类型选择器：选取元素类型，例如：div

CSS 基本写法

基本格式：选择器 + {属性;}

1
2
3
4
.red {
    background-color:red;
    width:50px;
}

属性名称中带有- 的为子属性

让元素横着排列：向CSS中添加flex属性

1
display:flex

改变元素轴向分布：使用justify-content属性

1
2
居中对齐
justify-content:center

加边框：使用border属性

1
2
border-width:10px;
border-style:solid;

使用flex居中：

1
2
3
display: flex;
justify-content: center;
align-items: center;

盒模型

待补充