Summary of CSS DIV usage_html/css_WEB-ITnose

(original link:)

CCS = Cascading Style Sheets

Inline style sheet (not recommended):

Internal style sheet (not recommended):

p{color:#F00;}

……

External style sheet (usually under the title of the head):

CSS Writing structure:

{

; : ;

… …

}

For example:

p {

color: #F00;

font-size: 12px;

}

Basic type selector:

Tag selector: written inside tag, such as: p{}. Select all contents of this label. Support custom labels.

Class selector: starting with ".", such as: .30font{}, means selecting all elements with class "30font".

id selector: starts with "#".

Composite type selector:

Pseudo-class selector: separated by ":", For example, "a:link", "a:hover", "a:active" (mouse pressed), "a:visited" for ; or ".myClass:hover"

Group selector: separated by ",", select several elements at the same time, such as: "a, p, h3"

tag specifies the selector: such as p.aa means p with class="aa" Tag, p#aa represents the p tag with id="aa"

contains selectors: separated by spaces, indicating B inside A, such as "#top a" indicating < inside id="top" ;a> tag

sibling adjacent selectors: separated by " ", such as "h1 p" means

tag

attribute selector adjacent to

: Separated by "[]", such as "p[align]" means

tags with align attribute

Wildcard selector: "*", means selecting all elements

Font and text properties:

font-family: font name

font-size: font Size needs to be in unit px

font-weight: bold. bold, bolder, lighter, 100, 200, ... 900 (meaning 100, 200...)

font-style: font style. normal, italic, oblique (also italic, only valid for some special fonts)

font-variant: Convert English letters to uppercase. normal: normal font, small-caps: small uppercase font

line-hight: line height

text-transform: capitalize: capitalize the first letter, uppercase: all capitals, lowercase: All lowercase, none: unchanged

text-decoration: text decoration. underline, overline, line-through, blink, none, there can be multiple, separated by spaces

color: color

text-indet: first line indent (requires unit)

text-align: text alignment, left, right, center, justify (justify both ends)

letter-spacing: word spacing (requires unit px)

Background attributes:

background-color: background color

background-image: background image (takes precedence over background color) )

background-repeat: Whether to tile the background image. repeat (default), no-repeat, repeat-x, repeat-y (horizontal and vertical tiles)

background-attachment: whether to follow the scroll bar movement. fixed: do not move, scroll: move (default)

background-position: background positioning, the relative displacement of the origin coordinates (x, y) of the upper left corner of the background image, or right, left, top, bottom, center

Background attributes can be written together. List the attribute values ​​and separate them with spaces, such as:

body{

background: #F00 url(images/bg.jpg) no- repeat fixed 50px 100px;

}

背景平铺：repeat-x 或 repeat-y，把图片按x轴或y轴（横向或竖向）平铺

优先级排序：默认

框模型（或盒模型）：

内联对象，按行显示：display:inline，由line-hight决定行高。如

, 等

块对象，按块显示：display:block，由width和height决定宽和高，默认占一行。如

内联对象转换为块对象后，就可以使用width和height属性了：a{display:block; width=10px; height:20px;}

padding：内填充（分top, bottom, left, right）

margin：外边距（分top, bottom, left, right）

border：边框（分top, bottom, left, right）

width：内容的宽度

height：内容的高度

注：当两个元素上下排列时，他们间的margin会自动合并（都不是float或绝对定位的情况下）

border的属性（分top, bottom, left, right）：

style：线条样式（dotted, solid, double, 等）

width：粗细（单位px）

color：颜色

可以缩写：border: solid 1px #FFF;

单独设置一条边：

border-bottom: solid 2px #00F;

border-bottom-width: 2px;

（注：后面会覆盖前面的）

margin和padding的设置:

margin: 1px （上下左右）

margin: 1px 2px 3px 4px; （上 右 下 左）

margin: 1px 2px; （上下 左右）

margin: 1px 2px 3px; （上 左右 下）

（注：padding的设置方法跟margin一样）

浮动（float）：

浮动到普通流的上一层

float: left，浮动后向左，直到左边碰到边界或碰到同一层元素的右边界

float: right，浮动后向右，直到右边碰到边界或碰到同一层元素的左边界

清理（clear）：

使浮动层继续在普通流保留占位

clear: both, left, right，应用于普通流，使普通流根据上一层的占位情况来决定自己的位置

一般可以在浮动层和普通流直接加一个clear div来分隔排版，如：

.clear{clear:both;}

Center the block horizontally:

1. margin left and right: auto (eg: margin:0px auto;)
2. The block must have a specific width value (width)

Note: The body has a margin of 8px by default. Cancel method: body{margin:0px;}

Center the block vertically (less commonly used):

1. width:500px; height:200px; position: absolute; top:50%; left:50%; margin-top:-100px; margin-left:-250px;

Center text within the block:

1. Center horizontally: text- align: center
2. Vertically centered: line height = box height, such as: height:200px; line-height:200px (one line fills the entire div)

ul list:

There is padding and margin by default. Cancel method: ul{padding:0px; margin:0px;}

list-style: List style (none, )

list-style-image:url(images/a.jpg);

Horizontal: li{float:left}

Set the dividing line: li{ background:url(images/1.png) no-repeat bottom center;}

Positioning (via position attribute):

static: Default positioning method, displayed by row or block.

relative: relative positioning, the element is offset by a certain distance (use top, right, bottom, left to position relative to the original position, the original space occupied will not be released)

absolute: element Removed completely from the document flow (similar to float) and positioned relative to its parent box (using top, right, bottom, left positioning). For example: #aaa{position:absolute; top:100px; left:50px;}

fixed: similar to absolute, except that the positioning is at a distance from the browser window. (Can be used to make floating ads)

Note: If they overlap, you can use the z-index attribute to determine who is on top, and the one with the larger value is on top.

Size:

Fixed value: such as width: 100px;

missing Default value: leave it blank

Percent: the percentage of the parent box, such as width: 80%;

min-height, min-width: the minimum height and width of the element

max-height, max-width: the maximum height and width of the element

Handling when content exceeds the parent box:

overflow:hidden: The exceeded content is cut

overflow:scroll: The scroll bar is always displayed

overflow:auto: When the content is cut, Show scroll bars (the default value for body and textarea is auto)

overflow-x:hidden: Disable horizontal scroll bars

overflow-y:scroll: Always display vertical scroll bars

Note: If the parent box does not set height, the parent box will be raised until it reaches max-height.

Browser scroll bar settings:

For example: html{

scrollbar-base-color:# F00;

}

Note: It seems to be only valid for IE.

Photoshop cutting process:

1. Use guides
2. Use the slice tool
3. Cancel the background and make the image transparent
4. Save as web format...
5. Save: slice : All user slices
6. Save
7. Rename

Original article, please indicate the reprint from Clement-Xu’s csdn blog. )