写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

站长

2024年09月03日 17:09 · 阅读数 29

这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：

用html和css做个牛逼的网站，不能少于7个页面。网站要用到div布局、段落、图片、列表、表格、超链接等常用元素。根据完成情况算作最后成绩，没做直接算挂科。

这个 WEB 大作业把我和女朋友折腾的够呛，其实是把我折腾的够呛。

女朋友不会做，她就折腾我帮她做。后来连着熬了几天夜，终于做出来了，幸运的是最后我俩都过了。

现在想想，其实 HTML 和 CSS 也就那么一回事，说白了就是复制粘贴标签，最重要的还是创意和审美。

1. 啥是 html

官方解释：

HTML 全称 HyperText Markup Language，中文解释：超文本标记语言。

看完官方的解答你可能还是一脸懵逼。

说白了就是我们用一个前端开发工具遵守 html 语言的规范开发一段前端代码，然后放到浏览器上。

浏览器加载渲染我们写的 html 代码，我们就能看到渲染之后的页面了。

其实网上几乎所有的页面输出的都是 html 代码，我们随便打开一个网站页面然后点击查看源代码就能发现：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

2. html 规范

2.1 html 元素

html 元素包含开始标签和结束标签，元素的内容是开始标签与结束标签之间的内容。例如：

 <p> 求老师不挂科！！！</p>

html 中元素的标签一般成对出现，但是也有单标签元素，例如：

<br> 换行
<hr> 分割线
<img> 图片
<input> 输入框

2.2 html 代码区域

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

1. DOCTYPE html：声明一下该文档是 html 文档，这个不用管。
1. html：HTML 页面的根元素，相当于房子的根基。
1. head：头部元素，包含页面的标题。我们有时候也会在里面写内部 css 样式。
1. body：我们主要在这里面写 html 代码，html 页面也主要显示 body 里面的内容。

总结：

html 规范定义了 html 的代码元素布局，我们主要在 body 标签里面写 html 代码，所以其他固定的部分(比如根标签、头部元素)直接复制粘贴就行。

2.3 开发工具

我们知道 html 文档的后缀为 .html，所以不管用什么编辑器，写完html代码之后只要文档的后缀为.html，就能用浏览器打开。

但是好的开发工具可以帮我们节省很多时间，这里推荐使用 VSCODE，为什么推荐它？看图：

1.英文输入法，输入!，回车之后初始化 html 页面元素。

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

2.快速打出成对标签或者单标签元素：输完元素直接Tab 键。

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

3.快速打出多个标签以及子标签。同级标签用+，子标签用 >。

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

4.给标签加 id 和 class。id 属性用#，class 属性用.。

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

所以用这个开发工具写 html 代码就是玩！当然啦别人推荐的不一定是最好的，大家可以找适合自己的工具，例如 sublime、webstorm 等。

3. html 基础用法

3.1 html 属性

属性表示元素的附加信息。
属性总是以名称/值对的形式出现，例如：title="这是标题"。
浏览器不会显示属性的信息。

例如：

<img id="img" src="www.baidu.com" alt="百度首页" title="点击显示百度网址">

html常用属性：

属性名	描述
id	元素的唯一标识，就像人的身份证。
class	给元素定义一个或者多个类名，类名可以重复。
style	元素的行内样式，下面讲到css会提到。

3.2 块元素和内联元素

块级元素在浏览器显示时独占一行，例如：

  <h1>静夜思</h1>
  <p>窗前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

内联元素显示时占一行中的一部分，其中单标签元素都是内联元素。例如：

<a href="https://www.baidu.com">百度首页</a><span>点击显示百度首页</span>
<p>春节联欢晚会的结尾曲目是<span>难忘今宵</span></p>
<label for="name">姓名</label><input type="text" name="姓名" id="name" />

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

html 中常见的块级元素和内联元素:

块元素	内联元素
div	a
p	img
h1-h6	span
ul	em
ol	strong

3.3 div 布局

我觉得网页布局是 html 中非常重要的一部分，它根据网页不同的功能将其划分成不同的区域。所以网页布局体现了网页的整体外观。

在 html 中我们使用 div 标签设计网页的布局，一般和css结合使用。例如：

<body>
    <div id="container" style="text-align: center;font-weight: bold;font-size: 50px;" >
        <div id="header" style="height:130px;background: #00acee;line-height:130px;">这是头部信息</div>
        <div id="main"  style="height:700px;background: gainsboro;line-height:700px;">
            <div id="left" style="width:50%;height:700px;background: palegreen;float: left;">中间左边</div>
            <div id="right" style="width:50%;height:700px;background: #f5df2e;float: right;">中间右边</div> 
        </div>
        <div id="footer" style="height:100px;background: #eff3f6;line-height:100px;">Copyright © 2010-2021 一颗雷布斯</div>
    </div>
