Shulou(Shulou.com)06/03 Report--

This article mainly introduces what the common properties of CSS cascading style sheets are, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

Common attribute

1 Color attribut

The color property defines the color of the text

Color:green

Color:#ff6600

Color:#f60 (abbreviated)

Color:rgb (255255255) Red (R). Green (G). The range of values for each blue (B) is 0-255.

Color:rgba (255, 255, 255, 255, and 1) RGBA stands for Red (red). Green (green). Blue (blue) and Alpha (color space) transparency

2 Font Properties

2.1 font-size font size

Font-size:14px

2.2 font-family defines fonts

Font-family: Microsoft Yahei, serif

Can be separated by "," to ensure that the next one is used directly when the font does not exist

2.3 font-weight font bold

Normal (default). Bold (coarse). Bolder (thicker). Lighter (thinner)

100.200.300-900400=normal, while 700=bold

3 background attributes

3.1 background color background-color

3.2 background picture background-p_w_picpath

Background-p_w_picpath:url (Picture path)

Background-p_w_picpath:none

3.3 background repeat background-repeat

Repeat repeated flattening

Repeat-x repeats to the X axis

Repeat-y repeats to the Y axis

No-repeat does not repeat

3.4 background location background-position

Horizontal (left,center,right)

Vertical (top,center,bottom)

3.5 shorthand mode

Background: background color url (image) repeat position

Background:#f60 url (p_w_picpaths/bg.jpg) no-repeat top center

4 text attributes

4.1 text-align horizontally arranges left,center,right

4.2 line-height text line height

%% line height based on font size

Numeric value to set a fixed value

4.3 text-indent first line indent

4.4 letter-spacing character spacing

Normal default

Length sets specific values (negative values can be set)

Inherit inheritance

5 Border Properties

5.1 Border style border-style

5.1.1 uniform style (abbreviated style) border-style

5.1.2 define the border style in a certain direction separately

Border-bottom-style bottom border styl

Border-top-style Top Border Styl

Border-left-style left border style

Border-right-style right border style

5.1.3 property values of border style style

None has no border

Solid straight line border

Dashed dashed border

Dotted dot line border

Double double line border

Groove bump frame

The ridge ridge border relies on the attribute value of border-color.

Inset inset border

Outset outset border

Inherit inheritance

5.2 Border width border-width

5.2.1 uniform style border-width

5.2.2 individual style

Width of the top border of border-top-width

Width of the bottom border of border-bottom-width

Width of left border of border-left-width

Width of the right border of border-right-width

5.2.3 property value of border width

Thin thin border

Medium medium Border

Thick thick border

The border of a fixed value of px

Inherit inheritance

5.3 Border Color border-color

5.3.1 uniform style border-color

5.3.2 individual style

Border-top-color top border color

Border-bottom-color bottom border color

Border-left-color left border color

Border-right-color right border color

5.3.3 attribute value

The name of the color value red.green

RGB rgb (255.255.0)

RGBA rgba (255.255.0.0.1)

Hexadecimal # ff0.#ff0000

Inherit inherit

5.3.4 four cases of attribute value

One value: border-color: (above. Down. Left。 Right)

Two values: border-color: (up and down) (left and right)

Three values: border-color: (top) (left and right) (bottom)

Four values: border-color: (top) (right) (bottom) (left)

5.3.5 shorthand border:solid 2px # f60

6 list Properties

6.1Type of tag list-style-tyle

None untagged

By default in disc, the tag is a solid circle

The circle tag is a hollow circle

The square tag is a solid square

The decimal tag is a number

Numeric marks beginning with decimal-leading-zero 0 (01jinjin02j03, etc.)

Lower-roman lowercase Roman numerals (iQuery iReagement iijjjjjjjjrejjjjjjffjrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrnrrrrrrrrrrrrrrrrrrrrrrr.ijjjjjjjjjjjjjjjjrrrrrfffffffwrrrr

Upper-roman uppercase Roman numerals (Imam III pint III Jet IV V, etc.)

Lower-alpha lowercase letter The marker is lower-alpha (arecrum brecom cdpene, etc.)

Upper-alpha Capital letter The marker is upper-alpha (Amab Bpeng C Djue E, etc.)

Lower-greek small Greek letter (alpha,beta,gamma, etc.)

Lower-latin lowercase Latin alphabet (a _ r _ b _ r _ c _ d _ e, etc.)

Upper-latin capital Latin letters (A, B, C, D, E, etc.)

Hebrew traditional Hebrew numbering

The traditional Armenian numbering of armenian

Georgian traditional Georgia numbering (an,ban,gan, etc.)

Cik-ideographic simple ideographic numbers

The hiragana tags are: a _ (Japanese katakana)

The katakana markers are: a _ Magi _ I _ I _ A _ A _ I _ I, et al. (Japanese katakana)

The hiragana-iroha tags are: iPerferent roppery, harecrum, nijorum, hojorhejito, etc. (Japanese katakana)

The katakana-iroha tags are: iMageRo, Ha, Ni, Ho, HE, to, and so on. (Japanese katakana)

6.2Placement of markers list-style-position

The inside list item tag is placed within the text, and the surrounding text is aligned according to the tag

The outside default value, which keeps the tag on the left side of the text, the list item outside the text, and the surrounding text not aligned according to the tag

Inherit specifies that the value of the list-style-position attribute should be inherited from the parent element

6.3 set the image list tag list-style-p_w_picpath

The path of the URL ima

By default in none, no graphics are displayed

Inherit specifies that the value of the list-style-p_w_picpath attribute should be inherited from the parent element

6.4 abbreviated mode list-style

List-style:square inside url ('/ iAcrow.jpg')

Thank you for reading this article carefully. I hope the article "what are the common properties of CSS cascading stylesheets" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.