VII html+css-白红宇

VII html+css

阅读量：6214 次

发布时间：2019-06-21

本文共 21129 字，大约阅读时间需要 70 分钟。

VII html+css

掌握html全部语法，主体结构，超链接，常用标记的使用；

掌握css的三种选择器的使用，使用DIV+CSS进行网页布局，搞清浮动问题；

1、语法：语法格式，文档注释，代码格式；

2、基本结构：标记<html>,<head>,<title>,<body>；

3&4、文档设置标记：

格式标记：<br>,<p>,<center>,<pre>,<li>,<ul>,<ol>,<dl>,<dt>,<dd>,<hr>,<div>；

文本标记：<hn>,<font>,<b>,<i>,<sub>,<sup>,<tt>,<cite>,<em>,<strong>,<small>,<big>,<u>；

5、图像标记：<img>；

6、超链接的使用：<a>；

7、表格：<table>,<caption>,<tr>,<th>,<td>；

8、框架：<frameset>,<frame>；

9、表单设计：<form>,<input>,<select>；

10、使用css样式的方法：引用css的方式；

11、定义css样式表：标签选择器、class选择器、ID选择器、组合选择器、伪装选择器、优先级问题；

12、CSS属性：网页中常用的颜色属性、字符属性、背景属性、文本属性、边框属性；

13、DIV+CSS布局：盒模型、布局相关属性（定位、浮动、显示、溢出）；

14&15、企业网站首页：设计图的切图、网页的整体框架、项目网站的内容样式；

注：

单标记：<meta/>,<hr/>,<img/>,<frame/>,<input/>,<link/>；

1、HTML语法：

HTML标记语言，表示网页信息的符号和标记语言；

特点：

可设置文本的格式，如标题、字号、文本颜色、段落等；

可创建列表；

可插入图像和媒体；

可建立表格；

超链接，点击可跳转；

HTML的标记和属性：

标记：

HTML文档的保存格式：.html|.htm|.xhtml；

标记和被标记的内容构建出HTML文档，格式为：

<标记>

内容

</标记>

标记的属性：就是用来控制内容（图像、文本等）如何显示；格式为：

<标记属性1=属性值属性2=属性值 ...>内容</标记>，如：

语法不区分字母大小写，如<html>,<HTML>,<Html>，建议都用小写；

文档注释：

用；

代码格式：

空格和回车在网页中不起作用，为让代码清晰易读，可使用空格和回车进行编排；

缩进时保持严格的规则，用tab；

字符实体：

如想在网页中显示<（<符号在HTML中是文档标记的开始语言），要用实体名来代替；

常见的字符实体有：

实体名称	描述	实体编号
	空格
<	<小于号	<
>	>大于号	>
&amp	&和号	&
"	"引号	"
'	'撇号，IE不支持	'
¢	￠分	¢
£	￡镑	£
&yen	￥日元	¥
€	欧元	€
§	§小节	§
©	版权	©
®	注册商标	®
™	TM商标	™
×	X乘号	×
÷	÷除号	÷

2、HTML的基本结构：

解释：HTML文档的文档标记，也称为HTML开始标记；

功能：分别位于网页的最前端和最后端；

注：

在HTML中，任意个空格或任意个回车只被当作是一个空格；

若用<pre></pre>则内容中的多个空格或多个回车会完全显示；

解释：HTML文件头标记，也称为HTML头信息开始标记；

功能：用来包含文件的基本信息，如网页的标题、关键字、在<head></head>内可放<title></title>,<meta>,<style></style>等标记；

解释：HTML文件标题标记；

功能：网页的主题，显示在browser的窗口的左上边；

注意：网页的标题不能太长，要矮小精悍，能具体反映页面的内容，<title></title>标记中不能包含其它标记，<title></title>在<head></head>中；

解释：HTML文档的主体标记；

功能：<body></body>是网页的主体部分，在此标记之间可包含<p></p>,<h1></h1>,<br>,<hr>等标记，正是由这些内容组成了我们所看见的网页；

body标记的常见属性：

bgcolor，设置背景颜色，如<bodybgcolor="red"></body>；

text，设置文本颜色，<bodytext="green"></body>；

link，设置链接颜色，<bodylink="blue"></body>；