</body>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

3.4 超链接

点击超链接，可以跳转到另一个页面，例如：

<a href="https://www.baidu.com/">点击访问百度</a>

除了可以跳转到不同的页面，超链接还可以跳转到同一个页面的不同位置，这就是 html 中的锚点。锚点的链接为#id属性，例如：

<body>
    <a href="#d1">跳转到d1位置</a>
    <p id="a1">床前明月光</p>
    <p id="b1">疑是地上霜</p>
    <p id="c1">举头望明月</p>
    <p id="d1">低头思故乡</p>
</body>

3.5 html 框架

3.5.1 同一浏览器窗口显示不同页面

通过使用 iframe 标签，可以在同一个浏览器窗口中嵌套多个页面。例如： hello.html:

<body>
    <p id="a1">床前明月光</p>
    <p id="b1">疑是地上霜</p>
    <p id="c1">举头望明月</p>
    <p id="d1">低头思故乡</p>
    <iframe src="aa.html" frameborder="5">66666</iframe>
</body>

aa.html:

<body>
    <a href="https://www.baidu.com/">百度首页</a>
</body>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

3.5.2 去除边框

frameborder 属性用于定义 iframe 的边框大小，当属性值为0时移除 iframe 的边框，例如：

<iframe src="aa.html" frameborder="0">66666</iframe>

3.5.3 设置高度与宽度

height 和 width 属性用来定义 iframe 标签的高度与宽度，例如：

<iframe src="aa.html" width="500" height="500" frameborder="5"></iframe>

3.5.4 显示目标链接页面

iframe 可以显示一个目标链接的页面，目标链接的 target 属性必须是 iframe 的 name 属性的值，例如：

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

3.6 图像

img 标签用来在页面上显示图像信息。

3.6.1 设置高度和宽度

height 与 width 属性用于设置图像的高度与宽度。例如：

<body>
    <img src="http://photo.tuchong.com/2318623/f/975709119.jpg" alt="美女"  title="哇哇哇！美女" width="280px" height="500px">
</body>

3.6.2 title 属性

鼠标移动到图片上面去，会显示这个图片指定的 title 的属性文字。

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

3.6.3 alt 属性

如果图像没有下载或者加载失败，会用 alt 属性设置的文字来代替图像显示。

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

4. 啥是 css

如果把网页设计比喻成盖房子，那 html 代码相当于盖了个毛坯房，css 就相当于精装房。

css 用来改变 html 元素的样式，比如字体的大小粗细、边框的颜色、页面的布局等。css 就像化妆术一样，把页面变得超级好看。

5. css 规范

CSS 规范由两部分构成：选择器和属性键值对。写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB 例如：

6. css 三种引入方式

6.1 行间样式

行间样式意思就是直接在这一行给该元素设置样式，语法格式：

style=" 属性键值对 "

例如：

<p style="font-size: 20px;">我爱你祖国</p>

6.2 内部样式

内部样式相当于在同一代码文件中其他地方定义了 css 样式，语法格式：

<style>
    属性键值对
</style>

例如：

<body>
    <p>我爱你祖国</p>
    <style>
        p {
            font-size: 20px;
            color: red;
        }
    </style>
</body>

不过规范起见，我们一般在 html 的 head 里面写内部样式，例如：

