VII html+css

技术小阿哥 2017-11-27

css class html type

掌握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选择器、组合选择器、伪装选择器、优先级问题;

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

13DIV+CSS布局:盒模型、布局相关属性(定位、浮动、显示、溢出);

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

 

注:

单标记:<meta/>,<hr/>,<img/>,<frame/>,<input/>,<link/>;

 

1HTML语法:

HTML标记语言,表示网页信息的符号和标记语言;

 

特点:

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

可创建列表;

可插入图像和媒体;

可建立表格;

超链接,点击可跳转;

 

HTML的标记和属性:

标记:

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

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

<标记>

内容

</标记>

标记的属性:就是用来控制内容(图像、文本等)如何显示;格式为:

<标记 属性1=属性值 属性2=属性值 ...>内容</标记>,如:

<body bgcolor="red">内容</body>

 

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

 

文档注释:

<!--example comment-->

 

代码格式:

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

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

 

字符实体:

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

常见的字符实体有:

实体名称

描述

实体编号

&nbsp;

空格

&#160;

&lt;

<小于号

&#60;

&gt;

>大于号

&#62;

&amp

&和号

&#38;

&quot;

"引号

&#34;

&apos;

'撇号,IE不支持

&#39;

&cent;

&#162;

&pound;

&#163;

&yen

日元

&#165;

&euro;

欧元

&#8364;

&sect;

§小节

&#167;

&copy;

版权

&#169;

&reg;

注册商标

&#174;

&trade;

TM商标

&#8482;

&times;

X乘号

&#215;

&divide;

÷除号

&#247;

 

 

2HTML的基本结构:

<html>内容</html>

解释:HTML文档的文档标记,也称为HTML开始标记;

功能:分别位于网页的最前端和最后端;

注:

HTML中,任意个空格或任意个回车只被当作是一个空格;

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

 

<head>内容</head>

解释:HTML文件头标记,也称为HTML头信息开始标记;

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

 

<title>内容</title>

解释:HTML文件标题标记;

功能:网页的主题,显示在browser的窗口的左上边;

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

 

<body>内容</body>

解释: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>

                   <title>this is test.html</title>

                   <!--要与开发工具notepad++"格式"中的字符集保持一致-->                  

                   <metacharset='utf-8'>

                   <!--两个关键字-->

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

         </head>

         <body bgcolor='green',text='blue' link='red' vlink='blue' alink='yellow'>

                   <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>,有序列表标记,可以显示特定的一些顺序,格式:

<ol type="符号类型">

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

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

</ol>

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

value,指定一个新的序列数字起始值;

列表可以进行嵌套;

 

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

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

格式:

<dl>

         <dt>软件说明:</dt>

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

         <dt>软件界面</dt>

         <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-7browser默认3XHTML1.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像素、emcmmm

height,高度,单位pxemcmmm

border,图片的边框宽度,单位pxemcmmm

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>

                  ……

                  <a name='zhongbu'></a>

                  <h1>这是中部</h1>

                  ……

                  </p>

         <div>

         <aname='dibu'></a>

         <h1>这是底部</h1>

         <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,设置单元格所占列数;

 

 

举例(网页布局):

使用表格实现:

         <body topmargin='0' leftmargin='0'>

                   <table border='1' width='960' cellspacing='0' cellpadding='0'>

                            <tr height='90' bgcolor='red'>

                                     <td>

                                               <fontsize='5'>

                                               <b>网页头部</b>

                                               </font>

                                     </td>

                            </tr>

                           

                            <tr>

                                     <td>

                                               <table height='500' width='30%' bgcolor='yellow'>

                                                        <tr align='center'>

                                                                 <td>

                                                                           <fontsize='5'>

                                                                           <b>网页左部</b>

                                                                           </font>

                                                                 </td>

                                                        </tr>

                                               </table>

                                               <table height='500' width='70%' bgcolor='green'>

                                                        <tr align='center'>

                                                                 <td>

                                                                           <fontsize='5'>

                                                                           <b>网页右部</b>

                                                                           </font>

                                                                 </td>

                                                        </tr>

                                               </table>

                                     </td>

                            </tr>

                           

                            <tr height='90' bgcolor='red'>

                                     <td>

                                               <fontsize='5'>

                                               <b>网页底部</b>

                                               </font>

                                     </td>

                            </tr>

                   </table>

         </body>

 

 