vlink，已经访问了的链接颜色，<bodyvlink="yellow"></body>；

alink，正在被点击的链接颜色，<bodyalink="red"></body>；

<meta>

解释：页面的元信息，meta-information，<meta>是单标记，且必须要放在<head></head>标记里；

功能：提供有关页面的元信息，如针对搜索引擎和更新频度的描述和关键词；

必须的属性：content="some_text"，定义name属性相关的元信息；

常用的name属性：author,keywords,description,others，把content属性关联到一个名称，如描绘出网页的关键词：<meta name="keywords" content="maizi学院IT在线培训">；

举例：

<html>

<head>

<metacharset='utf-8'>

<metaname='keywords' content='maizi学院,在线IT培训'>

</head>

<h1>this is a context title</h1>

<ahref='http://www.baidu.com'>百度</a>

</body>

</html>

3、文档设置标记：

一、格式标记：

<br/>，强制换行标记，让后面的文字、图片、表格等等，显示在下一行；

<p></p>，换段落标记，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落用<p>，<p>段落中也可包含<p>段落；

<center></center>，居中对齐标记，让段落或文字相对于父标记居中显示；

<pre></pre>，预格式化标记，保留预先编排好的格式；

<li></li>，列表项目标记，每一个列表使用一个<li></li>标记；

<ul></ul>，无序列表标记，需<li>配合；

<ol></ol>，有序列表标记，可以显示特定的一些顺序，格式：

<litype="符号类型"></li>

</ol>

有序列表里type属性值：1，阿拉伯数字123等，是默认type属性值；A，大写字母ABC等；a，小写字母abc等；I，大写罗马数字I，II，III等；i，小写罗马数字，i,ii,iii等；

value，指定一个新的序列数字起始值；

列表可以进行嵌套；

<dl></dl>,<dt></dt>,<dd></dd>，定义型列表：

使用场合：对列表条目进行简短的说明；

格式：

<dl>

<dd>简单介绍软件的功能及基本应用</dd>

<dd>用于选择软件的外观</dd>

</dl>

<hr/>，水平分割标记，段落之间的分割线，<hr/>是单标记，如：

<body>

maizi

<hr/>

maizi

</body>

<div></div>，分区显示标记，也称为层标记，常用来编排一大段的HTML段落，也可用于格式化表，和<p>类似，层可以多层嵌套使用，如：

<body>

<div>

maizi

<hr>

maizi

</div>

</body>

3&4、文档设置标记：

二、文本标记：

hn，标题标记，共有6个级别，n的范围1-6，不同级别对应显示大小不同的标题，h1最大，h6最小；

font，字体设置标记，设置字体的格式，三个常用属性：

size，<fontsize='3'>，取值范围1-7，browser默认3，XHTML1.0中不支持size属性；

color，<fontcolor='red'>；

face，<font face='微软雅黑'>；

注：css字体中英文对照表

中文名	英文名	Unicode	Unicode 2
Mac OS
华文细黑	STHeiti Light [STXihei]	\534E\6587\7EC6\9ED1	华文细黑
华文黑体	STHeiti	\534E\6587\9ED1\4F53	华文黑体
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro	丽黑 Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro	丽宋 Pro
标楷体	BiauKai	\6807\6977\4F53	标楷体
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1	苹果丽中黑
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B	苹果丽细宋
Windows
新细明体	PMingLiU	\65B0\7EC6\660E\4F53	新细明体
细明体	MingLiU	\7EC6\660E\4F53	细明体
标楷体	DFKai-SB	\6807\6977\4F53	标楷体
黑体	SimHei	\9ED1\4F53	黑体
宋体	SimSun	\5B8B\4F53	宋体
新宋体	NSimSun	\65B0\5B8B\4F53	新宋体
仿宋	FangSong	\4EFF\5B8B	仿宋
楷体	KaiTi	\6977\4F53	楷体
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312	仿宋_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312	楷体_GB2312
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53	微软正黑体
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1	微软雅黑
Office
隶书	LiSu	\96B6\4E66	隶书
幼圆	YouYuan	\5E7C\5706	幼圆
华文细黑	STXihei	\534E\6587\7EC6\9ED1	华文细黑
华文楷体	STKaiti	\534E\6587\6977\4F53	华文楷体
华文宋体	STSong	\534E\6587\5B8B\4F53	华文宋体
华文中宋	STZhongsong	\534E\6587\4E2D\5B8B	华文中宋
华文仿宋	STFangsong	\534E\6587\4EFF\5B8B	华文仿宋
方正舒体	FZShuTi	\65B9\6B63\8212\4F53	方正舒体
方正姚体	FZYaoti	\65B9\6B63\59DA\4F53	方正姚体
华文彩云	STCaiyun	\534E\6587\5F69\4E91	华文彩云
华文琥珀	STHupo	\534E\6587\7425\73C0	华文琥珀
华文隶书	STLiti	\534E\6587\96B6\4E66	华文隶书
华文行楷	STXingkai	\534E\6587\884C\6977	华文行楷
华文新魏	STXinwei	\534E\6587\65B0\9B4F	华文新魏

b，粗字体标记；

i，斜体字标记；

sub，文字下标字体标记；

sup，文字上标字体标记；

tt，打印机字体标记；

cite，引用方式的字体，通常是斜体；

em，表示强调，通常显示为斜体字；

strong，表示强调，通常显示为粗体字；

small，小型字体标记，可多级嵌套；

big，大型字体标记，可多级嵌套；

u，下划线字体标记，字体会多出下划线；

5、<img>图像标记：

使用方法：<img src='/path/to/file' width='属性值' height='属性值' border='属性值' alt='属性值'>

注意：<img>为单标记；在加载图像文件的时候，文件的路径或文件名或文件格式错误，将无法加载图片；

<img>标记属性：

src，指定加载图片的路径、图片名称、图片格式；

width，宽度，单位px像素、em、cm、mm；

height，高度，单位px、em、cm、mm；

border，图片的边框宽度，单位px、em、cm、mm；

alt，当网页上的图片被加载完成后，鼠标移动到上面，显示的指定的属性文字；如果图像没有下载或者加载失败，会用文字来代替图像显示；搜索引擎可通过这个局长的文字来抓取图片；

6、超链接的使用：

语法：<a href='' target='打开方式' name='页面锚点名称'>链接文字或图片</a>

属性：

href属性，链接的地址，链接的地址可以是一个网页，也可以是一个视频、图片、音乐等；

例：

<a href='http://www.baidu.com'>百度</a> #站外链接

<a href='test2.html'>test2</a> #站内链接

target属性：

作用：定义超链接的打开方式；

属性值：

_blank，在一个新的窗口中打开链接；

_self，默认值，在当前窗口中打开链接；

_parent，在父窗口中打开页面（框架中使用较多）；

_top，在顶层窗口中打开文件（框架中使用较多）；

name属性：

指定页面的锚点名称；

例：

<body>

<ahref='#dibu'>到页面底部</a>

<ahref='#zhongbu'>到页面中部</a>

<aname='dingbu'></a>

<div>

<p>

……

……

</p>

<div>

<aname='dibu'></a>

<ahref='#dingbu'></a>

</body>

7、表格：

<table></table>标记：

基本格式：<table 属性1='属性值1' 属性2='属性值2'...>表格内容</table>

table标记属性：

width，表格的宽度，值可以是px，也可以是父级元素的百分比%；

height，高度，px；

border，外边框的宽度；

align，表格的显示位置，left居左显示默认值，center居中显示，right居右显示；

cellspacing，单元格之间的间距，默认2px，单位px；

cellpadding，单元格内容与单元格边框的显示距离；

frame，控制表格边框最外层的四条线框，void默认值表示无边框，above仅顶部有边框，below底部有边框，hsides仅有顶部边框和底部边框，lhs仅有左侧边框，rhs仅有右侧边框，vsides仅有左右侧边框，box包含全部4个边框，border包含全部4个边框；

rules，控制是否显示及如何显示单元格之间的分割线，none默认值表示无分割线，all包括所有分割线，rows仅有行分割线，clos仅有列分割线，groups仅在行组和列组之间有分割线；

<caption></caption>标记：

如果表格需要使用标题，用caption标记；

caption属性的插入位置直接位于<table>属性之后<tr></tr>表格行之前；

align属性：

top，标题放在表格的上部；

bottom，标题放在表格的下部；

left，标题放在表格的左部；

right，标题放在表格的右部；

<tr>标记：

定义表格的一行，对于每一个表格行，都是由<tr>...</tr>标记表示，每一行tr标记内可嵌套多个<td></td>或<th></th>标记；

属性：

bgcolor，背景颜色，格式：bgcolor='颜色值'；

align，设置水平方向对齐方式，格式：align='值'，值有top靠顶端对齐，bottom靠底部对齐，middle居中对齐；

valign，设置垂直方向对齐方式，格式：valign='值'，值有left左对齐，right右对齐，center居中对齐；

<td></td>和<th></th>：

都是单元格的标记，必须嵌套在<tr>标签内，是成对出现；

两者区别：

th是表头标记，通常位于首行或首列，th的文字默认会被加粗，而td不会；

td是数据标记，表示该单元各的具体数据；

共同之处：

两者标记属性都是一样的；

属性：

bgcolor；

align，设置单元格水平对齐方式；

valign，设置单元格垂直对齐方式；

width；

height；

rowspan，设置单元格所占行数；

colspan，设置单元格所占列数；

举例（网页布局）：

使用表格实现：

<td>

<fontsize='5'>

</font>

</td>

</tr>

<tr>

<td>

<td>

<fontsize='5'>

</font>

</td>

</tr>

</table>

<td>

<fontsize='5'>

</font>

</td>

</tr>

</table>

</td>

</tr>

<td>

<fontsize='5'>

</font>

</td>

</tr>

</table>

</body>

8、HTML框架：

框架将browser划分成不同的部分，每一部分加载不同的网页，实现在同一browser窗口中加载多个页面的效果；

<frameset></frameset>划分框架标记：

属性：

cols，使用px或%分割左右窗口，*表示剩余部分；如果使用*,*表示框架平均分成2个，如果使用*,*,*表示框架平均分成3个；

rows，使用px或%分割上下窗口，*表示剩余部分；

framebox，指定是否显示边框，0不显示，1显示；

border，设置边框的大小，默认5px；

<frame>子窗口标记，是单标记，必须放在<frameset></frameset>中使用，在frameset中设置了几个窗口，就必须对应使用几个frame，而且还必须使用src属性指定一个网页；

属性：

src，加载网页文件的url地址；

name，框架名称，是链接标记的target所要参数；

noresize，表示不能调整框架大小，没有设置此项时是可调整状态；

scolling，是否需要滚动条，值有：auto根据需要自动出现，yes有，no没有；

frameborder，是否需要边框，值有：(1)显示边框，(0)不显示边框；

9、表单设计：

表单标记：

<form></form>，定义表单的开始位置和结束位置，表单提交时的内容就是form表单中的内容；

格式：<form action='服务器地址' name='表单名称' method='post|get'>...</form>；

属性：

name，表单名称；

method，传送数据的方式（get（默认，用此方式提交时，会将表单的内容附加在url地址的后面，所以限制了提交的内容的长度，不能超过8192个字符，且不具备保密性）；post（方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器中处理，没有数据大小限制，且具备保密性））；

action，表单数据程序程序的url地址，如果为空则使用当前文档的url地址，如果表单中不需要使用action属性也要指定其属性为no；

enctype，设置表单资料的编码方式；

target，与超链接类似，用来指定目标窗口；

文本域和密码：

<input/>，单标记；

语法：<input type='' name='' value='' size='' maxlength=''/>

属性：

type，两个值：type='text'表示一个文本输入域，type='password'表示一个密码输入域；

name，定义插件的名称；

value，初始化值，打开browser时文本框中的内容；

size，设置控件的长度；

maxlength，输入框中最大允许输入的字符数；

提交、重置、普通按钮：

<input type='submit'/>，提交按钮；

<input type='reset'/>，重置按钮；

<input type='button'/>，普通按钮；

单选框、复选框：

<input type='radio'/>，单选框，例如实现男女只选一个：<form>性别：<input type='radio' name='sex' checked='checked'/>男 <inputtype='radio' name='sex'/>女</form>；

<input type='checkbox'/>，复选框，例如：<form>爱好：<inputtype='checkbox' name='sport' checked='checked'/>体育 <inputtype='checkbox' name='sing'/>唱歌</form>；

