HTML-CSS-JavaScript速查手册：提升Web开发效率

4星 · 超过85%的资源需积分: 10 66 浏览量更新于2024-07-31 收藏 4.44MB PDF 举报

《HTML-CSS-Javascript速查手册》是一本实用性极强的参考书籍，专为Web设计师和开发者打造，旨在提供他们在日常工作中最常遇到的HTML、CSS和JavaScript语言的快速查阅工具。该手册以图形化的方式呈现，便于理解和记忆，帮助读者高效地查找和理解这些核心技术的关键概念。 HTML部分，速查表涵盖了基础元素如`<html>`、`<head>`和`<body>`，以及属性如`id`、`class`和`href`，这些都是构建网页结构和链接页面内容的基础。对于表格、列表和多媒体元素的使用也有详细介绍，如`<table>`、`<ul>`和`<img>`标签及其相关属性。 CSS方面，速查表涵盖了样式表的核心概念，包括`background`属性的各个子属性，如`background-color`、`background-image`和`background-repeat`，这些属性用于设置网页背景的样式。还有`border`属性，涉及边框宽度、样式和颜色的设置，例如`border-width`、`border-style`和`border-color`。此外，还有`position`属性，对定位元素的位置有明确的分类，如`static`、`relative`、`absolute`和`fixed`。 JavaScript部分，虽然没有直接列出所有语法，但速查表可能会涉及到一些常用的内置对象、函数和事件处理，如`document`对象、`addEventListener`方法以及条件语句和循环结构等。手册强调了这些语言在网页交互和动态效果中的重要作用。此PDF版本的内容来源于网络，作者疯狂来自crazyfrom.com，它遵循Creative Commons许可协议，允许用户在指定条件下分享和再利用。书中提供了登录网站获取更多实时更新和交流资源的途径，如网站地址`http://www.crazyfrom.com`，邮箱和QQ联系方式，以便用户反馈建议和问题。《HTML-CSS-Javascript速查手册》是一本非常实用的工具书，适合初级到中级开发者快速查找和复习基础知识，同时也能作为进阶学习者的参考资源，提升他们的工作效率。

PAGED MEDIA

fit fill | hidden | meet | slice

fit-position [top | center | bottom] ||

[left | center | right]

length

image-orientation auto

angle

orphans integer

page auto

identifier

page-break-after auto | always | avoid | left |

right

page-break-before auto | always | avoid | left |

right

page-break-inside auto | avoid

size auto | landscape | portrait

length

windows integer

Cascading Style Sheets (CSS 3)

•

Values in italics are place holders for an actual value (like 1px,

1em, 1%), values in normal text are values that can be used as

the actual value

•

CSS Properties in Dark Red are shorthand properties and each

value must be defined. The exception is where the property can

define from one to four of the sides of a box element property

(Top-Right-Bottom-Left) - i.e. border-width

appearance normal | inherit | [icon |

window | desktop | work-

space | document | tooltip |

dialog | button | push-

button | hyperlink | radio-

button | checkbox | menu-

item | tab | menu |

menubar | pull-down-menu

| pop-up-menu | list-menu |

radio-group | checkbox-

group | outline-tree | range

| field | combo-box | signa-

ture | password]

icon auto | inherit

url

resize none | both | horizontal |

vertical | inherit

cursor auto | crosshair | default |

pointer | move | e-resize |

ne-resize | nw-resize | n-

resize | se-resize | sw-resize

| s-resize | w-resize | text |

wait | help

url

nav-index auto | inherit

number

nav-up auto | inherit

<id> [ current | root |

<target-name> ]

nav-right auto | inherit

<id> [ current | root |

<target-name> ]

nav-down auto | inherit

<id> [ current | root |

<target-name> ]

nav-left auto | inherit

<id> [ current | root |

<target-name> ]

http://www.crazyfrom.com

ＣＳＳ

SELECTOR TYPES

Name Info Example

Universal Any element * { font: 10px Arial; }

Type Any element of

that type

h1 { text-decoration:

underline; }

Grouping Multiple

elements of

different types

h1, h2, h3 { font-family:

Verdana; }

Class Multiple

elements of

different types

when you don’t

want to affect

all instances of

that type

.sampleclass { text-

decoration: underline; }

Id A single

element type

when you don’t

want to affect

all instances of

that type

#sampleid { text-

decoration: underline; }

Descendant An element that

is below (in the

document tree)

another

element—no

matter how