8HTML框架:

框架将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属性来设置默认选中项;

 

隐藏域:

<input type='hidden'/>

 

多行文本域:

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

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

 

菜单下拉列表域:

语法:

<select name='' size='value' multiple>

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

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

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

</select>

 

举例(会员登录表单);

 

 

 

 

10css层叠样式表:

一、使用css样式的方式:

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

定义和用法:

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

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

HTML5不基于SGML,所以不需引用DTD

 

注:

各版本的声明:

HTML5HTML5向下兼容HTML4.01XHTML

<!DOCTYPE html>

         <meta charset='utf-8'>

HTML4.01

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

DTD包含所有HTML元素和属性,包括展示性的和弃用的元素(如font),不允许框架集(framesets

<meta http-equiv=Content-Type content="text/html;charset=utf-8">

注意的规则:

单标记必须闭合,如<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>

         <style type='text/css'>

                   body{

                            background-color:green;

                            color:red;

                   }

                   p{

                            background-color:red;

                            color:green;

                   }

         </style>

</head>

注:

<style type='text/css'>

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

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

</style>

 

4)引入式样式表:

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

<link/>是单标记,<link/><head></head>中定义,href中要定义.css文件;

例:

<html>

         <head>

                   <title>this is test.html</title>

                   <meta charset='utf-8'/>

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

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

         </head>

         <body>

                   <h1>maizi</h1>

         </body>

</html>

 

二、定义样式表(CSS选择器):

注:在CSS的定义中,注释要用/*content*/

1)HTML标记定义:

<p>…</P>

p{属性:属性值;属性1:属性1}

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

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

 

2)class定义:

<p>…</p>

class定义是以点.开始;

.p{属性:属性值;属性1:属性1}

 

3)id定义:

<p id='p'>…</p>

#p{属性:属性值;属性1:属性1}

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

 

4)优先级问题:

id > class > HTML

同级时选择离元素最近的一个(即,后面的会覆盖掉前面定义的);

例:

<head>

         <style type='text/css'>

                  div {color:black;}

                  .p {color:green;}

                  #pp {color:yellow;}

         </style>

</head>

<body>

         <div id='pp'>

                   maizi

         </div>

</body>

 

5)组合选择器(同时控制多个元素):

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

 

6)伪元素选择器:

a:link,正常连接的样式;

a:hover,鼠标放上去的样式;

a:active,选择链接时的样式;

a:visited,已访问过的链接的样式;

例:

<head>

<style type='text/css'>

         a:link{color:black;}

         a:hover{color:green;}

         a:active{color:yellow;}

         a:visited{color:blue;}

</style>

</head>

<body>

         <a href='http://www.baidu.com' target='_blank'>百度</a>

</body>

 

三、常见属性:

1)颜色属性:

color定义文本的颜色,格式:

color:green;

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

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

color:rgba(255,255,255,1)   #rgbalpha(色彩空间)透明度,a取值范围0-10为完全透明,1为不透明;

例:

         <head>

                     <style type='text/css'>

                            .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>

                   <style type='text/css'>

                            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的整百数,400normal700bold

例:

         <head>

                   <style type='text/css'>

                            .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>

                   <style type='text/css'>

                            .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-image,背景图片,格式:background-image:url(/path/to/file.jpg);

background-repeat,背景重复,repeat重复平铺满,repeat-xX轴重复,repeat-yy轴重复,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>

                   <style type='text/css'>

                            body{

                                     background-color:green;

                            }

                   </style>

         </head>

         <body>

                   test

         </body>

例:

         <head>

                   <style type='text/css'>

                            body{

                                     background-image:url(images/bg.jpg);

                                     background-repeat:repeat;

                                     background-position:center;

                            }

                   </style>

         </head>

         <body>

                   test

         </body>

例:

         <head>

                   <style type='text/css'>

                            body{

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

                            }

                   </style>

         </head>

         <body>

                   test

         </body>

 

4)文本属性:

text-alignleft,center,right

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

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

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

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

direction,文本方向,ltr默认值从左到右即leftto rightrtl从右到左,inherit

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

