CSS Basic Learning 12: CSS Styles

CSS styles include: CSS backgrounds, css text, CSS fonts, CSS lists, CSS tables, CSS outlines and other styles. We're going to use it right now.

A simple introduction to CSS styles.

Here are just a few things to summarize, specific reference: CSS style tutorial

(1) Background colorBackground-colorSet Background colorPossible values:color name: such as Red,yellow,bluehexadecimal color values: such as #ffffffRGB color values: such as RGB (255,255,255 (16 in FF))Transparent: Default, background color transparentinherit: Inherits the background color of the parent element(2) Background imageBackground-imageset a background picturevalue: url (picture directory)background-repeatsets whether the background picture repeatsvalues:repeat horizontal and vertical repeat (default)repeat-x Transverse Repetitionrepeat-y longitudinal repetitionno-repeat not repeat(3) background-positionset the location of the background picturevalues:some key words top,left,right,bottom,centerpercentage: x y%pixel value: xpx,ypxNote: nurturance habit, two values, one for horizontal direction, one for vertical direction. (4) Font ColorColorSet Font ColorPossible values:color name: such as Red,yellow,bluehexadecimal color values: such as #ffffffRGB color values: such as RGB (255,255,255 (16 in FF))inherit: Inherits the background color of the parent element(5) Text indenttext-indentsets the indentation of text, noting that multiple lines of content are indented only in the first linepossible values: pixelsxpx pixels |percent of x based on the width of the parent elementInhertit inherits the text indent property of the parent element(6) Text alignmenttext-alignto set the alignment of text, note based on block-level elementsPossible values:left aligns the text to the leftright align the text to the rightCenter text centeredand the difference between the center:The effect is the same for textfor non-text, center can still center content(7) Font sizefont-sizeset font size for textPossible values:xpx Text size is xpxxem Text size is Xem(8) PX and em explanationspx: Pixel, a point on the computerem: Relative size, 1em,1 times the size of the current font size, 2em,2 times the size of the current font size. If the font size is 16px, then 1.75em equals 28 pixels. when setting the font size, Xem is set to x times the font size of the parent element. (9) Fontfont-familyset what type of font to usePossible values:font names such as Times,georgia,serif, etc.Rules:you can define multiple fonts, separated by commas, first using the preceding font, when the previous font is not, using the next one, and so on. (10) Font styleFont-styleset text to normal or italicPossible values:Normal text is displayed normallyitalic text skew displayOblique text skew display settings(11) Font BoldFont-weightSet text BoldPossible values:normal character, defaultBold Bold charactersbolder more coarse charactersLighter Finer characters100-900 Full-value, 400 equivalent to normal,700 equivalent to BOLD20(12) Letter spacingletter-spacingset the spacing between letters by default of 0Possible values:xpx The spacing between letters is XPXXem The spacing between letters is Xem(13) Word spacingword-spacingset the spacing between words (words)Possible values:the spacing between xpx words is Xpxthe spacing between xem words is Xem(14) Character ConversionText-transformSet Letter CasePossible values:None to do any processinguppercase all uppercase displaylowercase all lowercase displayscapitalize word first letter capitalization(15) Text decorationtext-decorationset the text decoration effectPossible values:None for no treatmentunderline text Add underlineoverline Text Add an underscoreLine-through text in the middle to add a penetrating lineBink text flashing, not recommended(16) The difference between letter spacing and word spacing in ChineseThe application in ChineseThere is no concept of sub-mother and word in Chinesein foreigners ' opinion, each Chinese character is equivalent to letterSo, for Chinese, we generally use letter-spacingeach Chinese character is equivalent to one letter in English, so it works with the letter-spacing effect, and word-spacing does not work on Chinese characters .(17) Types of flags for listsList-style-typeset the type of the list item flagCommon values:None No flagDisc Solid Circle flagCircle Hollow Circle FlagSquare solid Block flagdecimal number sign, natural number starting from 1Lower-roman lowercase roman numeralsUpper-roman Capital Roman numeralsLower-alpha Small LetterUpper-alpha Capital Letters(18) Table borderBoeder property setting table Borderthe Border-collapse property sets the table border to collapse to a single border:the width and Height properties define the widths and heights of the table. The text-align and Vertical-align properties set the alignment of the text in the table. The Text-align property sets the horizontal alignment, such as left-aligned, right-aligned, or centered:The vertical-align property sets vertical alignment, such as top, bottom, or center alignment:the Padding property controls the distance between the content and the border in the tableborder-spacing sets the distance separating the border of the cell. caption-side Sets the position of the table header. Empty-cells sets whether to display empty cells in the table. table-layout sets the algorithm for displaying cells, rows, and columns. (19) Contoura outline is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as a prominent element. Outline Set all profile properties in a declarationOutline-color Setting the color of outlinesOutline-style Setting the style of an outlineoutline-width Setting the width of the contourlet's take a concrete look at the effects of these CSS styles:

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">the results of Firefox running are:













 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
CSS Basic Learning 12: CSS Styles