注意：单选框和复选框都可使用checked属性来设置默认选中项；

隐藏域：

多行文本域：

语法：<textarea name='name' rows='value' cols='value'value='value'>...</textarea>

rows属性和cols属性分别用来指定，显示的行数和列数，单位是字符个数；

菜单下拉列表域：

语法：

<optionvalue='value' selected>选项1</option>

<optionvalue='value'>选项2</option>

<optionvalue='value'>选项3</option>

</select>

举例（会员登录表单）；

10、css层叠样式表：

一、使用css样式的方式：

1)HTML的<!DOCTYPE>声明标签：不是HTML标签，是指示browser关于页面使用哪个HTML版本进行编写的指令；

定义和用法：

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>之前；

在HTML4.01中，<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGML，DTD规定了标记语言的规则，这样browser才能正确的呈现内容；

HTML5不基于SGML，所以不需引用DTD；

注：

各版本的声明：

HTML5，HTML5向下兼容HTML4.01和XHTML：

<!DOCTYPE html>

HTML4.01：

<!DOCTYPE HTML PUBLIC "-//w3c//DTDHTML 4.01 Transitional //EN""http://www.w3.org/TR/html4/loose.dtd">

该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（如font），不允许框架集（framesets）

注意的规则：

单标记必须闭合，如<br>必须写为<br/>；

单属性必须添加属性值：如<input type='radio' checked>必须写为<inputtype='radio' checked='checked'/>；

标记和属性必须使用小写，如<body></body>；

属性的属性值必须使用""，在HTML4.01之前可用<body bgcolor=red>，HTML4.01必须写为<bodybgcolor='red'>；

2)内链式样式表：

格式：<body style='background-color:green;margin:0;padding:0;*></body>

属性与属性值间用冒号分隔；

属性与属性之间用分号分隔；

3)嵌入式样式表：

格式：<style type='text/css'></style>

例：

<head>

body{

background-color:green;

color:red;

}

background-color:red;

color:green;

}

</style>

</head>

注：

.p{color:green;font-size:28px;}

.pp{color:red;} #或写为.pp{color:red}

</style>

4)引入式样式表：

格式：<link rel='StyleSheet' type='text/css' href='style.css'/>

例：

<html>

<head>

</head>

<body>

<h1>maizi</h1>

</body>

</html>

二、定义样式表（CSS选择器）：

注：在CSS的定义中，注释要用/*content*/；

1)HTML标记定义：

属性:属性值;属性1:属性1值}

p可以叫选择器，定义哪个标记中的内容执行其中的样式；

一个选择器可以控制若干个样式属性，多个属性间用分号分隔，最后一个可以不加分号；

2)class定义：

class定义是以点.开始；

.p{

属性:属性值;属性1:属性1值}

3)id定义：

#p{

属性:属性值;属性1:属性1值}

id定义是以#开始的，是唯一选择器，一个页面上只允许出现一次；

4)优先级问题：

id > class > HTML；

同级时选择离元素最近的一个（即，后面的会覆盖掉前面定义的）；

例：

<head>

div {color:black;}

.p {color:green;}

#pp {color:yellow;}

</style>

</head>

<body>

maizi

</div>

</body>

5)组合选择器（同时控制多个元素）：

格式：h1,h2,h3{font-size:28px;color:red;}

6)伪元素选择器：

a:link，正常连接的样式；

a:hover，鼠标放上去的样式；

a:active，选择链接时的样式；

a:visited，已访问过的链接的样式；

例：

<head>

a:link{color:black;}

a:hover{color:green;}

a:active{color:yellow;}

a:visited{color:blue;}

</style>

</head>

<body>

</body>

三、常见属性：

1)颜色属性：

用color定义文本的颜色，格式：

color:green;

color:#ff6600; #16进制，可简写为#f60分别代表RGB的取值范围；

color:rgb(255,255,255) #每个取值范围0-255；

color:rgba(255,255,255,1) #rgb和alpha（色彩空间）透明度，a取值范围0-1，0为完全透明，1为不透明；

例：

<head>

.ha{color:rgba(182,22,206,1);}

.hb{color:rgba(182,22,206,0.8);}

.hc{color:rgba(182,22,206,0.6);}

