HTML(HyperText Markup Language)就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素,如:图⽚、链接、⾳乐等等。
它是⼀种建⽴⽹⻚⽂件的语⾔,通过标记式的指令(Tag),将影像、声⾳、图⽚、⽂字等链接显示出来。这种标记性语⾔是因特⽹上⽹⻚的主要语⾔。
HTML ⽹⻚⽂件可以使⽤记事本、写字板、HBuilder、Sublime 等编辑⼯具来编写,以 .htm 或 .html 为⽂件后缀名保存。将 HTML ⽹⻚⽂件⽤浏览器打开显示,若测试没有问题则可以放到服务器(Server)上,对外发布信息。
HTML 标记是由"<“和”>“所括住的指令标记,⽤于向浏览器发送标记指令。
主要分为:单标记指令、双标记指令(由”<起始标记>“+内容+”“构成)。
HTML语⾔使⽤标志对的⽅法编写⽂件,既简单⼜⽅便。它通常使⽤”<标志名>内容"来表示标志的开始和结束,因此在HTML⽂档中这样的标志对都必须是成对使⽤的。
为了便于理解,将HTML标记语⾔⼤致分为:基本标记、格式标记、⽂本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。
单标签,不设置属性值。如:
<br/>、<hr/>
单标签(也叫空元素),设置属性值。如:
<br/>、<hr/>
双标签,不设置属性值。如:
<title>…title>
双标签,设置属性值。如:
<br/>、<hr/>
<hr width="800" />
<title>…title>
<body bgcolor="red">…body>
<font size="7">…font>
HTML的内容都是由⼀对⼀对的标签组成,标签不能混乱,⻚⾯有⻚⾯的整体架构和规则,标签和标签之间有需要正确嵌套。
通常⼀个HTML⽹⻚⽂件包含3个部分:标记头区......
、内容区......
和⽹⻚区 区 ......
。
<html>
<head>head>
<body>body>
html>
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML⽂档的基本结构title>
<script>script>
<link rel="stylesheet" type="text/css" href=""/>
<style>style>
head>
<body>
body>
html>
标志⽤于 HTML ⽂档的最前边,⽤来标识
HTML
⽂档的开始。⽽ 标志放在HTML⽂
档的最后边,⽤来标识 HTML ⽂档的结束,两个标志必须⼀块使⽤。
head 构成 HTML ⽂档的开头部分。head 标志对之间的内容是不会在浏览器的框内显示出来的,两个标
志必须⼀块使⽤。
在此标志对之间可以使⽤ title、script、meta、link 等标签。
meta:⽤来提供关于⽂档的信息,起始属性为:charset=“utf8”。表示告诉浏览器⻚⾯采⽤的什么编
码,⼀般来说我们就⽤ utf8。当然,⽂件保存的时候也是 utf8,⽽浏览器也设置 utf8 即可正确显示中
⽂。
link:⽤来引⼊ css ⽂件。
script:⽤来引⼊ js ⽂件或编写js代码。
title 定义⽂档的标题。浏览器会以特殊的⽅式来使⽤标题,并且通常把它放置在浏览器窗⼝的标题栏或状态栏上。同样,当把⽂档加⼊⽤户的链接列表或者收藏夹或书签列表时,标题将成为该⽂档链接的默认名称。
注意:title 标签位于 head 标签内,是 head 标签中唯⼀要求包含的东⻄。
⼀般情况下⼤部分浏览器上显示的内容,都放在 body 中。但也不排除其他标签可以不⽤ body,⽐如frameset 框架集标签。
body 是 HTML ⽂档的主体部分,在此标志对之间可包含 div、a、p、h1、hr 等众多的标志。它们所定义的⽂本、图像等将会在浏览器的框内显示出来。
常⽤属性
属性 | 值 | 描述 |
---|---|---|
bgcolor | #xxxxxx:⼗六进制的数字,00-ffcolorname:Red、Green…rgb(x,x,x):redgreen、blue,x:0-255 | 规定⽂档的背景颜⾊,以后可以⽤样式取代它 |
text | rgb(x,x,x) #xxxxxx colorname | 规定⽂档中所有⽂本的颜⾊,以后可以⽤样式取代它 |
Document Type HyperText Mark-up Language,⽂档中超⽂本标记语⾔的类型,可告知浏览器怎么解析该⽂档。
由于使⽤的场景或者版本的更替间,HTML使⽤的标准不同,所以需要浏览器按照不同的标准来解析HTML ⽂本内容,这就需要告知浏览器我当前的 HTML ⻚⾯是按照那种⽅式进⾏编写的。没有该声明,将是你HTML噩梦的开始。
HTML ⻚⾯是由标签组成,不同的标签浏览器对其进⾏不同样式和内容的渲染 ,我们需要记忆常⽤的标签即可。⼤致可分为如下⼏类:标题、⽔平线、段落、换⾏、图⽚、表格、超链接、列表、表单、下拉列表、div 和 span等。
h1 - h6 标签可定义标题,标题依次递减,由于 h 元素拥有确切的语义,因此请慎重地选择恰当的标签层级来构建⽂档的结构。请不要利⽤标题标签来改变同⼀⾏中的字体⼤⼩。相反,我们应当使⽤层叠样式表定义来达到漂亮的显示效果。
h999这样的标签不产⽣错误,但是不具有标题的效果。
h1标签可以为搜索引擎获取,便于⻚⾯在被搜索的时候检索到,但是⼀个⻚⾯最好只有⼀个h1标签,否则可能进⼊搜索引擎的⿊名单。
hr 标签在 HTML ⻚⾯中创建⼀条⽔平线(horizontal rule)可以在视觉上将⽂档分隔成各个部分。在HTML 中,hr 标签没有结束标签。
常⽤属性
属性 | 值 | 描述 |
---|---|---|
align | center left right | 规定 hr 元素的对⻬⽅式,以后可以⽤样式取代它 |
size | pixels | 规定 hr 元素的⾼度(厚度),后可以⽤样式取代它 |
width | pixels % | 规定 hr 元素的宽度,后可以⽤样式取代它 |
p标签定义段落。p 元素会⾃动在其前后创建⼀些空⽩。浏览器会⾃动添加这些空间,您也可以在样式表中规定。
理解:语⽂课本中各个段落之间会有⼤的空隙。
<p>p>
常⽤属性
属性 | 值 | 描述 |
---|---|---|
align | left、right、center、justify | 规定段落中⽂本的对⻬⽅式,以后可以⽤样式取代它 |
br标签为换⾏符号 br 标签是空标签(意味着它没有结束标签,因此这是错误的:
)。
注意:br 标签只是简单地开始新的⼀⾏,⽽当浏览器遇到 p 标签时,通常会在相邻的段落之间插⼊⼀些垂直的间距。请使⽤br 来输⼊空⾏,⽽不是分割段落。
<br/>
由 ul 和 li 标签组成。
<ul>
<li>li>
<li>li>
......
ul>
<ul>
<li>好好学习li>
<li>天天向上li>
ul>
常⽤属性
属性 | 值 | 描述 |
---|---|---|
type | disc 、circle 、square | 规定列表的项⽬符号类型。可以使⽤样式取代。dise:实⼼圆(默认)’circle:空⼼圆‘square:⽅块 |
由 ol 和 li 标签组成。
<ol>
<li>li>
<li>li>
......
ol>
<ol>
<li>好好学习li>
<li>天天向上li>
ol>
常⽤属性
属性 | 值 | 描述 |
---|---|---|
type | 1、a、A、i、I | 规定在列表中使⽤的标记类型。1:⽤数字形式表示序号(默认)。a:⽤⼩写字⺟表示序号。A:⽤⼤写字⺟表示序号。i:⽤⼩写罗⻢数字表示序号I(⼤写i)。:⽤⼤写罗⻢数字表示序号 |
常⽤属性 规定⽂本的字体、字体尺⼨、字体颜⾊ 定义预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。⽽⽂本也会呈现为等宽字体 b(粗⽂本)、i(斜体⽂本)、u(下划线⽂本)、 a标签定义超链接,⽤于从⼀张⻚⾯链接到另⼀张⻚⾯。 常⽤属性 锚点的实现 ⼀般标签的id属性:div id=""、a id="" 等: 锚点定位 img 元素向⽹⻚中嵌⼊⼀幅图像。 必须属性 常⽤属性 tr常⽤属性 td 的colspan和rowspan分别规定单元格横跨的列数和⾏数 form 标签⽤于为⽤户输⼊创建 HTML 表单。 method:表单提交⽅式:get、post input 标签⽤于搜集⽤户信息。 若上传⽂件,请求⽅式为post,且表单添加⼀个属性:enctype=“multipart/form-data” 该标签定义多⾏的⽂本输⼊控件。⽂本区中可容纳⽆限数量的⽂本,可以通过 cols 和 rows 属性来规定 textarea 的尺⼨。cols规定⽂本区内的可⻅宽度。rows规定⽂本区内的可⻅⾏数。 常⽤属性 select⽤于定义下拉列表 select常⽤属性 option常⽤属性 在 HTML 中,某些字符是预留的。 HTML中标签元素三种不同类型:块状元素,⾏内元素,⾏内块状元素。 元素都从新的⼀⾏开始,并且其后的元素也另起⼀⾏;元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置;元素宽度在不设置的情况下,是它本身⽗容器的100%(和⽗元素的宽度⼀致),除⾮设定⼀个宽度。 和其他元素都在⼀⾏上;元素的⾼度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的⽂字或图⽚的宽度,不可改变。 和其他元素都在⼀⾏上;元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。 CSS(英⽂全称:Cascading Style Sheets)层叠样式表, 是⼀种⽤来表现HTML(标准通⽤标记语⾔的⼀个应⽤)或XML(标准通⽤标记语⾔的⼀个⼦集)等⽂件样式的计算机语⾔。 CSS 样式由选择器和⼀条或多条以分号隔开的样式声明组成。每条声明的样式包含着⼀个 CSS属性和属性值。 注意: 多⾏注释: "color:red;font-size:50px;">这是⼀段⽂本 在当前元素使⽤ style 属性的声明⽅式。 test.html rel:rel 属性规定当前⽂档与被链接⽂档之间的关系。 在 CSS 中,选择器是⼀种模式,⽤于选择需要添加样式的元素。 选择所有 * 选择指定标签 选择设置过指定id属性值的元素 # 选择设置过指定class属性值的元素 . 当⼏个元素样式属性⼀样时,可以共同调⽤⼀个声明,元素之间⽤逗号分隔 CSS样式的优先级,是根据选择器的精确度/权重来决定的,常⻅的权重如下,权重越⼤,优先级越⾼ CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合⽅式。在 CSS 中包含了四种组合⽅式: 后代选取器(以空格分隔),⼦元素选择器(以⼤于号分隔),相邻兄弟选择器(以加号分隔),普通兄弟选择器(以波浪线分隔)。 ⽤于选择指定标签元素下的后辈元素,以空格分隔 ⽤于选择指定标签元素的所有第⼀代⼦元素,以⼤于号分隔 html代码同上 可选择紧接在另⼀元素后的元素,且⼆者有相同⽗元素。以加号分隔 选择紧接在另⼀个元素后的所有元素,⽽且⼆者有相同的⽗元素,以波浪线分隔 CSS 背景属性⽤于定义HTML元素的背景效果 设置元素的背景颜⾊ 设置元素的背景图像,默认情况下,背景图像进⾏平铺重复显示,以覆盖整个元素实体。 设置是否及如何重复背景图像 设置⽂本对⻬⽅式,center(居中),left(左对⻬),right(右对⻬) 规定添加到⽂本的修饰,属性值:none、underline、overline、line-through 设置⽂本⾸⾏缩进 em⼀个相对值,例如⻚⾯的⽂本⼤⼩为17px,则2em就为17px*2 ⽂本字体,该属性设置⽂本的字体。 2)多个字体系列是⽤⼀个逗号分隔指明 ⽂本⼤⼩ 字体⻛格,该属性最常⽤于规定斜体⽂本。 属性值:normal、italic、oblique 字体加粗,该属性设置⽂本的粗细。 规定元素中的⽂本的⽔平对⻬⽅式。属性值如下: display 属性规定元素应该⽣成的框的类型。这个属性⽤于定义建⽴布局时元素⽣成的显示框类型。 float的属性值有none、left、right。 border、padding、margin三个属性构成了盒⼦模型。 设置所有的边框属性。 2)使⽤border-width、border-style、border-color单独设置 3)border-style的属性 设置元素所有内边距的宽度,或者设置各边上内边距的宽度。 单独设置各边的内边距:padding-top、padding-left、padding-bottom、padding-right 注意:通过padding属性设置元素内边距时,会使元素变形。若不想影响格式效果,可以⽤margin属性设置元素外边距。 设置⼀个元素所有外边距的宽度,或者设置各边上外边距的宽度。 单独设置各边的外边距:margin-top、margin-left、margin-bottom、margin-right 说明:
div
标签可以把⽂档分割为独⽴的、不同的部分。它可以⽤作严格的组织⼯具,并且不使⽤任何格式与其关联。
div
是⼀个块级元素。这意味着它的内容⾃动地开始⼀个新⾏。实际上,换⾏是 div
固有的唯⼀格式表现。可以通过 div
的 class
或 id
应⽤额外的样式。<div>contentdiv>
属性
值
描述
align
left、right、center
规定div元素中的内容的对⻬⽅式,以后可以⽤样式取代它
2.2.4.2. span
span
标签被⽤来组合⽂档中的⾏内元素 ,span 没有固定的格式表现。当对它应⽤样式时,它才会产⽣视觉上的变化 。<span>contentspan>
2.2.5. 格式化标签
2.2.5.1. font
2.2.5.2. pre
2.2.5.3. ⽂本标签
del (中划线⽂本)、sub(下标⽂本)、sup(上标⽂本)2.2.6. a标签
a元素最重要的属性是 href 属性,它指示要链接的⽬标位置,同时没有href属性a标签内的内容与普通⽂本没有区别,也就失去了超链接的功能。
若是想要跳转到当前⻚⾯,那么href的值为#。被链接⻚⾯通常显示在当前浏览器窗⼝中,除⾮您规定了另⼀个⽬标(target 属性)。<a href="http://www.baidu.com">百度a>
属性
值
描述
href
URL
连接所要跳转的位置,可能是其他或当前⻚⾯。
target
blank、parent、self、top、Framename作为锚点的a标签的name值
规定在何处打开链接⽂档。blank:开启新⻚⾯显示⻚⾯;self:当前⻚⾯显示跳转到⻚⾯,默认值。_top:⽤于有frameset布局的⻚⾯,想要覆盖整个⻚⾯显示。Framename:这⾥framename与上边的值不同,具体以为frame起了什么样的名字为准,该值指示要连接的⻚⾯跳转后将在相应名称的框架中显示。
利⽤a标签的name属性:<a name="top">a>
<div id="top">div>、<a id="top">a>
<a href="#top">返回⾸部a>
2.2.7. 图⽚
注意:从技术上讲,img 标签并不会在⽹⻚中插⼊图像,⽽是从⽹⻚上链接图像。img 标签创建的是被引⽤图像的占位空间。<img src="" alt="" >
属性
值
描述
alt
text
规定图像的替代⽂本,⼀般在图⽚⽆法正常显示占位的⽂字。
src
URL
规定显示图像的 URL。
属性
值
描述
align
top、bottom、middle、left、right
规定如何根据周围的⽂本来排列图像
border
pixels
定义图像周围的边框
height
pixels、%
定义图像的⾼度。
width
pixels、%
定义图像的宽度。
title
⽂本
当⿏标在图⽚上时显示的⽂字
2.2.8. 表格
简单的HTML表格由table元素以及⼀个或多个tr、th、或td元素组成。
理解:table相当于⼀个表格的外框,tr为⾏,td为⼀个⼀个单元格,th为有标题作⽤的单元格,th中的内容同时有加粗的效果。
常⽤属性
属性
值
描述
align
right、center、left
表格对⻬⽅式
border
px
规定表格边框的宽度
width
% 、px
规定表格的宽度
属性
值
描述
align
right、left、center
定义表格⾏的内容对⻬⽅式。
bgcolor
rgb(x,x,x)、#xxxxxx、colorname
规定表格⾏的背景颜⾊,以后可以⽤样式取代它
valign
top、middle、bottom
规定表格⾏中内容的垂直对⻬⽅式,以后可以⽤样式取代它
2.2.9. 表单
2.2.9.1. form
表单能够包含 input 元素,⽐如⽂本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。
表单⽤于向服务器传输数据。form 元素是块级元素,其前后会产⽣折⾏。
常⽤属性
属性
值
描述
action
URL
规定当提交表单时向何处发送表单数据
method
get、post
规定⽤于发送 form-data 的 HTTP ⽅法
name
Form_name
规定表单的名称
target
_blank _self _ parent _top framename
规定在何处打开 action URL
get:默认,主动的获取⽅式,数据放在url上,数据的容量有限,安全性差,有缓存
post:数据放在请求实体中,数据量理论上没有限制,相对安全,没有缓存2.2.9.2. input
根据不同的 type 属性值,输⼊字段拥有很多种形式。输⼊字段可以是⽂本字段、复选框、单选按钮、按钮等等。
常⽤属性
属性
值
描述
alt
text
定义图像输⼊的替代⽂本。
checked
checked
规定此 input 元素⾸次加载时应当被选中。
disabled
disabled
当 input 元素加载时禁⽤此元素。
readonly
readonly
规定输⼊字段为只读。
maxlength
number
规定输⼊字段中的字符的最⼤⻓度。
value
value
规定 input 元素的值。
type
button、checkbox、file、hidden、image、password、radio、reset、submit、text
规定 input 元素的类型。按钮复选框⽂件隐藏域图像形按钮密码单选框重置按钮提交按钮⽂本
注意:
2.2.9.3. textarea
<textarea>contenttextarea>
2.2.9.4. label
<label for="username">⽤户名:label>
<input type="text" id="username" name="username"/>
2.2.9.5. button
<button>按钮button>
属性
值
描述
disabled
disabled
禁⽤该按钮。
type
button、submit、reset
规定按钮的类型。
value
text
规定按钮的初始值。
name
button_name
规定按钮的名称。
2.2.9.6. select
<select name="color" >
<option value="red">红⾊option>
<option value="green">绿⾊option>
<option value="blue">蓝⾊option>
select>
属性
值
描述
disabled
disabled
禁⽤该下拉框。
multiple
multiple
规定可选择多个选项。
name
name
规定下拉列表的名称。
size
number
规定下拉列表中可⻅选项的数⽬。
属性
值
描述
disabled
disabled
禁⽤该下拉框。
selected
selected
规定选项(在⾸次显示在列表中时)表现为选中状态。
value
text
定义送往服务器的选项值。
2.2.10. 常⽤字符实体
在 HTML 中不能使⽤⼩于号(<)和⼤于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使⽤字符实体(character entities)。
实体名称对⼤⼩写敏感!2.2.11. 标签的分类
2.2.11.1. 块级元素
2.2.11.2. ⾏内元素
2.2.11.3. ⾏内块状元素
3. CSS
CSS⽬前最新版本为CSS3,是能够真正做到⽹⻚表现与内容分离的⼀种样式设计语⾔。相对于传统HTML的表现⽽⾔,CSS能够对⽹⻚中的对象的位置排版进⾏像素级的精确控制,⽀持⼏乎所有的字体字号样式,拥有对⽹⻚对象和模型样式编辑的能⼒,并能够进⾏初步交互设计,是⽬前基于⽂本展示最优秀的表现设计语⾔。CSS能够根据不同使⽤者的理解能⼒,简化或者优化写法,针对各类⼈群,有较强的易读性。
CSS是⽤来美化⽹⻚⽤的,没有⽹⻚则CSS毫⽆⽤处,所以CSS需要依赖HTML展示其功能。3.1. CSS的基本使⽤
3.1.1. CSS基本语法
选择器名 {
属性 : 属性值;
......
}
div {
background-color : red;
}
3.1.2. 注释
/* 这⾥的内容就是注释 */
3.1.3. CSS的使⽤
⾏内样式将样式定义在具体html元素的style属性中。以⾏内式写的CSS耦合度⾼,只适⽤于当前元素,在设定某个元素的样式时⽐较常⽤。
style 是⾏内样式属性;
color 是颜⾊属性;red 是颜⾊属性值;
font-size是字体⼤⼩属性;50px 是字体⼤⼩属性值
2. 嵌⼊式
嵌⼊式通过在html⻚⾯内容开辟⼀段属于css的代码区域,通常做法为在 head 标签中嵌套 style标签,在 style 中通过选择器的⽅式调⽤指定的元素并设置相关 CSS。
在实际开发当中,很多时候都使⽤引⼊外联样式⽂件,这种形式可以使html⻚⾯更加清晰,⽽且可以达到更好的重⽤效果。
style.cssp {
color: green;
font-size: 30px;
}
"stylesheet" type="text/css" href="style.css">
stylesheet:⽂档的外部样式表。
很多时候,⼤量的 HTML ⻚⾯使⽤了同⼀个CSS。那么就可以将这些 CSS 样式保存在⼀个单独的.css ⽂件中,然后通过 link 元素去引⼊它。
注意:当有多重样式时,记住前提规则,越精确越优先。3.2. CSS选择器
CSS选择器有很多,掌握常⽤的即可;3.2.1. 基本选择器
3.2.1.1. 通⽤选择器
* {
......
}
* {
color: orange;
}
3.2.1.2. 元素选择器
元素名称 {
......
}
p {
color: red;
font-size: 20px;
}
3.2.1.3. ID选择器
#id属性值 {
......
}
#p1 {
font-weight: bold;
}
3.2.1.4. 类选择器
.class属性值 {
......
}
.hidden {
display: none;
}
3.2.1.5. 分组选择器
选择器1,选择器2,... {
......
}
h2 , #pre1 {
color: orange;
font-style: italic;
}
元素选择器:1
类选择器:10
id选择器:100
内联样式:10003.2.2. 组合选择器
3.2.2.1. 后代选择器(派⽣选择器)
选择器1 选择器2 {
......
}
food li {
border: 1px solid red;
}
<h1>⻝物h1>
<ul class="food">
<li>⽔果
<ul>
<li>⾹蕉li>
<li>苹果li>
<li>梨li>
ul>
li>
<li>蔬菜
<ul>
<li>⽩菜li>
<li>油菜li>
<li>卷⼼菜li>
ul>
li>
ul>
3.2.2.2. ⼦元素选择器
选择器1 + 选择器2 {
......
}
#d + div {
border: 1px solid red;
}
3.2.2.3. 相邻兄弟选择器
选择器1 + 选择器2 {
......
}
#d + div {
border: 1px solid red;
}
<div id="d">
相邻兄弟选择器1
<ul>
<li>开⼼麻花li>
<li>贾玲li>
<li>宋⼩宝li>
ul>
div>
<div>
相邻兄弟选择器2
div>
3.2.2.4. 普通兄弟选择器
选择器1 ~ 选择器2 {
......
}
li ~ li {
background-color : yellow;
}
<div>
普通兄弟选择器1
<ul>
<li>开⼼麻花li>
<li>贾玲li>
<li>宋⼩宝li>
<li>沈腾li>
<li>王宁li>
ul>
div>
3.3. CSS常⽤属性设置
3.3.1. 背景
3.3.1.1. background-color
body {
background-color:#ff0000;
}
3.3.1.2. background-image
body {
background-image:url('paper.gif');
}
3.3.1.3. background-repeat
body {
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
}
3.3.2. ⽂本
3.3.2.1. color
body {
color:blue;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
3.3.2.2. text-align
body {
text-align:center;
}
h1 {
text-align:right;
}
h2 {
text-align:right;
}
3.3.2.3. text-decoration
1)underline
对⽂本添加下划线,与HTML的u元素相同。
2)overline
对⽂本添加上划线。
3)line-through
对⽂本添加中划线,与HTML中的s和 strike 元素相同。
4)none
关闭原本应⽤到元素上的所有装饰。h3 {
text-decoration:underline;
}
3.3.2.4. text-indent
p.ident2 {
text-indent: 2em;
}
3.3.3. 字体
3.3.3.1. font-family
font-family属性应该设置⼏个字体名称作为⼀种"后备"机制,如果浏览器不⽀持第⼀种字体,他将尝试下⼀种字体,所以尽量将不常⻅的字体靠前,将最常⻅的字体放置在最后,作为替补。
注意:
1)只有当字体名中含有空格或#、$之类的符号时(如 New York),才需要在font-family声明中加引号:body {
font-family: "arial black";
}
/* 靠前的字体先⽣效 */
p{
font-family: 微软雅⿊,⿊体,"agency fb";
}
3.3.3.2. font-size
body {
font-size: 50px; /*字体⼤⼩50px*/
}
#span1 {
font-size: 25px; /*字体⼤⼩25px*/
}
3.3.3.3. font-style
1)normal:⽂本正常显示;
2)italic:⽂本斜体显示;
3)oblique:⽂本倾斜显示,oblique是将⽂字强制倾斜。
说明:⼀般情况下,字体有粗体、斜体、下划线、删除线等诸多属性,但是不是所有字体都具有这些属性,⼀些不常⽤字体可能只有正常体,若使⽤italic属性则没有效果,所以需要oblique属性强制倾斜。3.3.3.4. font-weight
bold:可以将⽂本设置为粗体。
100 ~ 900:为字体指定了 9 级加粗度。如果⼀个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别。
100 对应最细的字体变形;
900 对应最粗的字体变形;
400 等价于 normal;
700 等价于 bold。3.3.4. 对⻬⽅式
3.3.4.1. text-align
注意:
值 justify 可以使⽂本的两端都对⻬。在两端对⻬⽂本中,⽂本⾏的左右两端都放在⽗元素的内边界上。然后,调整单词和字⺟间的间隔,使各⾏的⻓度恰好相等。对最后⼀⾏不⽣效。3.3.5. display属性
3.3.6. 浮动
3.3.7. 盒⼦模型
3.3.7.1. border
1)可同时设置边框的宽度、样式、颜⾊table, th, td {
border: 1px solid black;
}
table {
width:100%; height:50px;
}
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
4)border-collapse
设置是否将表格边框折叠为单⼀边框。
属性值:separate(默认,单元格边框独⽴)、collapse(单元格边框合并)table {
border-collapse : collapse;
}
3.3.7.2. padding
如果在表的内容中控制⽂本到边框的内边距,使⽤td和th元素的填充属性:td {
padding:15px;
}
默认按照上右下左的顺序设定td .test1 {
padding: 1.5cm
}
td .test2 {
padding: 0.5cm 2.5cm
}
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
td>
tr>
table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是0.5cm,左和右内边距是 2.5cm。
td>
tr>
table>
3.3.7.3. margin
p.margin {
margin: 2px 4px 3px 4px;
}
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
auto:⾃动,可以理解为居中的意思。浏览器⾃动计算外边距。
margin: auto auto:第⼀个auto表示上下外边距⾃动计算,第⼆个auto表示左右外边距⾃动算。
但是上下外边距在⾃动计算时不会⽣效,⽽左右外边距会⽣效,表现为居中状态,效果如下:
若要设置为上下左右居中状态,则要计算好⾃⾏设置上下的外边距,效果如下: