html+css笔记

2023-01-10 13:25:13

文档结构

1.html文档结构

①文档类型声明

严格型（标准模式）: <!DOCTYpE HTML> HTML5

XHTML 1.0:<!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict DTD

准标准模式:transitional过渡型 frameset框架集型

XHTML 1.0:<!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Transitional DTD

XHTML 1.0: <!DOCTYpE html pUbLC"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Frameset DTD

②html页面 <html></html>根标记

2.页面中的元素出现在<html></html>根标记中的内容

①<head></head>头元素

1.1<title></title>定义网页标题

1.2 meta,常用属性content、http-equiv

1.2.1编码格式定义:<meta charset="utf-8"> gb2312

1.2.2定义网页关键字:默认content="html,css"

1.2.3定义网页描述:<meta name="description" content="描述的内容"/>

1.2.4引用javascript<script></script>

1.2.5定义内部样式表<style type="text/css"></style>

1.2.6引入外部样式表<link>

②<body></body>网页主体,常用属性text="red"、bgcolor、background

标准属性:所有标记都会具备的属性

id:定义元素在页面中的唯一标识,布局/JS时用

title:鼠标移入到当前元素上时所提示的文本

class:定义元素的类选择器

style:定义元素的行内(内联)样式

结构标记:取代div布局,有的内容无法使用结构标记则用div

<header></header>页头/眉,最上方显示内容,允许出现多次,取代<div id="header">

<section></section>主信息,常用于为页面上的内容分块,比如定义章节、页眉页脚等其他部分,可以使用header为内容添加标题

<article></article>用于定义独立与文档的其他部分内容,比如一个帖子,一篇文章,博客条目,用户评论

<footer></footer>页脚

特殊:面包屑导航bread-crumb 结构模式为:1>2>3...

URL:1.绝对URL

①访问网络资源:由协议名、主机名(Ip地址)、目录路径、文件名称组成

协议名:http/https

主机名:Ip地址,域名www.xxx.com

目录路径:资源文件所在的文件夹路径

②访问本机资源:从文件所在的*目录下一层一层寻找

缺点:程序一旦发送位置改变,要保证新计算机中也要有对应的绝对路径和文件。

2.相对URL:相对当前文件所在的位置,去查找资源文件的路径

①同目录下,通过文件名称引用文件

②父目录下,先返回,再查找资源文件

../:向上返回一级目录

③子目录下:先进入到文件夹中,再查找资源文件

3.根相对URL:永远都是从web站点的根目录处开始查找

以/作为开始的路径都是根相对路径

<hr>分割线,单标记

常用属性:size厚度、width宽度、align水平对齐方式、color、noshade无阴影

注释,不能嵌套在标记中/注释中:<p >错误

<h1></h1>1号题标题,自动换行,数字不同标题大小不同,加粗,上下垂直空白

<p></p>段落,与前后文本都换行分开,常用属性:align;

注意:p只能嵌套文本、图像一级行内元素;p中不能嵌套p也不能嵌套div;

段落换行和br换行空间不一样

<br/>换行,单标记,可以没有结束

<blockquote></blockquote>缩进式段落标记

<pre></pre>预格式化元素,保留文档中的回车和空格的效果

<div></div>块分区元素,作用:网页布局;

注意:div可以嵌套任何一个元素,非布局元素不要嵌套div

在没有元素实现区域分割的情况下使用div

<span></span>行分区元素,不自动换行,一行内多个元素之间自动产生空格

作用:行内元素的布局和分区

行内元素与块级元素

1.行内元素:多个元素在一行内显示;span,i,u,s,b,a,img,input,select,strong（强调的语气）

特点:修饰文本,行内不能嵌套div

2.块级元素:每个元素独占一行:div,p,hn,ul,ol,li,dl,dt,dd

特点:做布局

3.空元素:<br> <hr> <img> <input> <link> <meta>

鲜为人知的是:

文本标记:不建议使用,建议用css样式

<em> 把文本定义为强调的内容

<strong> 把文本定义为语气更强的强调的内容

<b></b>加粗

<i></i>倾斜

