HTML（Hypertext Markup Language）超文本标记语言。
它负责网页的三个要素之中的结构。
• HTML使用标签的的形式来标识网页中的不同组成部分。
• 所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
一个最基本的HTML页面：
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>
标签
• HTML中的标记指的就是标签。
• HTML使用标记标签来描述网页。
• 结构：
<标签名>标签内容</标签名>
<标签名 />
元素
• 我们还将一个完整的标签称为元素。
• 这里我们可以将元素和标签认为是一个同
义词。
<h1>一级标题</h1>
上边的h1我们就称为元素
常见的属性：
id: id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值
class: class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多class
title: title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字
id具有唯一性，所有id选择器优先级最高
CSS: 层叠样式表 (Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。
而css就可以分别为网页的各个层次设置样式
基本语法
• CSS的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。
• 语法：
选择器 {样式名:样式值；样式名:样式值 ; }
p {color:red ; font-size:12px;}
行内样式
• 可以直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。
<p style="color: red;font-size: 30px"></p>
这种方式编写简单，定位准确。但是由于 直接将css代码写到了html标签的内部，导 致结构与表现耦合，同时导致样式不能够 复用，所以这种方式我们不使用。
内部样式表
• 可以直接将样式写到
<style>
p{color:red; font-size: 30px;}
</style>
这样使css独立于html代码，而且可以同时为多个元素设置样式，这是我们使用的比较多的一种方式。
• 但是这种方式，样式只能在一个页面中使用，不能在多个页面中重复使用。
外部样式表
• 可以将所有的样式保存到一个外部的css文件中，然后通过标签将样式表引入到文件中。
<link rel="stylesheet" type="text/css" href="style.css">
这种方式将样式表放入到了页面的外部， 可以在多个页面中引入，同时浏览器加载 文件时可以使用缓存，这是我们开发中使 用的最多的方式。
块元素和内联元素
div就是一个块元素，
所谓的块元素就是会独占一行的的元素,无论他的内容有多少
他都会独占一整行。
p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何的语义，span标签专门用来选中文字，
然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素
选择器
选择器（selector），会告诉浏览器：网页上的哪些元素需要设置什么样的样式。
• 比如：p这个选择器就表示选择页面中的所
有的p元素，在选择器之后所设置的样式会
应用到所有的p元素上
元素选择器
• 元素选择器（标签选择器），可以根据标签的名字来从页面中选取指定的元素。
• 语法： 标签名{}
• 比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签。
ID选择器
• ID选择器，可以根据元素的id属性值选取
元素。
• 语法： #id{}
• 比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。
复合选择器
复合选择器，可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。
• 语法： – 选择器1选择器2{}
• 例如div.box1会选中页面中具有box1这个 class的div元素。
群组选择器
群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式。
• 语法：选择器1,选择器2,选择器3 { }
• 比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。
通用选择器
• 通用选择器，可以同时选中页面中的所有 元素。
• 语法： *{ }
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*为页面中的所有的p元素，设置一个字体颜色为红色*/
/*
* 元素选择器
* 作用：通过元素选择器可以选则页面中的所有指定元素
* 语法：标签名 {}
*/
/*p{
color: red;
}
h1{
color: red;
}*/
/*
* id选择器
* - 通过元素的id属性值选中唯一的一个元素
* - 语法：
* #id属性值 {}
*/
/*#p1{
font-size: 20px;
}*/
/*
* 类选择器
* - 通过元素的class属性值选中一组元素
* - 语法：
* .class属性值{}
*/
/*.p2{
color: red;
}
.hello{
font-size: 50px;
}*/
/*
* 为id为p1的元素，class为p2的元素，还有h1,同时设置一个背景颜色为黄色
*/
/*
* 选择器分组(并集选择器)
* - 通过选择器分组可以同时选中多个选择器对应的元素
* - 语法：选择器1,选择器2,选择器N{}
*/
/*#p1 , .p2 , h1{
background-color: yellow;
}*/
/*
* 通配选择器
* - 他可以用来选中页面中的所有的元素
* 语法：*{}
*/
/**{
color: red;
}*/
/*
* 为拥有class p3 span元素设置一个背景颜色为黄色
*
* 复合选择器（交集选择器）
* - 作用：
* - 可以选中同时满足多个选择器的元素
* - 语法：
* - 选择器1选择器2选择器N{}
*/
span.p3{
background-color: yellow;
}
/*
* 对于id选择器来说，不建议使用复合选择器
* p#p1{
background-color: red;
}*/
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<!--
我们可以为元素设置class属性，
class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
-->
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
标签之间的关系
• 祖先元素 – 直接或间接包含后代元素的元素。
• 后代元素 – 直接或间接被祖先元素包含的元素。
• 父元素 – 直接包含子元素的元素。
• 子元素 – 直接被父元素包含的元素。
• 兄弟元素 – 拥有相同父元素的元素
后代选择器：
后代选择器可以根据标签的关系，为处在 元素内部的代元素设置样式。
• 语法：祖先元素 后代元素 后代元素 { }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为div中的span设置一个颜色为绿色
* 后代元素选择器
* - 作用：
* - 选中指定元素的指定后代元素
* - 语法：
* 祖先元素 后代元素{}
*/
#d1 span{
color: greenyellow;
}
/*
* 选中id为d1的div中的p元素中的span元素
*/
#d1 p span{
font-size: 50px;
}
/*
* 为div的子元素span设置一个背景颜色为黄色
* 子元素选择器
* - 作用：
* - 选中指定父元素的指定子元素
* - 语法：
* 父元素 > 子元素
*
* IE6及以下的浏览器不支持子元素选择器
*/
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<!--
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<div>
<span>我是body中的span元素</span>
</div>
</body>
</html>
伪类和伪元素
有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素
有四个伪类可以让你根据访问者与该链接的交 互方式，将链接设置成4种不同的状态。
• 正常链接– a:link
• 访问过的链接 – a:visited（只能定义字体颜色）
鼠标滑过的链接 – a:hover
• 正在点击的链接 – a:active
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 伪类专门用来表示元素的一种的特殊的状态，
* 比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
* 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
*/
/*
* 为没访问过的链接设置一个颜色为绿色
* :link
* - 表示普通的链接（没访问过的链接）
*/
a:link{
color: yellowgreen;
}
/*
* 为访问过的链接设置一个颜色为红色
* :visited
* - 表示访问过的链接
*
* 浏览器是通过历史记录来判断一个链接是否访问过,
* 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
*
*/
a:visited{
color: red;
}
/*
* :hover伪类表示鼠标移入的状态
*/
a:hover{
color: skyblue;
}
/*
* :active表示的是超链接被点击的状态
*/
a:active{
color: black;
}
/*
* :hover和:active也可以为其他元素设置
* IE6中，不支持对超链接以外的元素设置:hover和:active
*/
/*p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}*/
/*
* 文本框获取焦点以后，修改背景颜色为黄色
*/
input:focus{
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a href="http://www.baidu123456.com">没访问过的链接</a>
<p>我是一个段落</p>
<!-- 使用input可以创建一个文本输入框 -->
<input type="text" />
</body>
</html>
文字相关
文字大小
• font-size用来指定文字的大小 px
字体
• 通过font-family可以指定标签中文字使用的字体。
• 一般来说只有用户计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。
• 通过font-family可以同时指定多个字体。
• 例如：
p{font-family:Arial , Helvetica , sans-serif}
• 如上我实际上指定了三种字体，那么到底使用的是哪个呢？浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。
• 这里面sans-serif并不是指的具体某一个字体。而是一类字体
斜体和粗体
font-style用来指定文本的斜体。
– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal
• font-weight用来指定文本的粗体。
– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal
行间距
• line-height用于设置行高，行高越大则行 间距越大。
• 行间距 = line-height
– font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
p{
font-family: 黑体;
font-style: normal;
font-weight: 800;
font-size: 30px;
color: red;
line-height: 40px;
}
</style>
<body>
<p>青软实训<br/>青软实训<br/>
青软实训<br/>
</p>
</body>
</html>
大写化
text-transform样式用于将元素中的字母全都变成大小。
– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none
文本的修饰
text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
• 可选值：
– underline
– overline
– line-through
– none
字母间距和单词间距
• letter-spacing用来设置字符之间的间距。
• word-spacing用来设置单词之间的间距。
• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离
对齐文本
• text-align用于设置文本的对齐方式。
• 可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
font-size: 40px;
text-transform: capitalize;
text-decoration: line-through;
letter-spacing: 8px;
word-spacing: 30px;
}
</style>
</head>
<body>
<span>hello World!!! EveryOne bvjvjvjvnjnvnjvvnj....</span>
</body>
</html>
首行缩进
• text-indent用来设置首行缩进。
• 该样式需要指定一个长度，并且只对第一 行生效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p2{
text-indent: 20px;
}
</style>
</head>
<body>
<p class="p2">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*设置字体颜色,使用color来设置文字的颜色*/
color: red;
/*
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些，也有时会比格大，
根据字体的不同，显示效果也不能
* */
font-size: 30px;
/*
* 通过font-family可以指定文字的字体
* 当采用某种字体时，如果浏览器支持则使用该字体，
* 如果字体不支持，则使用默认字体
* 该样式可以同时指定多个字体，多个字体之间使用,分开
* 当采用多个字体时，浏览器会优先使用前边的字体，
* 如果前边没有在尝试下一个
*/
/*font-family: arial , 微软雅黑;*/
/*
* 浏览器使用的字体默认就是计算机中的字体，
* 如果计算机中有，则使用，如果没有就不用
*
* 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，
* 有可能用户的电脑没有，就不能达到想要的效果。
*/
/*font-family: 华文彩云 , arial , 微软雅黑;*/
font-family: "curlz mt";
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签，ABCDEFGabcdefg
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "微软雅黑";
/*
* font-style可以用来设置文字的斜体
* - 可选值：
* normal，默认值，文字正常显示
* italic 文字会以斜体显示
* oblique 文字会以倾斜的效果显示
* - 大部分浏览器都不会对倾斜和斜体做区分，
* 也就是说我们设置italic和oblique它们的效果往往是一样的
* - 一般我们只会使用italic
*/
font-style: italic;
/*
* font-weight可以用来设置文本的加粗效果：
* 可选值：
* normal，默认值，文字正常显示
* bold，文字加粗显示
*
* 该样式也可以指定100-900之间的9个值，
* 但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
* 也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
*/
font-weight: bold;
/*
* font-variant可以用来设置小型大写字母
* 可选值：
* normal，默认值，文字正常显示
* small-caps 文本以小型大写字母显示
*
* 小型大写字母：
* 将所有的字母都以大写形式显示，但是小写字母的大写，
* 要比大写字母的大小小一些。
*/
font-variant: small-caps ;
}
.p2{
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
/*
* 在CSS中还为我们提供了一个样式叫font，
* 使用该样式可以同时设置字体相关的所有样式,
* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
*
* 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
* 如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
* 大小必须是倒数第二个样式
*
* 实际上使用简写属性也会有一个比较好的性能
*/
font: small-caps bold italic 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="p3">我是一段文字，ABCDEFGabcdefg</p>
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 在CSS并没有为我们提供一个直接设置行间距的方式，
* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
* 使用line-height来设置行高
* 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
*
* 行间距 = 行高 - 字体大小
*/
.p1{
font-size: 20px;
/*
* 通过设置line-height可以间接的设置行高，
* 可以接收的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
/*line-height: 200%;*/
line-height: 2;
}
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* 对于单行文本来说，可以将行高设置为和父元素的高度一致，
* 这样可以是单行文本在父元素中垂直居中
*/
line-height: 200px;
}
.p2{
/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 30px "微软雅黑";
line-height: 50px;
}
</style>
</head>
<body>
<p class="p2">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
<div class="box">
<a href="#">我是一个超链接</a>
</div>
<p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
/*
* text-transform可以用来设置文本的大小写
* 可选值：
* none 默认值，该怎么显示就怎么显示，不做任何处理
* capitalize 单词的首字母大写，通过空格来识别单词
* uppercase 所有的字母都大写
* lowercase 所有的字母都小写
*/
text-transform: lowercase;
}
.p2 {
/*
* text-decoration可以用来设置文本的修饰
* 可选值：
* none：默认值，不添加任何修饰，正常显示
* underline 为文本添加下划线
* overline 为文本添加上划线
* line-through 为文本添加删除线
*/
text-decoration: line-through;
}
a {
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
* */
text-decoration: none;
}
.p3 {
/**
* letter-spacing可以指定字符间距
*/
/*letter-spacing: 10px;*/
/*
* word-spacing可以设置单词之间的距离
* 实际上就是设置词与词之间空格的大小
*/
word-spacing: 120px;
}
.p4{
/*
* text-align用于设置文本的对齐方式
* 可选值：
* left 默认值，文本靠左对齐
* right ， 文本靠右对齐
* center ， 文本居中对齐
* justify ， 两端对齐
* - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
*/
text-align: justify ;
}
.p5{
font-size: 20px;
/*
* text-indent用来设置首行缩进
* 当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
* 这个值一般都会使用em作为单位
*/
text-indent: -99999px;
}
</style>
</head>
<body>
<p class="p5">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
<h1 class="p4">我是一个h1</h1>
<p class="p4">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
<p class="p4">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
</p>
<p class="p3">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</p>
<p class="p3">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
</p>
<a href="#">我是超链接</a>
<p class="p2">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
</p>
<p class="p1">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?” Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. “Dead is dead,” he said. “We have no business with the dead.” “Are they dead?” Royce asked softly. “What proof have we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.” Will had known they would drag him into the quarrel sooner or later. He wished it had been later rather than sooner. “My mother told me that dead men sing no songs,” he put in. “My wet nurse said the same thing, Will,” Royce replied. “Never believe anything you hear at a woman’s tit. There are things to be learned even from the dead.” His voice echoed, too loud in the twilit forest. “We have a long ride before us,” Gared pointed out. “Eight days, maybe nine. And night is falling.” Ser Waymar Royce glanced at the sky with disinterest. “It does that every day about this time. Are you unmanned by the dark, Gared?” Will could see the tightness around Gared’s mouth, the barely suppressed anger in his eyes under the thick black hood of his cloak. Gared had spent forty years in the Night’s Watch, man and boy, and he was not accustomed to being made light of. Yet it was more than that. Under the wounded pride, Will could sense something else in the older man. You could taste it; a nervous tension that came perilous close to fear. Will shared his unease. He had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 使用width来设置盒子内容区的宽度
* 使用height来设置盒子内容区的高度
*
* width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
* 盒子可见框的大小由内容区，内边距和边框共同决定
*/
width: 300px;
height: 300px;
/*设置背景颜色*/
background-color: #bfa;
/*
* 为元素设置边框
* 要为一个元素设置边框必须指定三个样式
* border-width:边框的宽度
* border-color:边框颜色
* border-style:边框的样式
*/
/*
* 设置边框的宽度
*/
/*border-width:10px ;*/
/*
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，
则三个值会分别设置给 上 左右 下
如果指定两个值，
则两个值会分别设置给 上下 左右
如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
* */
/*border-width:10px 20px 30px 40px ;*/
/*border-width:10px 20px 30px ;*/
/*border-width: 10px 20px ;*/
border-width: 10px;
/*border-left-width:100px ;*/
/*
* 设置边框的颜色
* 和宽度一样，color也提供四个方向的样式，可以分别指定颜色
* border-xxx-color
*/
border-color: red;
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
/*border-color: red yellow;*/
/*
* 设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
*
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边
*/
/*border-style: double;*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
盒子模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
• 为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。
• 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局
一个盒子我们会分成几个部分：
– 内容区(content)
– 内边距(padding)
– 边框(border)
– 外边距(margin）
内容区
一个盒子我们会分成几个部分： – 内容区(content) – 内边距(padding) – 边框(border) – 外边距(margin）
内边距
顾名思义，内边距指的就是元素内容区与边框以内 的空间。 • 默认情况下width和height不包含padding的大小。 • 使用padding属性来设置元素的内边距。 • 例如： – padding:10px 20px 30px 40px – 这样会设置元素的上、右、下、左四个方向的内边距。
padding:10px 20px 30px; – 分别指定上、左右、下四个方向的内边距
• padding:10px 20px; – 分别指定上下、左右四个方向的内边距
• padding:10px; – 同时指定上左右下四个方向的内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background-color: yellow;
margin-top: 20px;
margin-left: 50px;
padding-top: 60px;
padding-left: 80px;
border: 5px red groove;
}
</style>
</head>
<body>
<div id="div1">
aaa
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框*/
border: 10px red solid;
/*
* 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
* 一共有四个方向的内边距，可以通过：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 来设置四个方向的内边距
*
* 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
* 盒子的大小由内容区、内边距和边框共同决定
* 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
* 可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
*/
/*设置上内边距*/
/*padding-top: 100px;*/
/*设置右内边距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;*/
/*
* 使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
/*padding: 100px;*/
/*padding: 100px 200px;*/
/*padding: 100px 200px 300px;*/
padding: 100px 200px 300px 400px;
}
/*
* 创建一个子元素box1占满box2
*/
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
边框
可以在元素周围创建边框，边框是元素可见框的最外部。
• 可以使用border属性来设置盒子的边框： – border:1px red solid; – 上边的样式分别指定了边框的宽度、颜色和样式。
• 也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
• 和padding一样，默认width和height并包括边框的宽度。
边框的样式
• 边框可以设置多种样式：
– none（没有边框） – dotted（点线） – dashed（虚线） – solid（实线） – double（双线） – groove（槽线） – ridge（脊线） – inset（凹边） – outset（凸边）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*设置边框
大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
* */
/*border-width:10px ;
border-color: red;
border-style: solid;*/
/*
* border
* - 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
* - 而且没有任何的顺序要求
* - border一指定就是同时指定四个边不能分别指定
*
* border-top border-right border-bottom border-left
* 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
*/
/*border: red solid 10px ;*/
/*border-left: red solid 10px ;*/
/*border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;*/
border: red solid 10px;
border-right: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
外边距
外边距是元素边框与周围元素相距的空间。
• 使用margin属性可以设置外边距。
• 用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。
• 当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，所以这行代码margin:0 auto可 以使元素居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/*
* 外边距指的是当前盒子与其他盒子之间的距离，
* 他不会影响可见框的大小，而是会影响到盒子的位置。
* 盒子有四个方向的外边距：
* margin-top
* margin-right
* margin-bottom
* margin-left
*
* 由于页面中的元素都是靠左靠上摆放的，
* 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
* 而如果是设置右和下外边距会改变其他盒子的位置
*/
/*
* 设置box1的上外边距，盒子上边框和其他的盒子的距离
*/
/*margin-top: 100px;*/
/*
* 左外边距
*/
/*margin-left: 100px;*/
/*设置右和下外边距*/
/*margin-right: 100px;
margin-bottom: 100px;*/
/*
* 外边距也可以指定为一个负值，
* 如果外边距设置的是负值，则元素会向反方向移动
*/
/*margin-left: -150px;
margin-top: -100px;
margin-bottom: -100px;*/
/*margin-bottom: -100px;*/
/*
* margin还可以设置为auto，auto一般只设置给水平方向的margin
* 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
* 垂直方向外边距如果设置为auto，则外边距默认就是0
*
* 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
* 就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
* 以使子元素在父元素中水平居中
*
*/
/*margin-left: auto;
margin-right: auto;*/
/*
* 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
* 规则和padding一样
*/
margin: 0 auto;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
display
我们不能为行内元素设置width、height、 margin-top和margin-bottom。 • 我们可以通过修改display来修改元素的性 质。 • 可选值： – block：设置元素为块元素 – inline：设置元素为行内元素 – inline-block：设置元素为行内块元素 – none：隐藏元素（元素将在页面中完全消失）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
background-color: #bfa;
/*
* 将一个内联元素变成块元素，
* 通过display样式可以修改元素的类型
* 可选值：
* inline：可以将一个元素作为内联元素显示
* block: 可以将一个元素设置块元素显示
* inline-block：将一个元素转换为行内块元素
* - 可以使一个元素既有行内元素的特点又有块元素的特点
* 既可以设置宽高，又不会独占一行
* none: 不显示元素，并且元素不会在页面中继续占有位置
*/
display: none;
/*为其设置一个宽和高*/
width: 500px;
height: 500px;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
/*
* display: none;
* 使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
*/
/*display: none;*/
/*
* visibility
* - 可以用来设置元素的隐藏和显示的状态
* - 可选值：
* visible 默认值，元素默认会在页面显示
* hidden 元素会隐藏不显示
*
* 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，
* 但是它的位置会依然保持
*/
visibility:hidden ;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="#">我是一个大大的超链接</a>
<span>hello</span>
</body>
</html>
visibility
visibility属性主要用于元素是否可见。
• 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
• 可选值：
– visible：可见的
– hidden：隐藏的
overflow
当相关标签里面的内容超出了样式的宽度 和高度是，就会发生一些奇怪的事情，浏 览器会让内容溢出盒子。 • 可以通过overflow来控制内容溢出的情况。
• 可选值： – visible：默认值 – scroll：添加滚动条 – auto：根据需要添加滚动条 – hidden：隐藏超出盒子的内容
浮动
所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。 • 浮动使用float属性。 • 可选值： – none：不浮动 – left：向左浮动 – right：向右浮动 • 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。 • 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度
清除浮动
• clear属性可以用于清除元素周围的浮动对元素的影响。
• 也就是元素不会因为上方出现了浮动元素而改变位置。
• 可选值： – left：忽略左侧浮动 – right：忽略右侧浮动 – both：忽略全部浮动 – none：不忽略浮动，默认
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 600px;
height: 200px;
background-color: red;
/*
* 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
* 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
* 使用float来使元素浮动，从而脱离文档流
* 可选值：
* none，默认值，元素默认在文档流中排列
* left，元素会立即脱离文档流，向页面的左侧浮动
* right，元素会立即脱离文档流，向页面的右侧浮动
*
* 当为一个元素设置浮动以后（float属性是一个非none的值），
* 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，
* 直到遇到父元素的边框或者其他的浮动元素
* 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
* 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
*/
float: left;
}
.box2{
width: 600px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
/*
* 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
* 所以我们可以通过浮动来设置文字环绕图片的效果
*/
/*box1向左浮动*/
float: left;
}
.p1{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p class="p1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。
鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。
哇的一声，夜游的恶鸟飞过了。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
/*
* 在文档流中，子元素的宽度默认占父元素的全部
*/
background-color: #bfa;
/*
* 当元素设置浮动以后，会完全脱离文档流.
* 块元素脱离文档流以后，高度和宽度都被内容撑开
*/
/*float: left;*/
}
.s1{
/*
* 开启span的浮动
* 内联元素脱离文档流以后会变成块元素
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
定位
position属性可以控制Web浏览器如何以 及在何处显示特定的元素。
• 可以使用position属性把一个元素放置到网 页中的任何位置。
• 可选值： – static – relative – absolute – fixed
相对定位
每个元素在页面的文档流中都有一个自然位置。相 对于这个位置对元素进行移动就称为相对定位。周 围的元素完全不受此影响。
• 当将position属性设置为relative时，则开启了元素 的相对定位。
• 当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位
绝对定位
绝对定位指使元素相对于html元素或离他最近 的祖先定位元素进行定位。
• 当将position属性设置为absolute时，则开启 了元素的绝对定位。
• 当开启了绝对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.box1{
background-color: green;
position: absolute;
margin-left: 20px;
}
.box2{
background-color: yellow;
position: relative;
margin-top: 80px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box1">
111
<div class="box2">
2222
</div>
</div>
</body>
</html>
固定定位
固定定位的元素会被锁定在屏幕的某个位置上，当 访问者滚动网页时，固定元素会在屏幕上保持不动。
• 当将position属性设置为fixed时，则开启了元素的 固定定位。
• 当开启了固定定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。
• 固定定位的其他特性和绝对定位类似
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: green;
}
#div1{
position: fixed;
right: 10px;
bottom: 1px;
background-color: yellow;
float: right;
}
</style>
</head>
<body>
<div>111</div>
<div id="div1">111</div>
<div>111</div>
<div>111</div>
<div>111</div>
<div>111</div>
<div>111</div>
<div>111</div>
</body>
</html>
z-index
当元素开启定位以后就可以设置z-index这个属性。
• 这个属性可以提升定位元素所在的层级。
• z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.box1{
background-color: green;
position: absolute;
margin-left: 20px;
margin-top: 20px;
z-index: 3;
}
.box2{
background-color: yellow;
position: absolute;
margin-top: 40px;
margin-left: 40px;
z-index: 2;
}
.box3{
background-color: blue;
position: absolute;
margin-top: 60px;
margin-left: 60px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">
111
</div>
<div class="box2">
222
</div>
<div class="box3">
333
</div>
</body>
</html>
设置元素的背景
background-color
background-color属性用来为元素设置背 景颜色。
• 需要指定一个颜色值，当指定了一个颜色 以后，整个元素的可见区域都会使用这个 颜色作为背景色。
• 如果不设置背景颜色，元素默认背景颜色 为透明，实际上会显示父元素的背景颜色。
background-image
background-image可以为元素指定背景 图片。
• 和background-color类似，这不过这里使 用的是一个图片作为背景。
• 需要一个url地址作为参数，url地址需要指 向一个外部图片的路径
例如： background-image: url(1.jpg）
background-repeat
background-repeat用于控制背景图片的 重复方式。
• 如果只设置背景图片默认背景图片将会使 用平铺的方式，可以通过该属性进行修改。
• 可选值：
– repeat：默认值，图片左右上下平铺
– no-repeat：只显示图片一次，不会平铺
– repeat-x：沿x轴水平平铺一张图片
– repeat-y：沿y轴水平平铺一张图片
background-position
background-position用来精确控制背景 图片在元素中的位置。
• 可以通过三种方式来确定图片在水平方向 和垂直方向的起点。
– 关键字：top right bottom left center
– 百分比
– 数值
background-attachment
background-attachment用来设置背景图片是否随页面滚动。
• 可选值：
– scroll：随页面滚动
– fixed：不随页面滚动
background
• background是背景的简写属性，通过这个属性可以一次性设置多个样式，而且样式的顺序没有要求。
• 例如：
background: green url(1.jpg) no-repeat center center fixed;
导航条效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*
* 清除默认样式
*/
*{
margin:0;
padding:0;
}
/*
* 设置ul
*/
.nav{
/*去除项目符号*/
list-style: none;
/*为ul设置一个背景颜色*/
background-color: #6495ED;
/*设置一个宽度*/
/*
* 在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayout
*/
width: 1000px;
/*设置元素居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
/**
* 设置li
*/
.nav li{
/*设置li向左浮动*/
float: left;
width: 12.5%;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*为a指定一个宽度*/
width: 100%;
/*设置文字居中*/
text-align: center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
color: white;
/*设置加粗*/
font-weight: bold;
}
/*
* 设置a的鼠标移入的效果
*/
.nav a:hover{
background-color: #c00;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
扫一扫
4179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
