XHTML Day 7th: CSS Entry knowledge

Css|xhtml

CSS is the abbreviation for Cascading style sheets (cascading style sheets). is a simple mechanism for adding styles to Web documents, belonging to the layout language of the presentation layer. 1. Basic Grammatical specifications Parse a typical CSS statement: p {color: #ff0000; background: #ffffff} Where "P" we call "selector" (selectors), indicates that we want to define a style for "P"; The style declaration is written in a pair of curly braces "{}"; Color and background are called "Properties", with semicolons ";" between different attributes. Separated "#ff0000" and "#ffffff" are the values (value) of the property. 2. Color value Color values can be written in RGB values, such as: Color:rgb (255,0,0), or in hexadecimal, as in the example color: #ff0000. If the hexadecimal value is a pair of duplicates, the effect will be the same. For example: #ff0000可以写成 #f00. However, if you do not repeat, you can not abbreviate, for example, #fc1a1b must be written full six digits. 3. Define Fonts Web standards recommend the following font definition methods: Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, XXFarEastFont-Franklin, Sans-serif; Fonts are selected in the order listed. If the user's computer contains Lucida Grande fonts, the document is specified as Lucida Grande. If not, it is specified as a Verdana font, and if there is no Verdana, specify the Lucida font, and so on; Lucida Grande fonts for Mac OS X; Verdana fonts are suitable for all Windows systems; Lucida for UNIX users "Song body" suitable for Chinese simplified users; If none of the listed fonts are available, the default Sans-serif font is guaranteed to be invoked; 4. Group Selector When several element style attributes are the same, a declaration can be invoked together, separated by commas between the elements: P, TD, Li {font-size:12px;} 5. Derivation Selector You can use a derivation selector to define a style for a child element in an element, such as this: Li Strong {font-style:italic; font-weight:normal;} is to give Li the following child element strong defines an italic bold style. 6.id Selector The CSS layout is implemented primarily with the layer "div", and the div style is defined by the "ID selector". For example, we first define a layer Then define it in the stylesheet: #menubar {margin:0px;background: #fefefe; color: #666;} where "menubar" is your own definition of the ID name. Note that the "#" number is added to the front. This method is primarily used to define layers and those that are more complex and have multiple derived elements. 6. Category Selector A class selector definition is represented in a CSS with a point beginning, for example: .14px {color: #f60; font-size:14px;} In the page, call the class= "category name" method: 14px size font This method is relatively simple and flexible and can be created and deleted at any time according to page needs. 7. Define the style of the link CSS uses four pseudo classes to define the style of the links, respectively: A:link, a:visited, A:hover, and a:active, for example: a:link{font-weight:bold; text-decoration:none; color: #c00;} a:visited {font-weight:bold; text-decoration:none; color: #c30;} a:hover {font-weight:bold; text-decoration:underline; color: #f60;} a:active {font-weight:bold; text-decoration:none; color: #f90;} The preceding statements define the style "link, visited link, when mouse is stopped above, when mouse is clicked." Note that you must write in the order shown above, otherwise the display may be different from what you expected. Remember that they are in the order of "LVHA". Oh, see so much, a little dizzy bar, in fact, there are a lot of CSS syntax, here are only some of the common, after all, we are gradual, it is impossible to eat into the fat: