之前一直在修改现成的项目,学习的内容也是现学现用,没有很系统的学习,这次决定发一些时间,系统的学习,以便充实自己的前端知识,也想提升自己的前端技术。
今天总结的是HTML5基础的第一部分代码入门,主要涉及样式表、边框、背景设置、文字文本、padding、margin以及盒模型等。
一、样式表
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
我们在写html页面的时候,除了写html的结构之外,为了让网页更友好或者说显示的更美观,我们就需要进行页面的修改,这也是为什么我们需要写css的原因。那我们要如何写css代码呢。通过学习,我们了解到了一些css的样式表达,比如说width,height等,但是我们不知道怎么应用到页面中,所以接下来讲解如何将这些css样式代表嵌入到html页面中。
嵌入方式分为三种,第一种是行间样式,第二种是内部样式表,第三种是外联样式表。接下来分别讲解三种的用法以及如何使用的小案例。
1、行间样式
行间样式就是给单独的标签添加样式,在每个标签中添加style属性,然后在其中写入你想要的样式设置。
语法:如<div style="……"></div>
如:
<div style="width: 100px;height: 100px;background-color: #37cad2">行间样式</div>
效果:
2、内部样式表
内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。
在使用内部样式表进行样式修饰时,必须获取到你想要修饰的标签才可以进行样式的编写。
语法:在<head></head>中添加<style></style>标签,然后在其中写入样式。
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height: 100px;
background-color: #5cfc68;
}
</style>
</head>
<body>
<div id="div1">内部样式表</div>
</body>
</html>
效果:
3、外联样式表
外联样式表就是将所有的样式独立写在一个css的文件中,然后通过语句<link href="###.css" rel="stylesheet"/>将样式表应用到当前网页中。可以同时引入多个css文件。
语法:<link href="###.css" rel="stylesheet"/>
如:
test.css: