csshelpsheet资源-CSDN文库

需积分: 3 76 浏览量 2009-04-21 17:00:02 上传评论收藏 1.87MB PDF 举报

### CSS Help Sheet 知识点解析 #### 一、CSS简介 CSS（Cascading Style Sheets）即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 #### 二、CSS语法结构在CSS中，选择器（selector）用于匹配文档中的元素，而声明（declaration）则定义了被选择的元素应该呈现的样式。 - **外部样式表 (External StyleSheet)**： ```html <link rel="stylesheet" type="text/css" href="style.css" /> ``` - **描述**：通过`<link>`标签将外部的CSS文件链接到HTML文档中。 - **用途**：适用于多个页面共享相同的样式规则，有利于代码的重用与维护。 - **内部样式 (Internal Style)**： ```html <style type="text/css"> selector { property: value } </style> ``` - **描述**：在HTML文档的`<head>`部分内嵌入CSS代码。 - **用途**：适用于只在当前页面使用的样式规则。 - **内联样式 (Inline Style)**： ```html <tag style="property: value"> ``` - **描述**：直接在HTML元素标签内定义样式属性。 - **用途**：适用于单个元素临时修改样式的情况，但不推荐大量使用，以免造成代码混乱。 - **CSS声明的通用格式**： ```css selector { property: value; } ``` #### 三、CSS选择器 - **类选择器 (Class Selector)** - **格式**：`.classname` - **描述**：选择所有包含指定类名的元素。 - **用途**：可以为一组具有相同类名的元素定义统一的样式。 - **ID选择器 (ID Selector)** - **格式**：`#idname` - **描述**：选择具有特定ID的元素。 - **用途**：ID是唯一的，通常用于需要针对特定元素定义特殊样式的场景。 - **元素选择器 (Element Selector)** - **格式**：`elementname` - **描述**：选择所有指定类型的元素。 - **用途**：如`div`和`span`分别用于格式化结构块文本和行内格式化。 #### 四、CSS属性详解 - **颜色与字体 (Color & Font)** - `color`: 定义文字的颜色。 - `font-style`: 定义字体风格（斜体或正常）。 - `font-size`: 定义字体大小。 - `font-family`: 指定使用的字体。 - `font-weight`: 设置字体粗细。 - **文本格式化 (Text Formatting)** - `letter-spacing`: 字母之间的间距。 - `line-height`: 行高。 - `text-align`: 文本对齐方式。 - `text-decoration`: 文本装饰效果。 - `text-transform`: 文本转换（大写、小写等）。 - **盒模型 (Box Model)** - `width`: 元素的宽度。 - `height`: 元素的高度。 - `padding`: 内边距。 - `margin`: 外边距。 - `border`: 边框。 - **定位与布局 (Positioning and Layout)** - `clear`: 规定元素周围的浮动元素。 - `float`: 规定元素应向左还是向右浮动。 - `position`: 定位模式。 - `left`/`top`: 定位元素的位置偏移量。 #### 五、CSS媒体类型 - `all`: 所有设备。 - `print`: 打印机。 - `screen`: 显示屏。 - `handheld`: 手持设备（如手机）。 - `projection`: 投影仪。 - `speech`: 文本转语音。 - `braille`: 盲文触摸反馈。 - `tty`: 传统终端。 - `tv`: 电视。 #### 六、单位与伪类 - **单位** - `%`: 百分比单位。 - `em`: 相对于父元素的字体大小。 - `pt`: 点单位。 - `px`: 像素单位。 - **伪类** - `:hover`: 鼠标悬停状态。 - `:active`: 鼠标按下状态。 - `:focus`: 获取焦点状态。 - `:link`: 未访问过的链接。 - `:visited`: 已访问过的链接。 - `:first-line`: 元素的第一行。 - `:first-letter`: 元素的第一个字母。以上内容为CSS帮助手册中涉及的基础知识点，了解并掌握这些内容可以帮助设计人员更高效地完成网页设计工作。

资源详情

资源评论

资源推荐

CSS Help Sheet

GoSquared

Download this Help Sheet now at gosquared.com/liquidicity or put it on your wall

Syntax

External Style Sheet

Internal Style

Inline Style

selector {property: value;}

href=”style.css” />

selector {property: value}

</style>

This Needs a Diagram Shorthand

Comments

Border

height; width;

margin-top;

margin-right;

margin-bottom;

margin-left;

padding-top;

padding-right;

padding-bottom;

padding-left;

background

border

border-bottom

border-left

border-right

border-top

font

list-style

margin

padding

/* Comments */

Media Types

all

braille

embossed

handheld

projection

screen

speech

tty

Units

Length

Keywords

bolder

lighter

larger

Pseudo

Selectors

:hover

:active

:focus

:link

:visited

:rst-line

:rst-letter

General

class

String preceded by a full stop [.]

String preceded by a hash [#]

div

Formats structure or block of text

span

Inline formatting

color

Foreground colour

cursor

Appearance of the cursor

overow

How to handle content that

overows its box.

visible, hidden, scroll, auto

visibility

visible, hidden

display

block; inline; list-item; none

Font

font-style

italic, normal

font-size

Size of the font

font-family

Specic font[s] to be used.

font-

variant

normal, small-caps

font-

weight

bold, normal, lighter, bolder,

integer [100-900]

Tex t

letter-spacing

Space between letters

line-height

Vertical space between baselines

text-align

Horizontal alignment

text-

decoration

blink, line-through, none,

overline, underline

text-indent

First line indentation

text-

transform

capitalise, lowercase, uppercase

vertical-align

Vertical alignment

word-spacing

Spacing between words

width

height

paddingmargin

border

border-width

Width of the border

border-color

Colour of the border

border-style

dashed; dotted; double; groove; inset;

outset; ridge; solid; none;

Position

clear

If any oating elements around the element

both, left, right, none

oat

Floats to a specied side

left, right, none

left

The left position of an element

auto, length values [pt, in, cm, px]

top

The top position of an element

auto, length values [pt, in, cm, px]

z-index

Above or below overlapping elements

auto, integer [higher numbers on top]

position

static, relative, absolute

Background

background-color

Colour of background

background-image

Background image

background-repeat

repeat, no-repeat, repeat-x, repeat-y

background-

position

(x y), top, center, bottom, left, right

background-

attachment

Background image scrolls with element

scroll, xed

List

list-style-

type

Type of bullet or numbering in the list

disc; circle; square; decimal; lower-roman;

upper-roman; lower-alpha; upper-alpha; none

list-style-

position

Position of the bullet or number in a list

inside; outside

list-style-

image

Image to be used as the bullet in the list

Please note that

developing CSS

to work with IE6

is a lost cause.

Spread the word:

encourage your

users to give up on

IE 6

(unchanged since 2001.)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论收藏

内容反馈

kinka

粉丝: 1
资源: 2

css help sheet

评论0

最新资源

css help sheet

评论0

stylecssvaribles1.css

Beginning HTML5 and CSS3 For Dummies

Less Web Development Cookbook

PhoneGap.3.Beginners.Guide.3rd.Edition.1784392286

Dreamweaver CS4 黄金插件10-02

Dreamweaver CS4 黄金插件10-05

Dreamweaver CS4 黄金插件10-1

Dreamweaver CS4 黄金插件10-03

Dreamweaver CS4 黄金插件10-04

Dreamweaver CS4 黄金插件10-08

Dreamweaver CS4 黄金插件10-06

Dreamweaver CS4 黄金插件10-07

Dreamweaver8_getting_started

2024前端面试八股文

99套数据可视化大屏（含源码

html+css实现京东商城

HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计.zip

mrcrowl.easy-less-1.7.3

旅游网站前端页面（css，html）

html css网页制作成品

用vue写的可视化大屏

javascript网页设计期末作业 购物网站

小兔鲜项目源码（动态网页，包含首页、注册页、登录页、购物页）原生HTML、CSS、Javascript

web前端登陆注册界面（html+css+js）

大学生网页设计大作业-5个网页设计制作作品自己任选

HTML+CSS 仿原神官网源码

使用pyLDAvis的实例结果，及d3.min.js，ldavis.v1.0.0.css，ldavis.v1.0.0.js

html+css+javascript+jquery静态商城模板包括首页登录注册个人中心购物车结算支付页面

最新资源

HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计.zip

javascript网页设计期末作业购物网站