Common CSS properties

CSS Common Attributes

☛ Regarding CSS attributes, I personally recommend that you check the manual for more details and convenience. I will classify several common attributes here and simply take a few common attribute values. This is just for new front-end learning like me. People use it as an introduction.

1. Font style

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

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

#♣Small uppercase letter t (font-varian): normal normal || Small uppercase letter font small-caps

♣Font weight (font-weight): normal normal || Commonly used thick Body bold || Extra bold bolder || Fine body lighter || Express directly with numbers (value 100-900)

♣Font size (font-size): Here are only a few root units that can be used Represents (px, em, rem)

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

♣Font family (font-family): Specify 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;}

/*Comments*/: 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 titled system controls (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 font of the message dialog Text font (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: the position of the list symbol

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

♥inside (list indented, separated from symbols)

▶list-style-type: Symbol type (here are several commonly used ones, if you need Japanese flat, holiday, Katakake, etc. Check the manual)

♥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 tiled) || repeat-x (horizontal tile) || repeat-y (vertical tile)

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 (%)

♠The size of the background 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- The box background starts from behind the border (default)||border-box background image starts from the border||content-box background starts from the 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 If there is only one side, you can choose which direction: {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 (lined dotted line, commonly used)

solid (solid line, commonly used) || double (double solid line) || groove (light solid line) || ridge (dark and light solid line) || inset (solid line with deep left upper left and light lower right) || outset( A solid line that is lighter on the upper left and darker on the lower right)

♜The width of the border line border-width, the value is a 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.

For more articles related to common CSS properties, please pay attention to the PHP Chinese website!