.hd{color:rgba(182,22,206,0.4);}

.he{color:rgba(182,22,206,0.2);}

.hf{color:rgba(182,22,206,0);}

</style>

</head>

<body>

<p>

<h1 class='ha'>maizi</h1>

<h2 class='hb'>maizi</h2>

<h3 class='hc'>maizi</h3>

<h4 class='hd'>maizi</h4>

<h5 class='he'>maizi</h5>

<h6 class='hf'>maizi</h6>

</p>

</body>

2)字体属性：

font-size，字体大小，单位：

px，设置一个固定的值；

%，父元素的百分比；

smaller，比父元素更小；

larger，比父元素更大；

inherit，继承父元素的；

例：

<head>

body{

font-size:20px;

}

.ha{

font-size:smaller;

font-family:'微软雅黑','宋体';

}

.h1{

font-size:100%;

}

.hb{

font-size:larger;

}

</style>

</head>

<body>

<h1 class='ha'>maizi</h1>

<h1>maizi</h1>

<h1 class='hb'>maizi</h1>

</body>

font-family，定义字体，例：font-family:'微软雅黑','serif';，多个字体用逗号分隔，以确保当前面的字体不可用时，使用下个字体；

注：每个字体都有其对应的英文名称，最好用英文，如微软雅黑为Microsoft YaHei；

font-weight，字体加粗，

normal，默认；

bold，粗；

bolder，更粗；

lighter，更细；

100-900的整百数，400为normal，700为bold；

例：

<head>

.ha{font-weight:normal;}

.hb{font-weight:bold;}

.hc{font-weight:bolder;}

.hd{font-weight:lighter;}

</style>

</head>

<body>

<p>

<h1 class='ha'>maizi</h1>

<h2 class='hb'>maizi</h2>

<h3 class='hc'>maizi</h3>

<h4 class='hd'>maizi</h4>

</p>

</body>

font-style，字体样式，

normal，标准；

italic，斜体；

oblique，倾斜；

inherit，继承；

例：

<head>

<styletype='text/css'>

.ha{font-style:normal;}

.hb{font-style:italic;}

.hc{font-style:oblique;}

.hd{font-style:inherit;}

</style>

</head>

<body>

<p>

<h1 class='ha'>maizi</h1>

<h2 class='hb'>maizi</h2>

<h3 class='hc'>maizi</h3>

<h4 class='hd'>maizi</h4>

</p>

</body>

font-variant，小型大写字母显示文本（小写字母变大写），

normal，标准；

small-caps，小写字母变大写；

inherit，继承；

例：

<head>

.pa{

font-variant:normal;

}

.pb{

font-variant:small-caps;

}

.pc{

font-variant:inherit;

}

</style>

</head>

<body>

<h1 class='pa'>maizi</h1>

<h1 class='pb'>maizi</h1>

<h1 class='pc'>maizi</h1>

</body>

3)背景属性：

background-color，背景颜色，颜色取值与颜色属性color:green;一样；

background-p_w_picpath，背景图片，格式：background-p_w_picpath:url(/path/to/file.jpg);

background-repeat，背景重复，repeat重复平铺满，repeat-x向X轴重复，repeat-y向y轴重复，no-repeat不重复；

background-position，背景位置，横向有left,center,right，纵向有top,center,bottom，格式：background-position:x轴方向 y轴方向;，此处x轴方向和y轴方向可用数值20px表示，例：background-position:leftcenter可简写为background-position:left;

简写方式：

background:背景颜色url(/path/to/file.jpg) 重复位置;

例：

<head>

body{

background-color:green;

}

</style>

</head>

<body>

test

</body>

例：

<head>

body{

background-p_w_picpath:url(p_w_picpaths/bg.jpg);

background-repeat:repeat;

background-position:center;

}

</style>

</head>

<body>

test

</body>

例：

<head>

body{

background:#f60url(p_w_picpaths/bg.jpg) repeat top center;

}

</style>

</head>

<body>

test

</body>

4)文本属性：

text-align，left,center,right；

line-height，文本行高，%基于字体大小的百分比，NUM用数值来设置固定值；

text-indent，首行缩进，%父元素的百分比，px固定值默认0，inherit继承；