<s></s>删除线

<u></u>下划线

<sup></sup>上标

<sub></sub>下标

<font></font>属性size,color,face(字体)

特殊字符:

 空格

< < -->less than

> > -->greater than

¥ ￥

<img/>:src(引用图像的URL)、

width/height(宽度高度只设置一个属性的话图片将等比缩放)、

title(鼠标移入时所提示的文本)、

alt(短描述)

图像格式:宽度高度设置不同的百分比不会拉伸

1.jpeg(图形图像联合专家组):表现形式:*.jpg *.jpeg 特点:有损压缩

2.gif(图像接口格式): 表现形式:*.gif 特点:动画

3.png(可移植网络图形): 表现形式:*.png,特点:背景为透明的时候使用

<a></a>链接,href(必有),target,name,rel

rel="text"规定当前文档与被链接文档之间的关系

href链接URL:绝对URL:http://www.......html

相对URL:images/teachers.jpg

根相对URL

锚点:①定义锚点-在页面上做记号

<a name="锚点名称">内容</a> a标记name属性,HTML5不支持

<div id="锚点名称">内容</div> 任何一个标记的id属性

②链接锚点-跳转到记号上

<a href="#锚点名称">...</a> 本页面锚点跳转

<a href="页面url#锚点名称">...</a> 其他页面锚点跳转

配合a:target{}动态为目标元素设置样式

③<a href="#top">或<a href="#"> 返回页面顶部的空链接

target属性:目标,即打开新网页的方式

可取值为_blank:新标签中打开

_self:当前页面或当前框架中打开,默认值

_parent:在当前文档的父框架组中打开

_top:在当前页面打开,破坏当前框架

链接的表现形式:1.目标文档为下载资源

链接目标为 *.rar或*.zip时就是下载操作

2.电子邮件链接

前提:必须有邮件客户端(Foxmail,Outlook),绑定账号

3.链接到Javascript即执行JS操作:

onmouseover:"window.status='';return true;"鼠标移动到目标上显示的信息文本;

onmouseout:鼠标移出

<table></table>表格,可嵌套,嵌套的表格必须放在td中,是一些"单元格"从左到右,从上到下的方式进行排列的

width/height:表格宽/高度,默认单位px

align:表格在父层容器中的对齐方式(left/center/right)

bgcolor:表格背景颜色

cellpadding:单元格内边距(边框与内容之间的距离)

cellspacing:单元格外边距(单元格之间的距离)

border:边框粗细

bordercolor:边框颜色

background:背景图片

summary:规定表格的摘要，不会对普通浏览器中产生任何视觉变化。

<caption></caption>表格标题,表格外,自动居中

<thead><thead>表头行分组

<tbody></tbody>表主体行分组,默认情况下,表格中所有的tr都会放在一个tbody中;如果不手动编写行分组,大多浏览器会自动增加tbody

<tfoot></tfoot>表尾行分组

行分组包含一个或多个tr

<th></th>行列/标题,自动居中,使用方式与td相同,一般为第一行和每行第一个

<tr></tr>行

align:水平对齐

valign:垂直对齐方式(top/middle/bottom)

bgcolor:行背景颜色

<td></td>单元格,所有数据内容必须存放在td中,

注:默认情况每行的td数量都是统一化的

colspan:单元格跨列的单元格数,值为正整数,横向向右

rowspan:单元格跨行数,纵向向下

nowrap:单元格中的内容不换行

width/height:设置好宽/高度后,每行该列的宽度都与设置值相等

align/valign:/(top/middle/bottom)

bgcolor

background

<colgroup></colgroup>用于对表格中的列进行组合，以便对齐进行格式化

<col>用于表格列的属性，在table/colgroup中使用

css布局:

①{display:table;} <==>table,不是块级(block),也不是行内(inline)

特点:前后自动换行/独占一行

宽度自适应(由内容决定)

{display:table-row;} <==>tr

{display:table-cell;} <==>td/th

②块级:display:block

特点:独占一行

宽度100%

高度自适应

③行内:display:inline

特点:一行内显示多个

宽度高度自适应

