Detailed explanation of some commonly used properties of CSS

Commonly used CSS properties

☛ Regarding CSS properties, I suggest you check the manual for more details and convenience. I will classify several common properties here and simply select a few. Commonly used attribute values ​​are only for beginners like me who are just learning front-end.

1. Font style

is the abbreviation of font, written as font:font-style|| font-variant ||font-weight||font- size||/ line-height||font-family, be sure to write

in order. Font italic (font-style): normal normal || commonly used italic italic || no italic variable The special font oblique

♣small caps t (font-varian): normal || small caps font small-caps

♣font-weight: Normal normal || Commonly used bold bold || Extra bold bolder || Lighter || Express directly with numbers (value 100-900)

♣Font size (font-size): Here we only introduce what can be Use several root units to express (px, em, rem)

♣The line-height of the font: you can use the length px|| percentage (based on the height size of the font)|| use the numerical value ( Product factor) specifies the line height

♣Font family (font-family): Specifies the text to use a certain font or font sequence. The value is enclosed in single quotes. The default is Song Dynasty.

demo: body{font-family:helvetica,verdana,sans-serif;}

/*Notes*/: Arrange in order of priority. Separate with commas. As shown in the font definition above, assuming you do not have the Helvetica font on your computer, but you have Verdana, your text will be displayed in Verdana.

❤@font-face embedded font (extracurricular extension)

@font-face can load the font file on the server side, so that the browser can display the font file that is not in the user’s computer Installed fonts.

Syntax:

@font-face {

font-family: Custom font name;

src: url(font file on the server Relative or absolute path) format (font type);

}

Example:

@font-face {/*This writing method is compatible with all browsers*/

font-family : bgg;

src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */

url('fonts/fontawesome- webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/fontawesome-webfont.woff') format('woff'), / * chrome, firefox */

url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */

}

p{ font-family: bgg }

★Other less commonly used styles of fonts:

♣caption: Use text fonts for system controls with titles (such as buttons, menus, etc.) (CSS2)

♣icon: Use the font of the icon label (CSS2)

♣menu: Use the font of the menu (CSS2)

♣message-box: Use the text font of the message dialog box (CSS2)

♣small-caption: Use the font of the small control (CSS2)

♣status-bar: Use the font of the window status bar (CSS2)

2. Text style

♦Text color color

●Color name The 16 basic colors are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive,purple,red,silver,tealwhite,and yellow.

●Hexadecimal (hex) color control (6 digits), its format is #336699. Supports shortcut counting methods for certain hex values. For example, #336699 could be called #369.

●RGB value The value of RGB ranges from 0 to 255, R represents red, G represents green, and B represents blue. demo: { color: rgb(51,204,0) }

♦Text-indent, the value is the value in em, 1em is equal to the width of one word.

♦Text Horizontal alignment text-align: left (left alignment) || center (center alignment) || right (right alignment) || justify (justify both ends)

♦ Text vertical alignment vertical-align: sub (vertical subscript for aligned text) || super (superscript for vertically aligned text) || There are other manuals

♦letter-spacing, the value is normal and the value in px.

♦Text wrap word-wrap: normal (allow content to open or overflow) || break-word (content will wrap within boundaries. Line breaks are allowed within words if necessary)

♦Underline control text-decoration: none (no underline, default), underline (underline), blink, overline (overline), line-through (strikeout)

♦The case of the text text-transform: the first letter capitalize || Convert to uppercase || Convert to lowercase

3. List style list-style

##▶list-style- image:url(/dot.gif); Picture-style symbol, select the image as the guide symbol for the list item

▶list-style-position: List symbol position

♥outside (default value, The list is close to the symbol)

♥inside (the list is indented and separated from the symbol)

▶list-style-type: symbol type (here are several commonly used ones, if you need Japanese plain You can check the manual for fake films)

♥None (none) ♥Arabic numerals (decimal) ♥Solid circle (disc) ♥Hollow circle (circle) ♥Solid square (square)

♥Lowercase English letters (lower-alpha) ♥Uppercase English letters (upper-alpha) ♥Lowercase Roman numerals (lower-roman) ♥Uppercase Roman numerals (upper-roman)

4. Background style background

The abbreviation of background style is {background-color||background-image||background-repeat||background-attachment||background-position;}

background : Background color, background image, background tiling method, background positioning should be in order. Example background:#F00 url(header_bg.gif) no-repeat fixed left top;

♠Background color

♠ Perspective background background:transparent;

♠Background image backgroung-image:url(picture file path);

♠Background tiling method background-repeat:repeat(all tiled, default)| | no-repeat (not tiling) || repeat-x (horizontal tiling) || repeat-y (vertical tiling)

round (the background image automatically scales until it fits and fills the entire container) || space (the background image is tiled with the same spacing and fills the entire container or a certain direction)

♠Background image scrolling background-attachment: scroll Default value. The background image moves as the rest of the page scrolls.

fixed Background image does not move when the rest of the page scrolls. ||inherit specifies that the setting of the background-attachment property should be inherited from the parent element.

♠Background positioning background-position: Left and right alignment (left||center||) Top and bottom alignment (top||bottom);

You can also write the alignment as a numerical value (or percentage %): Left value (%) Top value (%)

♠Background size background-size

background-size: auto; Automatically, the default is the image size

background-size: px or percentage. If only one value is set, the second value will be set to "auto".

background-size: cover; Scale the background image proportionally to completely cover the container. The background image may exceed the container.

background-size: contain; Expands the image to its maximum size so that its width and height fully fit within the content area. But not exceeding the container

background-size: 100px 100%; Change the width and height ratio

♠The starting position of the background background-origin

Writing {background-origin:padding- box background starts from behind the border (default)||border-box background image starts from border||content-box background starts from content}

5.Border style border

Abbreviation of border line: {border:border-width border-style border-color;}

demo: The four borders are the same: {border:1px solid #00F};

If you want a separate side, choose which direction you want: {border-[left||right||top||bottom]:border-width border-style border-color;}

♜Border line style border-style: none (no border line, default) || hidden (hidden border line) || dotted (dotted line) || dashed (line dotted line, commonly used)

solid(solid line, commonly used)|| double(double solid line)|| groove(light solid line)|| ridge(dark and light solid line)|| Line)|| outset (solid line with light upper left and deep right lower)

♜The width of the border line border-width, the value is a numerical value in px.

♜The color of the border line border-color, the value is the English word of the color or the hexadecimal color.

♜inherit: Specifies that the setting of the border attribute should be inherited from the parent element.

The above is the detailed content of Detailed explanation of some commonly used properties of CSS. For more information, please follow other related articles on the PHP Chinese website!