letter-spacing，字符间距，normal默认，length设置具体的数值（可以是负数，负数的效果即重叠），inherit；

word-spacing，单词间距，normal标准间距，px固定值，inherit；

direction，文本方向，ltr默认值从左到右即leftto right，rtl从右到左，inherit；

text-transform，文本大小写，capitalize每个单词以大写字母开头，uppercase，定义全大写，lowercase定义全小写，inherit；

例：

<head>

p {

letter-spacing:0px;

word-spacing:0px;

text-indent:40px;

line-height:100%;

text-align:left;

font-size:20px;

}

div{

width:1000px;

height:500px;

}

</style>

</head>

<body>

<div>

<p>基于Springmvc 和 maven 如果你在本地测试需要首先自己安装好zookeeper因为注册中心是zookeeper 采用测试用例测试的时候需要两台不同ip的机器去启动job 因为ElasticJob默认的分片机制是根据ip来分片的如果ip相同它会默认为一台服务器</p>

</div>

</body>

例：

<head>

direction:ltr;

text-transform:uppercase;

}

</style>

</head>

<body>

<div>

</div>

</body>

5)边框属性：

i边框风格：

border-style，统一风格（简写风格）；

可单独定义某一方向的边框样式：border-top-style上边框样式，border-bottom-style下边框样式，border-left-style左边框样式，border-right-style右边框样式；

属性：

none，无边框；

solid，直线边框；

dashed，虚拟边框；

dotted，点状边框；

double，双线边框；

groove，凸槽边框，依托border-color的属性值；

ridge，垄状边框，依托border-color的属性值；

inset，inset边框，依托border-color的属性值；

outset，outset边框，依托border-color的属性值；

inherit；

例：

<head>

div{

width:1000px;

height:500px;

background-color:#f60;

border-style:dotted;

}

</style>

</head>

<body>

<div>

</div>

</body>

ii边框宽度：

border-width，统一风格；

单独风格：border-top-width,border-bottom-width,border-left-width,border-right-width；

属性：

thin，细边框；

medium，中等边框；

thick，粗边框；

px，固定值的边框（经常用）；

inherit；

iii边框颜色：

border-color，统一风格；

单独风格：border-top-color,border-bottom-color,border-left-color,border-right-color；

属性：

rgb(255,255,0);

rgba(255,255,0,0.1);

#f00;或#ff0000;

inherit；

注：#aaa,#bbb,#ccc,#ddd；

属性值的四种情况：

一个值，border-color:上下左右;

两个值，border-color:上下左右;

三个值，border-color:上左右下;

四个值，border-color:上右下左;

iv简写方式：

border:边框风格边框宽度边框颜色;

border:solid 2px #f60

6)列表属性：

i标记的类型，list-style-type：

none，无标记；

disc，默认，标记是实心圆；

circle，标记是空心圆；

square，标记是实心方块；

decimal，标记是数字；

decimal-leading-zero，0开头的数字标记，01,02,03等；

lower-roman，小写罗马数字，i,ii,iii,iv；

upper-roman，大写罗马数字；

lower-alpha，小写英文字母；

upper-alpha，大写英文字母；

lower-greek，小写希腊字母，alpha,beta,gamma；

lower-lation，小写拉丁字母，a,b,c,d,e；

upper-lation，大写拉丁字母；

hebrew，传统的希伯来编号方式；

armenian，传统的亚美尼亚编号方式；

georgian，传统的乔治亚编号方式，an,ban,gan；

cjk-ideographic，简单的表意数字；

hiragana，日文片假名，a,I,u,e,o,ka,ki；

katakana，日文片假名，A,I,U,E,O,KA,KI；

hiragana-iroha，日文片假名，i,ro,ha,ni,ho,he,to；

katakana-iroha，日文片假名，I,RO,HA,NI,HO,HE,TO；

ii标记的位置，list-style-position:

inside，列表项目放置在文本以内，且环绕文本根据标记对齐；

outside，默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐；

inherit；

iii设置图像列表标记，list-style-p_w_picpath:

url(/path/to/file.jpg)，图像的路径；

none，默认，无图形被显示；

inherit；

iv简写方式：

list-style:标记类型标记位置图像列表标记;

例：

list-style:decimal-leading-zero outside;

四、div+css布局：