垂直内边距、边框、外边距，显示设置高度宽度无效

可修改行高，水平内边距、边框或者外边距

对align无效

列表,可嵌套在列表项中,块

<ul></ul>无序列表,type属性+li列表项改变,unorder list

<ol></ol>有序列表,自动编号,自动换行,用type属性+li控件改变列表项,order list

type属性:ul:disc(实心圆,默认);circle(空心圆);square(实心矩形)

ol:1(默认);a(小写字母);A;i(小写罗马数字);I

star属性:ol:第一个列表项起始序号

<dl></dl>列表创建定义列表，可以进行结构性分组

<dt></dt>定义术语

<dd></dd>解释

<details></details>折叠元件,open默认展开

<summary></summary>标题

<meter></meter>度量元素%,min(默认0可不写),max(默认1,通常改为100),

value(度量值,默认0),title

<time></time>时间元素,用来关联时间的不同表现方式,不能为页面带来显示效果变化,datetime关联的日期时间值,日期与时间之间用T分割2011-7-11T0:35

<mark></mark>高亮文本显示,显示额外的背景色

<botton>显示的文本</botton>如果在form内,作用是提交按钮

如果在form之外,作用是普通按钮

将一个网页嵌入在另一个网页中,常用于底部footer/搜索head区等容易重复的区域

frameborder:0/1显示框架边框

width/height

marginwidth/marginheight:定义框架左侧和右侧/顶部和底部边距

scrolling:yes/no/auto是否显示滚动条

src:url

<form></form>表单,用于显示、收集、提交用户信息到服务器上,一般table在form里

①name:表单名,JS中使用

②id:标识

③action:表单被提交时发生的动作,通常包含服务方脚本的URL(比如jsp、php)

处理表单数据的服务器端处理程序的地址,通常由服务器端处理人员提供。

默认值为提交到本页。

④enctype:表单数据进行编码的方式(将什么样的数据提交到服务器)

取值:1.application/x-www-form-urlencoded允许将提交数据中的普通字符以及

特殊字符(?.=,&)一并提交给服务器

2.multipart.form-data允许将文件进行上传,文件上传时enctype的值必须为multipart/form-data

3.text/plain只允许将普通字符提交给服务器,特殊字符不可以

⑤method:⑴post:向服务器端传送数据

特点:以密文的方式进行数据的提交,所提交的数据不会显示在地址栏上

1.安全性较高,适合提交用户的数据,密码必须用post

2.无大小限制,适合大文件提交,大数据提交

使用场合:1.提交数据让服务器处理的时候

⑵get:从服务器上获得数据,默认值,

特点:以明文方式进行提交,数据会显示在地址栏上。

1.安全性较低(明文)

2.有长度限制2KB,

使用场合:向服务器要数据的时候使用get提交方式

form控件:表单控件不在表单中,数据无法提交;不同浏览器对文本输入框/文本区域尺寸不同,应显式设置宽度和高度

①<select>

</select>

select选项框,size(>1则为滚动列表),multiple(多选),name

option选项,value(选项的值),selected(预选中),

②<textarea></textarea>:多行文本输入框

name

cols:文本区域列数,一行允许显示多少个字符

rows:行数,默认能够显示几行数据

readonly:只读

③<input/>单标记

属性:type(默认/写错的时候都是文本框),value(控件数据,提交给服务器时使用),name(控件名称,服务器使用),disabled(禁用控件)

<input type="text"/>文本框,属性size,name,value,maxlength(限制字数),readonly(只读),单标记

<input type="password"/>密码框,属性同上

<input type="radio"/>单选,缩写rdo

name:名称,并用于分组,一组单选/复选框的名称必须相同

value:value发送到服务器中,必须设置

checked:默认选项

<input type="checkbox"/>复选,chk,属性同上,必须设置value

<input type="submit"/>提交按钮,传送数据给服务器端/其他程序处理,

属性name、value(按钮显示文本)

<input type="reset"/>重置按钮,name、value

<input type="button"/>普通按钮,btn,执行客户端脚本,name、value

<button>文本</button>普通按钮