many levels

below

#gallery h1 { text-

decoration: underline; }

Child An element that

is directly below

(in the

document tree)

another

element

#title > p { font-weight:

bold; }

Adjacent

Sibling

All elements

that share the

same parent

and elements

are in the same

immediate

sequence

h1 + p { font-style:

italic; }

Attribute An element with

that matches

the attribute

listed

E[selected] - att whatever

the value

E[att="val"] - att with a

specific value

E[rel~="next"] - att with

a value is a whitespace

separated list

*[lang|="en"] - att value

either being exactly "val"

or beginning with "val"

immediately followed by

"-"

E[att^="val"] - att value

that begins with the prefix

"val"

E[att$="val"] - att value

that end with the suffix

"val"

E[att*="val"] - att value

contains at least one

instance of the substring

"val"

General

Sibling

All elements

that share the

same parent

and elements

are in the same

sequence (not

necessarily

immediate)

h1 ~ p { font-style:

italic; }

UNITS

ABSOLUTE MEASUREMENT

% percentage

cm centimeter

in inch

mm millimeter

pc pica (1p = 12 points)

pt point (1pt = 1/72 inch)

RELATIVE MEASUREMENT

ch width of the "0" glyph found in

the font for the font size used to

render

em 1em = current font size of

current element

ex x-height of the element's font

gd the grid defined by 'layout-grid'

px pixel of the viewing device

rem the font size of the root element

vh the viewport's height

vw the viewport's width

vm viewport's height or width,

whichever is smaller of the two

ANGLES

deg degrees

grad grads

rad radians

turn turns

TIME

ms milli-seconds

s seconds

Hz hertz

kHz kilo-hertz

COLORS

color name red, blue, green, dark green

rgb(x,y,z) red = rgb(255,0,0)

rgb(x%,y%,z%) red = rgb(100%,0,0)

#rrggbb red = #ff0000 (or shorthand =

#f00)

FREQUENCY

hsl(hue, saturation,

lightness)

red = hsl(0, 100%, 50%)

hsla(hue, saturation,

lightness, alpha)

red = hsl(0, 100%, 50%)

rgba(x,y,z, alpha) red = rgba(255,0,0)

flavor An accent color (typically chosen

by the user) to customize the

user interface of the user agent

itsel

currentColor computed value of the

'currentColor' keyword is the

computed value of the 'color'

property

PSEUDO-CLASS

:active an activated element

:focus an element while the

element has focus

:visited a visited link

:hover an element when you mouse

over it

:link an unvisited link

:disabled an element while the

element is disabled

:enabled an element while the

element is enabled

:checked an element (form element

control) that is checked

:selection an element that is currently

selected of highlighted by

the user

:lang Allows the author to specify

a language to use in a

specified element

:nth-child(n) an element that is the n-th

sibling

:nth-last-child(n) an element that is the n-th

sibling counting from the

last sibling

:first-child an element that is the first

sibling

:last-child an element that is the last

sibling

:only-child an element that is the only

child

:nth-of-type(n) an element that is the n-th

sibling of its type.

:nth-last-of-type(n) an element that is the n-th

sibling of its type counting

from the last sibling

:last-of-type an element that is the first

sibling of its type

:first-of-type an element that is the last

sibling of its type

:only-of-type an element that is the only

child of that type

:empty an element that has no

children

:root root element within the

document

:not(x) an element not represented

by the argument ‘x’

:target a target element as specified

by a target in a URI

PSEUDO-ELEMENT

::first-letter Adds special style to the first

letter of a text

::first-line Adds special style to the first

line of a text

::before Inserts some content before

an element

::after Inserts some content after an

element

Cascading Style Sheets (CSS 3)

http://www.crazyfrom.com

ＣＳＳ

剩余37页未读，继续阅读

mengduanhonglou

粉丝: 20

HTML-CSS-JavaScript速查手册：提升Web开发效率

HTML、CSS、JavaScript语法速查手册

HTML/CSS/JavaScript速查手册：网页开发必备

HTML、CSS、JavaScript语法速查指南

实用HTML，CSS和JavaScript速查表

HTML，CSS，JavaScript速查表推荐

html css javascript 语法查询手册

图片格式的JavaScript和CSS速查手册

程序员速查手册 php sql xml photoshop web安全颜色 html javascript css html5 jquery dreamware

一般网页开发的书--HTML速查手册

HTML&CSS常用标签速查手册下载

最新资源