例:

         <head>

                   <style type='text/css'>

                            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>

                   <style type='text/css'>

                            p{

                                     direction:ltr;

                                     text-transform:uppercase;

                            }

                   </style>

         </head>

         <body>

                   <div>

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

                   </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的属性值;

insetinset边框,依托border-color的属性值;

outsetoutset边框,依托border-color的属性值;

inherit

例:

         <head>

                   <style type='text/css'>

                            div{

                                     width:1000px;

                                     height:500px;

                                     background-color:#f60;

                                     border-style:dotted;

                            }

                   </style>

         </head>

         <body>

                   <div>

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

                   </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-zero0开头的数字标记,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-image:

url(/path/to/file.jpg),图像的路径;

none,默认,无图形被显示;

inherit

 

iv简写方式:

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

例:

list-style:decimal-leading-zero outside;


四、div+css布局:

1)divspan在整个html标记中,没有任何意义,它们的存在就是为了应用css样式;

divspan的区别在于,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)布局相关属性:

定位方式:

relative,正常定位;

absolute,根据父元素进行定位;

fixed,根据browser窗口进行定位;

static,没有定位;

inherit

定位:left,right,top,bottom

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

4 display,显示属性:

none,层不显示;

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

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

5 float,浮动属性:

left,左浮动;

right,右浮动;

例:

         <head>

                   <style type='text/css'>

                            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;

                                     <!--display:none-->

                            }

                   </style>

         </head>

         <body>

                   <div class='div'>

                            <span>浏览次数:222</span>

                   </div>

                   <div class='fixed'>

                            <p>联系电话:110</p>

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

                   </div>

                   <br/>

                   <br/>

                   <br/>

                   ……

         </body>

6 clear,清除浮动:

clear:both;

7 overflow,溢出处理:

hidden,隐藏超出层大小的内容;

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

auto,超出时自动添加滚动条;

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

         <head>

                   <style type='text/css'>

                            .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;   <!--width:690px;-->

                                     height:460px;

                                     background-color:#ddd;

                                     <!--margin-bottom:10px;-->

                            }

                            .bottom{

                                     width:960px;

                                     height:200px;

                                     background:red;

                                     <!--clear:both;-->   #产生浮动的解决办法:方二

                                     <!--margin-top:10px;-->

                            }

                            .clear{

                                     clear:both;

                            }

                            .introduce{

                                     background:red;

                                     width:260px;

                                     height:120px;

                                     overflow:scroll;

                            }

                   </style>

         </head>

         <body>

                   <div class='div'>

                            <div class='left'></div>

                                     <divclass='introduce'>

                                     ……

                                     </div>

                            <div class='right'></div>

                            <div class='clear'></div>

                            <div class='bottom'></div>

                   </div>

         </body>

 

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

兼容性测试工具:ietester,multibrowser

常用的browsergooglechrome,firefox,opera

高效的开发工具:轻量级(notepad++,sbulimetext,txt,hbuilder),重量级(webstorm,dreamweaver

网页设计工具:fireworks,photoshop

判断IE的方法:

<body>中,条件判断格式:<!--[if 条件版本]>显示内容<![endif]-->

[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>

                   <!--[if lte IE 9]>小于等于9版本<![endif]-->

</body>




本文转自 chaijowin 51CTO博客,原文链接:http://blog.51cto.com/jowin/1978297,如需转载请自行联系原作者

登录 后评论
下一篇
云栖号资讯小编
11593人浏览
2020-07-13
相关推荐
玩聚的Tweet&Blog墙 VII
837人浏览
2016-04-26 11:11:02
使用数据字典视图管理对象
967人浏览
2017-11-02 09:47:00
部分 VII. Array
820人浏览
2018-01-08 14:28:00
部分 VII. Array
821人浏览
2018-01-08 14:29:00
VII Python(7)爬虫
965人浏览
2017-11-28 14:51:00
HDU 汉诺塔VII
834人浏览
2017-11-30 17:47:00
A+B for Input-Output Practice (VII)
673人浏览
2012-12-11 16:29:00
VBS 脚本对象
556人浏览
2014-05-28 12:23:00
2-VII-RecyclerView事件
852人浏览
2018-08-30 15:14:00
0
0
0
1143