<input type="hidden"/>隐藏域,name、value,将一些不想给用户看的数据,但是要提交给服务器的数据,放在隐藏域中

<input type="file"/>文件选择框,name,注意:method必须为post;enctype值必须为multipart/form-data

<label></label>:将文本与控件联系在一起后,单击文本效果同单击控件一样

隐式方式：<label>email<input name=’email’ type=’text’/></label>

显式方式：<input type="checkbox" name="chkHid" id="chkHid"/>

<label for="chkHid">不要公开我的信息</label>

for:表示与该元素相联系的控件的ID值;

控件分组:<fieldset> border设置0px可以关闭

控件

</fieldset>

name命名规范:匈牙利命名法

控件缩写+作用

缩写:文本、密码框txt+ 作用名称:首字母大写Username = txtUsername/txtUserpwd

css:/* 层叠样式表,级联样式表,cascading style sheets */

作用:控制页面元素的样式,提高代码的可重用性可维护性,能够使表现(html)和样式(css)相分离

html与css关系:HTML负责搭建网页结构,CSS用于构建元素样式

w3c规范尽量使用css样式取代HTML属性

能够取代的属性body:text/font:color/align可被text-align取代等

无法取代的属性:colspan,rowsoan

firefox调试:1.Unknown property name样式属性名写错

2.Invalid property value未验证的属性值写错了

样式表顺序:行内样式>植入样式>链接样式>输入样式>缺省浏览器样式

①内联/行内样式表:定义在html中,<p style="color:red;">...</p>

常用属性color/background-color/font-size

②内部样式表:<html>和<body>之间插入,一般插入head中

<style>

选择器{声明;}

</style>

注释标签:有些老的浏览器(如MAC机用的IE 2.0)即使在设定了type="text/css"属性时也不能忽略样式表继续执行下面的命令,还会显示样式表的代码。使用注释标签可以避免发生这种情况。

③外部样式表:<head>中插入文件url,不能和其他方法结合使用

rel=stylesheet首选样式表/alternate候选样式表

media=all默认所有媒体/...

title:设定同样的值,可按照首/候分组对应不同媒体

④输入样式表:插入文件url,只有IE 4.0支持,可以和其他方法结合使用

<!--

@import url(xxxx.css);

h1 { color: orange; font-family: impact; }

-->

</style>

!important:重要声明,超过其他所有声明,放置在声明的分号前,中间用空格隔开,一个元素多个声明则都需放置

选择器:

①通用选择器:* 匹配页面上所有元素，可以用来对某个元素的所有后代应用样式或跳过一级后代

②元素选择器:标签

③ID选择器:*#,html中只能使用一次

④类选择器:*. 定义class属性后使用,不能以数字开头不能包含特殊字符（-,_）,

多类选择器:可给一个元素定义多个类名

分类选择器:将元素选择器和类选择器联合使用p.first { color: green; }

群组选择器:选择器列表用 , 隔开

⑤后代选择器:选择某元素的所有后代,选择器1 选择器2{ }

⑥子代选择器：选择某元素的直接后代，条件:父子关系

⑦相邻兄弟选择器:选择紧接在一个元素后的元素,条件:同父元素,一个元素紧接在一个元素后

h1 + p {margin-top:50px;} p紧接在h1后,选择了P

⑧通用兄弟选择器:选择某元素后面的所有兄弟元素,该元素可不直接紧随某元素

h1~p:选择h1后的所有p

⑨属性选择器:根据属性或属性值来寻找元素

简单属性选择器:elem[attr]{ } //elem表具体元素,attr表属性名称

elem[attr1][attr2]

img [alt]{ } 选择有alt属性的img

a [href][title] 选择同时有href和title的a

具体属性值选择器:elem[attr="value"] value是属性值,需完全匹配

部分属性值选择器:elem[attr~="abc"] abc是属性值里一个独立的单词

p [class~="warning"]<==>p.warning 选择单词列表有class的属性

子串属性值选择器:

p[class^/$/*="b"]选择foo属性以b开头/结尾/包含

a[href^="http://www..com"]/a[href$=".doc"]/a [href*="xxx.com"]常用

语言属性选择器:img [src|="img"] 选择属性=img和以img-开头的图像

⑨伪类选择器:选择器:伪类选择器{ }

链接/动态/目标/元素状态/结构/否定伪类,用于匹配元素不同状态时的样式

按LIVA顺序使用或用:串联连接伪类,只能作用于子元素和本身a:link b{}

-:link { }未被访问过的链接,链接伪类，在对a应用css时，可避免a的锚目标位置css改变

-:visited { }已经访问过的链接,链接伪类

-:hover { }鼠标悬停在某元素时,动态

-:focus { }元素获取焦点时,接受键盘输入或以某方式激活的元素,动态，输入框

-:active { }元素被激活,正在点击的链接,动态，提交按钮

链接伪类只能应用于锚元素动态伪类可以应用任何元素

静态伪类:第一个子元素:p:first-child 匹配到p的父元素的第一个子元素p

目标伪类:-:target{ }匹配#锚定义的目标元素,多用于<a href="#id">的跳转

元素状态伪类:-:enabled{ }匹配每个已启用的元素(大多用在表单元素上)

-:disabled{ }匹配每个被禁用的元素(大多用在表单元素上)

-:checked{ }匹配每个已被选中的input元素(只用于单选按钮和复选框)

结构伪类:-:first-child匹配属于其父元素的首个子元素

-:last-child匹配属于其父元素的最后一个子元素

-:empty匹配没有子元素(包括文本节点)的每个元素

-:only-child匹配属于其父元素的唯一子元素

-:nth-child(n)匹配属于其父元素的第n个子元素

否定伪类:-:not(-)匹配非-元素的其他所有元素

td:not(:first-child):not(:last-child)

input:not([type="text"]){ }匹配input中除了某属性以外的所有input标签

选择器:lang(fr){ ;} 定义lang="fr",向带有指定 lang 属性的元素添加样式。

Communicator支持带文字修饰(text-decoration)的预定义分类,但对其它属性非常

挑剔,IE 3不支持A:active(而MAC不支持A:visited)

⑩-:伪元素选择器可用-::伪元素选择器

伪类用于匹配元素,伪元素用于匹配元素中的内容

:用于伪类选择器,::用于伪元素中(部分伪元素也可用:)

W3C规范伪元素必须用:: 伪类必须用:

为了保证兼容性,通常使用:既表示伪类也表示伪元素

选取元素的首字母-:first-letter

选取元素的首行-:first-line

元素匹配用户选取的部分 ::selection{ }只能设置color,background

选取元素之前和之后-:before/after{content:""}在之前/后插入

内容生成属性:效果中不能查看源文件/复制等

-:before/after{content:url() "字符串" counter(计数器名) "";...}

``设置插入部分的效果

<a href="../default.htm">W3School</a>

a:after{content: " (" attr(href) ")"}

在a之后插入:(../default.htm)

计数器:同一个计数器可给不同元素使用

范围元素{counter-rest:计数器名/计数器名值;}创建/复位计数器,

值默认0,可为正/负;多个计数器名称之间用空格隔开

不能再使用的元素上声明,在使用元素组的范围外声明

-{counter-increment:计数器名/计数器名增量值; //默认增量1,可以是正值或负值

-:before/after{content:counter(计数器名);} //为指定元素添加计数器

display: none;无法增加计数； visibility: hidden；可增加计数

css优先级:通过选择器改变权重控制顺序

①按权重和来源排序:

声明来源由大到小:读者!important声明>创作人员!important声明>创作人员正常声明>读者正常声明>用户代理声明

②权重相同,按特殊性排序:

内联1000>ID0100>类/伪类/属性0010>(伪)元素0001>通用/子代/相邻选择器>浏览器缺省样式

权值相加,大的优先,相同则按前后顺序,非二进制:0,0,1,0>0,0,0,13

③权重、来源和特殊性完全相同,按顺序,最后出现的胜出

继承:子元素继承父元素,但大多框模型属性(边框border/内边距/外边距/背景)不会继承

层叠:为一个元素定义多个选择器,当样式声明不冲突时,可以将多个样式可以合并成一个

在body上添加类或ID来增强特殊性

css单位:

1.尺寸单位:css中的数值,如果有单位不能省略

%:比例:百分比是由父元素的大小作为参照

in:英寸 -->2.54cm

cm:厘米

mm:毫米

pt:磅 -->1/72in 文字大小使用,points,,pC中显示的字比MAC中显示的大一些,所有的浏览器和操作平台上都适用

px:像素,可以同时控制图像和文本大小,pixels

em:倍数

pc(打字机字型尺寸单位)文字大小使用

ex(x-height) 文字大小使用

2.颜色单位:

①颜色英文名称:

aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,and yellow.

②16进制:#rrggbb 0-9、A-F组成 #000000黑 #ffffff白 #336699/#369

③rgb(r,g,b) 红绿蓝,数值范围0~255

④rgb(r%,g%,b%)

尺寸属性:width/max-width/min-width;height/max-height/min-height

哪些元素允许修改尺寸:p/div/h1/ul/ol/li/dl/dt/dd等块级对象;

存在width、height属性的元素,img/table等;

不具备width、height的行内元素不允许修改

溢出处理:内容空间>框空间

overflow/overflow-x/overflow-y:

visible(默认)超出尺寸也显示全部内容,若要子元素覆盖父元素,需设置默认值

hidden超出尺寸隐藏文本

scroll总显示滚动条

auto超出时显示滚动条

边框简写:border:width style color;

单边:border-方向(left/right/top/bottom):width style color;

单属性:border-属性:值;

单属性单边:border-方向-属性:值;

边框属性:

①宽度:width:1个值/4个方向值;

值:长度单位/关键词thin/medium/thick;常用:border-width:0/none取消边框

②样式:style: solid实线/double双线/

dotted点线/dashed虚线/groove/ridge/indet/outset;

希望显示某种边框,就必须设置边框样式

③颜色:color:顶右底左;transparent(透明边框)

④倒角:radius:绝对值/百分比; 顺时针顺序设置四个

border-top-left/right-radius:左/右上角(bottom-left/right左下/右下)

⑤图片:image:url(url地址) 偏移宽度超出的量平铺/铺满/拉伸;

⑥合并:collapse:separate默认,分离边框/collapse合并相邻的边框,表格特有

⑦边距:spacing:长度值/上下左右;相邻单元格边框距离;条件:必须为分离边框模式使用,表格特有，IE6/7控制单元格间距的唯一办法(其他:margin:0;padding:0;)

显示规则:table-layout:

auto默认,列宽度由内容决定,自动表格布局

fixed由table和td宽度值来决定td宽,固定表格布局

自动表格布局特点:

单元格大小适应内容

表格复杂时,加载速度较慢

适用于不确定没咧大小时使用

固定表格布局特点:

单元格宽度由自定义数值为主,与表格显示内容无关

会加速显示表格,浏览器加载完第一行时就不用再进行后续的计算了

不够灵活

边框阴影:box-shadow:h-shadow(必须,水平阴影位置) v-shadow(必,垂直)

blur(模糊距离) spread(阴影尺寸) color inset(将外部阴影outset改为内部阴影)

轮廓:outline: width style color;常用:outline:0/none取消轮廓，轮廓不占用空间

outline-width/style/color:轮廓宽度/样式/颜色

outline-offset:length/inherit从父元素继承;默认0

盒模型:box model,框模型,定义了元素框、处理元素内容、内边距以及外边距

width/height:内容区域的宽度/高度,增加元素框的总尺寸,内边距、边框、外边距不会影响内容区域的尺寸

height影响框模型高度,line-height影响文本上下偏移

设置width和margin:0 auto;可使该块自动居中。

margin:外边距,元素与元素之间的距离,

取值:px/%/auto(自动计算外边距实现块级元素水平居中)/负值(相反方向移动元素)

外边距简写:margin:value;4个方向/上下左右;/上左右下;/上右下左(顺时针);

单边:margin-top/right/bottom/left:

边框外的空间,可以为负,默认透明

默认外边距:默认情况下块级元素都存在外边距,可以通过重写css来取消默认外边距

外边距叠加:

两个垂直外边距相遇会形成一个外边距，取较大值外边距

外边距可与本身发生叠加，父子元素无边框，内边距时，垂直外边距取较大值

只有普通文档流中可以，行内框(行内元素)，浮动框，绝对定位框直接不会发生叠加

外边距溢出:父子元素时,设置子元素的上下外边距,有可能会作用在父元素上

条件:父元素没有边框时,而且设置第一个子元素的上外边距时,会产生外边距溢出

解决方案:1.为父元素增加上/下边框,设置不可见,同时注意添加height=总高-border

2.为父元素设置一个上(下)内边距,用来取代子元素的上(下)外边距

3.在父元素中,增加一个空table作为第一个子元素

padding:内边距,内容区域和元素框之间的距离,不能为负,单边和简洁写法同上

注意:给行内元素增加内边距时,不会影响到其他元素

框模型计算模式:对象实际宽度=左右外边距+左右内边距+width;

对象实际高度度=上下外边距+上下内边距+height;

背景简写:background:颜色图像url 平铺固定定位;无须设置每一项

背景颜色需设置在背景图片后才能显示

①背景颜色:background-color: 可以设置透明属性transparent,会填充元素的内容、内边距和边框区域;如果边框有透明部分会透过透明部分显示出背景色

②背景图片尺寸:background-size:宽度高度/cover扩展背景图像尺寸,使背景图像完全覆

盖背景区域,图像的某些部分也许无法显示/contain扩展背景图像尺寸,使器宽度和高度完全适应内容区域

③背景重复:background-repeat:repeat默认在水平和垂直重复出现(平铺)/no-repeat不重

复图像/repeat-x水平平铺/repeat-y垂直平铺,

④固定背景:background-attachment:scroll滚动,默认/fixed不滚动;只用于body标签内

⑤背景定位:background-position:x y;不同参数可混用

关键字参数:x:left/center/right y:top/center/bottom;

长度参数:x y; x正值右移,负左移;y正下移,负上移

比例值:x% y%; 0% 0%原始位置,左上方/100% 100%右下/50% 50%元素正中间

Firefox/Opera 中,要把background-attachment属性设置为 "fixed",才能保证定位

属性正常工作

⑥背景图像:background-image:url(地址url);默认none

特别:css sprites:将若干幅图像封装到一幅图像中,根据需求移动图像位置,从而显示出想看的图像,设置显示范围,定位:background:url(images/iconlist_1.png) no-repeat -243px -112px;

⑦渐变:background-image:渐变属性(设定1,设定2,设定3);

⑴线性渐变linear-gradient(angle,color-point1,color-point2,...)

⑴angle:渐变方向to top从下向上/ringht左向右/bottom/left

或角度值0（to top）/90(to right)/180/270deg 范围0~360deg

⑵color-point:色标,由颜色和位置组成red 0%/0px

⑵径向渐变radial-gradient([size at position],color-point1,...)

渐变圆心位置,默认center,可省略,可取值数值/百分比/关键词

颜色起始点、中间点或结束点

⑶重复线性渐变repeating-linear-gradient(angle,color-point1,color-point2,...)

位置一定要给绝对的数值px,不要给相对%

180deg:to bottom

⑷重复径向渐变repeating-radial-gradient([size at position],color-point1,...)

渐变浏览器兼容性:浏览器不支持属性,前缀加在属性前;支持属性不支持值前缀加在值前

需要加前缀的浏览器:firefox:-moz-

chrome/safari:-webkit-

opera:-o-

IE:-ms-

字体简写:font:style斜体 varaint小型大写 weight加粗 size字号 family字型;

必须设定字号和字型,建议,取代加粗b倾斜i等HTML元素

font:12pt/16pt courier;字体大小/行高

使用系统字体:caption有标题的空间如按钮/icon用于对图标加标签/menu菜单/message-box对话框/small-caption对小控件加标签/status-bar窗口状态条

botton{font:caption;}按钮字体设置与操作系统中的按钮字体完全相同

字体:字体名有空格/与font-family关键词冲突(用一个与通用字体名同名的特定字体时)需要要引号"/’

body { font-family: "gill sans","Karrank%","微软雅黑"serif; }

Windows:应用软件比如word中的字体菜单中所列出的确切的字体名称。

Mac:不要相信应用软件给你列出的字体名称。而应该打开你的system folder,按照

其中对字体的拼写在你的样式表中使用字体名称。

如果字体设置没有列在最后一条,IE 3 会忽略整个一条CSS规则

字体大小:font-size:尺寸单位/关键字

关键字:xx-small/x-small/small/medium/large/x-large/xx-large /

smaller/larger

斜体:font-style:normal取消斜体/italic斜体,对字母结构有改动/oblique倾斜版本

加粗:font-weight:normal(清除加粗)/bold(b,hn,strong默认值)/lighter/bolder(IE /或Netscape Communicator不支持后两个)/100~900

小型大写字母:font-variant:normal/small-caps(大写字母变大,小写字母变大写); Communicator/IE不支持

文本:

文本颜色:color:value;

文字对齐:text-align: center/left/right/justify左右对齐(MACIE 3/4不支持)

文字修饰:text-decoration: 无继承性,线颜色与父元素相同

none效果都不发生,可去除链接的下划线

underline下划线

overline上划线

line-through删除线

blink文字在闪烁

Communicator不支持上划线,IE 4不支持文字闪烁,IE 3都不支持

文字转换:text-transform:none使文字将以正常形式显示

uppercase使所有字母大写显示

lowercase使所有字母小写显示

capitalize 使每个单词的第1个字母大写显示

首行文本缩进:text-indent:value;

文本阴影:text-shadow:h-shadoe v-shadow blur color;

text-overflow:ellippsis;单行文本溢出显示省略号

行高:line-height:长度单位/数字/比例,一行数据的高度

如果行高高度高于字体本身大写,该行文本会呈现出垂直居中的效果

行高=行间距+文字字体大小,为

避免继承时行间距过窄,设置line-height缩放因子:1/1.5等数字

字间距:word-spacing:长度单位/normal 只有MAC机用的IE4支持

字母间距:letter-spacing:长度单位/normal ,修改字符或字母的间隔 Communicator不支持

处理空白符:white-space:normal回车转换成空格/nowrap防止换行(除br)/pre/pre-line/pre-wrap;

文本方向:direction:ltr默认,左到右/rtl/inherit;影响元素中文本书写方向等

unicode-bidi:normal/embed/bidi-override

定位:用position和偏移可以设置普通流/相对/绝对定位,float设置浮动定位

position:static/relative相对/absolute绝对/fixed固定定位;

偏移属性:left:+右;top:+下;right:+左;bottom:+上;

z-index:无单位的数字;堆叠顺序,值越大越靠上

⑴只有已定位元素才能使用:relative/absolute/fixed,可以设置负值

⑵父子关系无法调整,永远都是子压在父上

⑶注意数值大小和层叠关系，可能会导致元素不可用

①普通流定位:position:static文档流定位,页面元素默认定位方式

块级元素:从上到下排列,独占一行,可通过margin改变元素位置

行内元素:从左到右排列,多个元素能在一行,显示不下,换行,通过左右margin改变

左右位置,可以使用水平内边距/边框/外边距调整之间的位置

非替换元素:元素内容包含在文档中

替换元素:用作为其他内容占位符的一个元素

②相对定位:position:relative;left/right:value;top/bottom:value;

"相对于"它的起点进行移动。

width,height(不支持),z-index参数高出现在越上面

元素扔保持未定位前的形状

元素原本所占的空间仍保留

③绝对定位:position:absolute;left/right:value;top/bottom:value;

将元素的内容从普通流中完全移除,会产生重叠

相对于最近的已定位(设置relative/absolute/fixed)的祖先元素定位

如果没有已定位的祖先元素,那么它的位置相对于最初的包含块:body/html实现

码农公寓

文档结构

相关文章