1)div和span在整个html标记中，没有任何意义，它们的存在就是为了应用css样式；

div和span的区别在于，span是内联元素，div是块级元素；

2)盒模型：

margin，盒子外边距，margin-top,margin-bottom,margin-left,margin-right；

padding，盒子内边框，padding-top,padding-bottom,padding-left,padding-right；

border，盒子边框宽度，border-top,border-bottom,border-left,border-right；

width，盒子宽度，width-top,width-bottom,width-left,width-right；

height，盒子调试，height-top,height-bottom,height-left,height-right；

注：

右键审查元素，以border划分，以内内部白，以外外部白；

3)布局相关属性：

1 定位方式：

relative，正常定位；

absolute，根据父元素进行定位；

fixed，根据browser窗口进行定位；

static，没有定位；

inherit；

2 定位：left,right,top,bottom；

3 z-index，层覆盖先后顺序（优先级）：多个div可用数字大的覆盖掉数字小的，当<body>中<div>在最前面时，此块区域会被后面定义的覆盖，需在.fixed{z-index:1;}

4 display，显示属性：

none，层不显示；

block，块状显示，在元素后面换行，显示下一个块元素，内联元素-->块级元素；

inline，内联显示，多个块可以显示在一行内，块级元素-->内联元素；

5 float，浮动属性：

left，左浮动；

right，右浮动；

例：

<head>

body{

margin:0;

padding:0;

}

.div{

width:300px;

height:300px;

background-color:green;

position:relative;

left:10px;

right:10px;

z-index:2;

}

span{

position:absolute;

background-color:#f60;

color:#fff;

top:10px;

right:0;

}

.fixed{ //网页中的客服标签，当网页滚动时此块区域是固定的

position:fixed;

background-color:#f60;

color:#fff;

top:100px;

z-index:3;

}

</style>

</head>

<body>

</div>

<p>联系地址:police</p>

</div>

<br/>

……

</body>

6 clear，清除浮动：

clear:both;

7 overflow，溢出处理：

hidden，隐藏超出层大小的内容；

scroll，无论内容是否超出大小都添加滚动条；

auto，超出时自动添加滚动条；

例：产生浮动的解决办法：方一

<head>

.div{

width:960px;

height:600px;

margin:0auto;

background-color:#aaa;

}

.left{

float:left;

width:260px;

height:460px;

background-color:#ccc;

}

.right{

float:right;

width:700px;

height:460px;

background-color:#ddd;

}

.bottom{

width:960px;

height:200px;

background:red;

#产生浮动的解决办法：方二

}

.clear{

clear:both;

}

.introduce{

background:red;

width:260px;

height:120px;

overflow:scroll;

}

</style>

</head>

<body>

<divclass='introduce'>

……

</div>

</div>

</body>

4)兼容问题及高效开发工具：

1 兼容性测试工具：ietester,multibrowser

2 常用的browser：googlechrome,firefox,opera

3 高效的开发工具：轻量级（notepad++,sbulimetext,txt,hbuilder），重量级（webstorm,dreamweaver）

4 网页设计工具：fireworks,photoshop

5 判断IE的方法：

在<body>中，条件判断格式：

[if ! IE 8]，不等于，除了IE8都可以显示；

[if lt IE 5.5]，小于，如果IE版本小于5.5的显示；

lte，小于等于；

[if gt IE 5]，大于；

gte，大于等于；

[if (gt IE 5) & (lt IE 7)]，大于和小于之间；

[if (IE 6) | (IE 7)]，或；

[if IE 8]，仅；

例：

<body>

</body>

转载于:https://blog.51cto.com/jowin/1978297

你可能感兴趣的文章

Python IO编程——操作文件和目录

查看>>

Exchange2010 Outlook自动发现

Linux下利用nc命令来监控检测服务器的端口使用情况

Flash ActionScript (11)用flash打开任何文件的方法

查看>>

2.5-调整cpu内存、网卡

查看>>

[转]谈谈以太网中何时使用CSMACD冲突检测机制

查看>>

量子行走

查看>>

RHEL6入门系列之二十七，源码安装及软件安装综合实例

查看>>

第 4 章 Glance - 021 - 创建 Image

Windows2008R2FTP服务器搭建

查看>>