第四讲 赋予网页样式

文科编程系列课程-Web开发

第四讲 赋予网页样式

引言

对于任意的标签，我们都可以增加style属性，来控制每个标签的样式。
style属性的内容是一些列由分号隔开的名值对名称: 值。

1 大小

1.1 长度单位

在日常的样式中常见的长度单位有px，em，pt，ex，pc，in，mm，cm。
其中比较常用的是px和百分比。

1.1.1 px（像素）

px是pixel的缩写，表示像素。像素是指在由一个数字序列表示的图像中的一个最小单位。

大家只需要理解这个像素的概念即可。但大家可能对这个单位还没有一个具体形象的认识，后面的操作过程中会有实践的机会。

1.1.2 百分比

百分比长用于规定元素的长宽，表示该元素是父元素长宽的百分之多少。

1.2 宽高

1.1.1 宽度

width: 100px;

1.1.2 高度

height: 40px;

1.1.3 边框

border: 2px;

2. 颜色

2.1 颜色的三种表示形式

2.1.1 颜色词

可以直接用表示颜色的单词来表示颜色。

2.1.2 RGB

RGB是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。
注意写的形式rgb(50, 148, 248)

除了rgb的形式外，还有rgba，是指增加了一个参数来代表透明度。0表示全透明，1表示不透明。

2.1.3 十六进制颜色码

是用十六进制来编码颜色的一种方式。
可以通过网上的编码表来找，可以通过拾色器等来完成颜色选取。

2.2 字体颜色

color: blue;
color: rgb(0, 124, 249);
color: #007cf9;

2.3 背景色

background-color: blue;

2.4 边框颜色

border-color: blue;

3 文本

3.1 字体大小

font-size: 20px;

网页默认的字体大小是16px

3.2 字体样式

font-family: 楷体;

3.3 字体粗细

font-weight: 600;

3.4 文本对齐

text-align: left;
text-align: center;
text-align: right;

3.5 行高

line-height: 20px;

3.6 字间距

letter-spacing: 2px;

3.7 首行缩进

text-indent: 50px;

4 边距

4.1 内边距

内边距的表示有四种常见的形式

4.1.1 第一种

如下。

padding: 10px;

表示上下左右的内边距都是10个像素。

4.1.2 第二种

如下。第一个参数表示竖直方向的内边距，第二个参数表示水平方向的内边距。

padding: 10px 20px;

表示上下内边距为10像素，左右内边距为20像素。

4.1.3 第三种

如下。四个参数分别表示的是上、右、下、左的内边距。

padding: 10px 20px 5px 12px;

4.1.3 第四种

如下。有针对性地确定边距的大小。

padding-top: 10px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 12px;

4.2 外边距

外边距的单词是margin，表示形式同内边距。

5 图片和视频的大小

图片和视频的大小控制略有特殊，直接在对应标签里加width和height属性。

<img src="demo.jpg" width="400px" height="300px">

6 课后作业

本次作业二选一

• 请用本节课学到的表示样式的方式美化你的简历。
• 找一个比较简单的网页，试着做一个相同的出来。
  
  

声明
本讲义仅用于文科编程教学，是针对于文科生编程学习的定制化讲授模式，其中个别概念的阐释及举例或与计算机专业领域有些微出入，还请各位大咖包涵！
本人资历尚浅，欢迎各位博主批评指正！