<!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>一颗雷布斯</title>
    <style>
        p {
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <p>我爱你祖国</p>
</body>

</html>

6.3 外部样式

外部样式就是我们将 css 样式专门放到一个文件里，这个文件以.css为后缀，然后在 html 文件里面引入该样式。例如：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

引入格式：

 <link href="XXXXX.css" rel="stylesheet" type="text/css"/>

<!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>一颗雷布斯</title>
    <link href="hello.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <p>我爱你祖国</p>
</body>

</html>

7. css 选择器

我们知道 html 文档的元素就是最基本的选择器，例如：

<style>
    html{
        text-align: center;
    }
    body{
        margin: 10px;
    }
    p{
        font-size: 20px;
    }
    h1{
        font-size: 20px;
    }
</style>

但是如果我们想单独给某一个元素或者给一堆相同的元素设置样式该怎么办？

对，给元素设置选择器。

7.1 id 选择器

CSS 中 id 选择器以#来定义，id 选择器是唯一的，就像人的身份证一样。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        #p1 {font-size: 10px;}
        #p2 {font-size: 20px;}
        #p3 {font-size: 30px;}
        #p4 {font-size: 40px;}
    </style>
</head>

<body>
    <p id="p1">床前明月光</p>
    <p id="p2">疑是地上霜</p>
    <p id="p3">举头望明月</p>
    <p id="p4">低头思故乡</p>
</body>

</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

7.2 类选择器

CSS 中类选择器以.来定义，类选择器表示同一类。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        .poet {font-size: 20px;color: red;}
    </style>
</head>

<body>
    <p class="poet">床前明月光</p>
    <p class="poet">疑是地上霜</p>
    <p class="poet">举头望明月</p>
    <p class="poet">低头思故乡</p>
</body>

</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

7.3 组合选择器

组合选择器表明了两个选择器之间的关系。

7.3.1 子选择器

子元素选择器选取某元素直接一级子元素，元素之间用>进行分隔，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        div > p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>唐宋八大家</h2>
        <p>唐代：柳宗元、韩愈，宋代：欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

7.3.2 后代选择器

后代选择器表示选取某元素的后代子元素，元素之间用空格分隔，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        div p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>唐宋八大家</h2>
        <p>唐代：柳宗元、韩愈，宋代：欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
        <h2>古代四大美男</h2>
        <p>潘安、兰陵王、宋玉、卫玠</p>
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

7.3.3 兄弟选择器

1.相邻兄弟元素选择器：选择与其紧挨着的第一个兄弟元素，并且两元素之间有相同的父亲。两元素之间用+分隔，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        h2+p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>唐宋八大家</h2>
        <p>唐代：柳宗元、韩愈，宋代：欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
        <p>古代四大美男</p>
        <p>潘安、兰陵王、宋玉、卫玠</p>
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

2.所有兄弟元素选择器：选择指定元素所有的兄弟元素，这些元素必须是同一个父亲。元素之间用~分隔，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        h2 ~ p{color: red; }
    </style>
</head>
<body>
    <div>
        <h2>唐宋八大家</h2>
        <p>唐代：柳宗元、韩愈，宋代：欧阳修、苏洵、苏轼、苏辙、王安石、曾巩</p>
        <p>古代四大美男</p>
        <p>潘安、兰陵王、宋玉、卫玠</p>
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

7.4 属性选择器

属性选择器用来设置特定属性的样式，语法格式：

[属性名]{

}
[属性名="属性值"]{

}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        [title]{
            color: red;
        }
        input[type="password"]{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div>
       <a title="注册姓名" href="http://register/">注册姓名</a><br>
       姓名：<input type="text" name="name" id=""><br>
       密码：<input type="password" name="password" id=""><br>
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

8. css 常用样式

8.1 字体

8.1.1 字体大小

字体大小用 font-size设置，例如

p{font-size: 20px;}

8.1.2 颜色

字体颜色用color设置，例如：

p{color:red;}

8.1.3 加粗

字体加粗用font-weight设置，例如：

p{font-weight:bold}

8.2 伪类

8.2.1 超链接伪类

伪类就是选取某一状态下的元素。语法格式：

元素：状态{ 属性键值对}

对于超链接而言，一般有4种状态，例如：

状态	语法
未访问	a:link {color:red;}
已访问	a:visited {color:red;}
鼠标悬浮	a:hover {color:red;}
已选中	a:active {color:red;}

注：设置顺序为 lvha。

超链接伪类案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        a:link {color: black;}
        a:hover { font-size: 20px;color: red;}
    </style>
</head>

<body>
    <div>
        <a title="员工管理" href="javascript:;">员工管理</a><br>
        <a title="部门管理" href="javascript:;">部门管理</a><br>
        <a title="工资管理" href="javascript:;">工资管理</a><br>
    </div>
</body>
</html>

运行结果：写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

8.2.2 表单伪类

表单常见伪类：

选择器	案例	描述
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:enabled	input:enabled	择所有启用的表单元素
:required	input:required	选择有required属性的元素

8.3 元素显示

8.3.1 隐藏元素

p {display:none;}

8.3.2 将元素显示为内联元素

p {display:inline;}

8.3.3 将元素显示为块元素

span {display:block;}

8.4 盒子模型

所有 HTML 页面都可以看作一个盒子。写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

margin: 表示div和浏览器，div和div之间的距离，又叫外边距。
border: 表示div的边框。
padding: 表示div里面的内容和div之间的距离，又叫内边距。

8.4.1 设置 div 的宽度和高度

div{
    width: 20px;
    height: 100px;
}

width和height的值除了可以是px(像素)，还可以是百分比，例如

div{
    width: 20%;
    height: 50%;
}

8.4.2 设置 div 的边框

语法格式：

 border: 线条大小 线条样式 线条颜色;

例如：

div{
   border: 1px solid red;
}

8.4.2 设置 margin 和 padding

没设置之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        div{
            background-color: gainsboro;
            width:50%;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
       <p>我爱你祖国！！！</p>
    </div>
</body>
</html>

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

设置之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        div{
            background-color: gainsboro;
            width:50%;
            height: 100px;
            border: 2px solid red;
            margin: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div>
       <p>我爱你祖国！！！</p>
    </div>
</body>
</html>

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

注：margin 和 padding 后面都可以跟上top、left、right、bottom，表示距离顶部、左、右、底部。设置div居中：{margin: 0 auto; }.

8.5 定位

html 中的定位用 position 属性表示。

固定定位:

position:fixed;

特点：位置固定不变，不占位置，只以浏览器进行定位。

相对定位:

position:relative;

特点：相对于自己原来的位置进行定位。

利用top、left、right、bottom 进行移动，定位后仍然占据自己原来的位置。

绝对定位:

position:absolute;

特点：相对于离自己最近并且已经定位的元素进行定位。

如果父元素没有定位，以浏览器当前屏幕对齐。如果父亲有定位，则以最近的已经定位的父元素进行定位。利用top、left、right、bottom 进行移动，定位后不占位置。

注：如果有父子元素，一般是父元素相对定位，子元素绝对定位。

8.6 浮动

8.6.1 浮动定义

css 中浮动的关键词是 float，浮动会使元素向左或者向右漂浮起来，不占位置。语法：

float:left;
或者
float:right;

没使用浮动案之前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        div#a1 {
            background-color: pink;
            width: 300px;
            height: 300px;
        }
        div#a2 {
            background-color: palegreen;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="a1">
        我爱你祖国！！！
    </div>
    <div id="a2">
        我爱你祖国！！！
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

使用左浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一颗雷布斯</title>
    <style>
        div#a1 {
            background-color: pink;
            width: 300px;
            height: 300px;
            float: left;
        }
        div#a2 {
            background-color: palegreen;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="a1">
        我爱你祖国！！！
    </div>
    <div id="a2">
        我爱你祖国！！！
    </div>
</body>
</html>

运行结果：

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

讲解：从上面的例子中我们可以看到第一个div使用了左浮动，它向左上角飘起来了，所以下面的div就占据了它的位置。

8.6.2 清除浮动

使用 clear 属性指定元素两侧不能出现浮动元素，语法格式：

div {clear:both;}

注意：加了定位和浮动的盒子，{margin: 0 auto} 失效。

9 推荐学习网站

html 和 css 其他用法大家可以自行在网上搜索，这里推荐两个自学网站：

https://www.runoob.com/  菜鸟教程

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

https://www.w3school.com.cn/  W3School

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB

10 总结

我觉得 html 中最总要的是 div 布局，css 中最重要的是盒子模型、定位和浮动。这几个需要好好理解一下，其他的不用过多记忆，如果忘记了去网上搜一下即可。

转载自:https://juejin.cn/post/7038586637403570189

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业： 这个 WEB

1. 啥是 html

2. html 规范

2.1 html 元素

2.2 html 代码区域

2.3 开发工具

3. html 基础用法

3.1 html 属性

3.2 块元素和内联元素

3.3 div 布局

3.4 超链接

3.5 html 框架

3.5.1 同一浏览器窗口显示不同页面

3.5.2 去除边框

3.5.3 设置高度与宽度

3.5.4 显示目标链接页面

3.6 图像

3.6.1 设置高度和宽度

3.6.2 title 属性

3.6.3 alt 属性

4. 啥是 css

5. css 规范

6. css 三种引入方式

6.1 行间样式

6.2 内部样式

6.3 外部样式

7. css 选择器

7.1 id 选择器

7.2 类选择器

7.3 组合选择器

7.3.1 子选择器

7.3.2 后代选择器

7.3.3 兄弟选择器

7.4 属性选择器

8. css 常用样式

8.1 字体

8.1.1 字体大小

8.1.2 颜色

8.1.3 加粗

8.2 伪类

8.2.1 超链接伪类

8.2.2 表单伪类

8.3 元素显示

8.3.1 隐藏元素

8.3.2 将元素显示为内联元素

8.3.3 将元素显示为块元素

8.4 盒子模型

8.4.1 设置 div 的宽度和高度

8.4.2 设置 div 的边框

8.4.2 设置 margin 和 padding

8.5 定位

8.6 浮动

8.6.1 浮动定义

8.6.2 清除浮动

9 推荐学习网站

10 总结

写给女朋友看的html和css教程这不马上要期末考试了，突然想起大一时我们网页设计老师布置的期末大作业：这个 WEB