Phpchina stage 3rd: CSS Basic Technology Tutorial notes

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Phpchina 3rd: CSS Basic technology tutorial file Download: CSS Basic Technology Tutorial

CSS syntax

:

Right

Center

Left P

Left H1

Second, CSS font properties

Font Arial;

Font size 14;

style attribute Italic oblique

Font Shading Properties

Font properties

Font Color

Three, CSS common text properties:

Text Indent properties (text-indent)

Length (can be in absolute units (cm, MM, in, PT, PC) or relative units (EM, ex, PX)

Percentage (percent, equal to percentage of parent object width)

Row Height Property (line-height)

This property sets the distance between each line. The value has the following setting method:

Normal (default)

Length (can be in absolute units (cm, MM, in, pt,pc) or relative units (EM, ex, PX)

Percentage (percent, equal to percentage of parent object height)

The sample code is as follows:

P3 {line-height:1cm}

Character Spacing properties (letter-spacing)

P4 {letter-spacing:3mm}

Four, CSS background properties

Background color

Body {background-color: #ccc;}

Background picture properties (Background-image)

Body{background-image:url (. /images/css_tutorials/background.jpg)}

Five, CSS border properties

Border Style Property (Border-style)

This property is used to set the style of the top and bottom border, and its value is as follows:

None (no border, no matter how wide the border is)

Dotted (dotted border)

Dashed (broken polyline border)

Solid (straight border)

Double (two-wire border)

Groove (Groove-line border)

Ridge (Ridge-line border)

Inset (border of inline effect)

Outset (the border of a raised effect)

Border Color Properties (border-color)

. Kuang9{border-style:ridge;border-color:yellow;

Border Width Property (border-width)

This property is used to set the width of the left and right border, and its value is as follows

Medium (is the default) thin (finer than medium) thick (thicker than medium)

Fixed value with length unit. can be in absolute length units (cm, MM, in, PT, PC) or in relative length units (em, ex, PX).

. Kuang10{border-style:solid;border-width:1px;border-color: #ccc;

Unilateral border properties

. kuang11{border-style:solid border-width:1px border-top-color: #ccc; Border-bottom-color: #ccc;}

Top-left, right,bottom similar, you can use Border-top, Border-top-width, Border-top-style, Border-top-color

. kuang12 {border-top-style:solid; border-width:1px border-top-color: #ccc; Border-bottom-color: #ccc;}

Six, CSS margin properties

Left Margin Property (Margin-left)

This property is used to set the width of the left margin. Examples are as follows:

. d1{border-style:solid border-width:1px border-color: #ccc; margin-left:8cm}

This property is used to set the width of the right margin. Examples are as follows:

. d1{border-style:solid border-width:1px border-color: #ccc; margin-right:8cm}

Other top NRC similar

Margin properties (margin)

This property is a shortcut to set the margin width of a comprehensive writing, with this property can be set up and down the left and right margin properties. You can set the same width for the top and bottom margins

D3{border-style:solid border-width:1px border-color: #ccc; margin:1cm,1cm,1cm,1cm}

Vii. CSS Gap Properties

The gap attribute (padding) is the distance used to set the content of an element to the bounds of an element.

Left clearance attribute (Padding-left)

This property is used to set the width of the left gap. Examples are as follows:

. d1{padding-left:1cm}

Right clearance attribute (Padding-right)

This property is used to set the width of the right gap. Examples are as follows:

F2{border-style:solid border-width:1px border-color: #ccc; padding-right:1cm; text-align:right; Right is 1cm->.

The Gap property is similar to the top clearance property

Clearance Properties (padding)

F3{border-style:solid border-width:1px border-color: #ccc; padding:1cm,1cm,1cm,1cm}

Eight, CSS box mode (box model)

One important concept in CSS is box mode.

Hugo "A steamed bun caused by the murder" there is a circle circle casino, and this box mode applies this sentence, is a box box.

Let's take a look at the diagram below, a box surrounded by a black box.

The box is from the outside to the inside in turn:

Margin margin

Border border

Padding Gap (also known as patch)

Content (contents, such as text, pictures, etc.)

The CSS margin property (margin) is used to set the distance between the edges of an element's space and the adjacent elements.

The CSS border property (border) is used to set the edge of an element.

The CSS Gap Property (padding) is used to set the distance between the element content and the element's border.

The CSS Background property refers to the content and padding regions.

The width and height in the CSS attribute refer to the width and height of the content area.

Ix. CSS List Style properties

List Style type properties (List-style-type)

List Style type properties (List-style-type)

This property is used to set the type of the list item tag (List-item marker). Has the following values:

Disc (default, Black dot)

Circle (Hollow Dot)

Square (Small black square)

Decimal (numeric sort)

Lower-roman (lowercase roman word sort)

Upper-roman (uppercase Roman sort)

Lower-alpha (lowercase alphabetical sort)

Upper-alpha (sort capitals)

None (no list item tags)

List Style position properties (list-style-position)

The list Style position property (list-style-position) has two values:

Òoutsideó (aligned with list item contents)

Inside (with list items marked as alignment)

List Style picture properties (List-style-image)

List item tags can be represented by a picture, with a list-style Picture property (List-style-image) to set the picture. The sample code is as follows:

. G11 {List-style-image:url (Http://www.startseo.cn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif)}

List Properties (List-style)

This property is a quick and comprehensive notation for setting list styles

. g12 {list-style:circle inside URL (http://www.startseo.cn/themes/Qeeke/style/Qeeke/Novo_Dangos_001.gif)}

Ten, CSS pseudo class (Pseudo-class)

Unlike the general CSS syntax (see CSS syntax), there are two types of syntax for CSS pseudo classes.

First: selector:pseudo-class {property:value}

Shandong website optimization a:link {color:red} a:visited{color:green} A:hover{color:blue}

Example: a:link {color:red}

Second: selector.class:pseudo-class {property:value}

Jinan website optimization a.c1:link {color:red} a.c1:visited {color: #FFCC00} a.c1:hover {Color:blue}

Example: A.c1:link {color:red}

Anchor (a) pseudo class

Anchor (a) pseudo class is the most commonly used pseudo class. Examples are as follows:

a:link {color: #FF0000}/* not visited link red *

a:visited {color: #00FF00}/* has been visited Link green *

a:hover {color: #FFCC00}/* Mouse hover over the link orange *

a:active {color: #0000FF}/* Mouse point active link Blue */

You can also use the HTML class attribute to set pseudo classes. Examples are as follows:

A.c1:link {color: #FF0000}/* not visited link red *

a.c1:visited {color: #00FF00}/* has been visited Link green *

a.c1:hover {color: #FFCC00}/* Mouse hover over the link orange *

a.c1:active {color: #0000FF}/* Mouse point active link Blue */

Note: Due to the CSS priority of the relationship (higher than the previous priority), in the write a CSS, must be in accordance with A:link, a:visited, A:hover, a:actived the order of writing

File Download: CSS Basic Technology Tutorial

This article originates from June Xin navigation seo-Shandong website Optimization http://www.startseo.cn/, the original address: http://www.startseo.cn/post/Website/css-jichu-phpchina/