CSS study notes
CSS is an abbreviation for Cascading Style Sheets. It is a simple mechanism for adding styles to web documents, which belongs to the layout language of the performance layer. 1, CSS basic rules
Call style sheet
Basic syntax specification analysis A typical CSS statement:
P {color: # ff0000; Background: #ffffff} in "P" We call "selectors", indicating that we want to define style to "P"; Style declaration writes in a pair of braces "{}"; Color and Background are called "property" and different attributes with semicolons ";" separated; "#f0000" and "#fffff" are attributes Value. Color value color values can be written with RGB values, such as: color: RGB (255, 0, 0), can also be written with hexadecimal, like the above example color: # ff0000. If the hexadecimal value is a repetitive, the effect is the same. For example: #f0000 can write to # f00. But if you don't repeat, you should not be short-written, for example # fc1a1b must write over six. Defining font Web standards recommend the following font definition method:
Body {Font-Family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song, Sans-Serif;} The font is selected in the order listed. If the user's computer contains the Lucida Grande font, the document will be specified as Lucida Grande. No, it is specified as a Verdana font. If there is no Verdana, it is specified as a Lucida font, and the Lucida Grande font is suitable for Mac OS X; Verdana font is suitable for all Windows systems; Lucida is suitable for UNIX users; "Song" is suitable Chinese Simplified users; if the fonts listed cannot be used, the default SANS-Serif font ensures call; the group selector When several element style properties, you can call a statement, and the elements are separated by commas: P, TD, Li {Font-Size: 12px;} Derife Selector Defines the Sub Elements in Elements Use the derived selector, for example: li strong {font-style: italic; font-weight: Normal;} It is the subsidence of the subsidence from the child. Strong is defined for the subsidence of the LI. The ID selector uses the CSS layout mainly with the layer "div" to implement, while the DIV style is defined by the "ID selector". For example, we first define a layer
Then define this in the style sheet:
#menubar {margin: 0px; Background: #fefefe; color: # 666;}
Where "MenuBar" is the name of the ID you define your own. Pay attention to the "#" number in front.
The ID selector also supports derivation, for example: #menubar p {text-align: right; margin-top: 10px;}
This method is mainly used to define layers and those that are more complex and have multiple derived elements.
Category Psef In CSS, in CSS, the category selector is defined, for example:
.14px {color: # f60; font-size: 14px;}
In the page, use the class = "category name" method to call:
14px size font
This method is relatively simple and flexible, and you can make new and delete according to the page at any time.
Define the style of the link to define the style of the link in four pseudo classes, namely: A: Link, A: Visited, A: Hover, and A: Active, for example:
A: Link {font-weight: bold; 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 above statement defines the style of "link, accessed link, when the mouse is above, point the mouse down". Note that you must write in the above order, otherwise it may be different from you to do. Remember their order is "lvha". The biggest difference between the CSS layout and the traditional table (Table) layout is that the original positioning is a table, through the spacing of the table, or the spacing of the layout block with colorless transparent GIF images; and now use the layer (DIV) To locate, through the layers of Margin, Padding, Border, etc. to control the spacing of the block.
2. Define a typical definition DIV example:
#Sample {margin: 10px 10px 10px 10px; Padding: 20px 10px 10px 20px; border-right: #ccc 2px solid; border-bottom: #ccc 2px solid; border-left: #ccc 2px solid; border-top: #ccc 2PX Solid; Background: URL (images / bg_poem.jpg) #Fefefefe no-repeat right bottom; color: # 666; text-align: center; line-height: 150%; Width: 60%;
The following: The name of the layer is SAMPLE, and this style can be called in the page in the page. Margin refers to the blank left by the border of layers, which is used for a pages or a spacing with other layers. "10px 10px 10px 10px" represents four margins represent "upper left" (clockwise), if all, can be abbreviated as "margin: 10px;". If the margins are zero, they must be written into "margin: 0px;". Note: When the value is zero, in addition to the RGB color value must be with a percent sign, other cases may not be "PX" in units. Margin is a transparent element that cannot be defined. Padding is a blank between the layer of the layer to the layer. Like margin, specify the distance between the upper right left box to the content. If all, you can abbreviate "padding: 0px". The left side can be written separately as "padding-left: 0px;". Padding is a transparent element that cannot be defined. Border refers to the border of the layer, "Border-Right: #ccc 2px solid;" is the right side of the definition layer to "#CCC", the width is "2px", the style is "solid" straight line. If you want a dotted pattern, you can use "dotted". Background is the background of the definition layer. Level 2 definition, first define the image background, use "URL (../ images / bg_logo.gif)" to specify background image path; secondly define the background color "#fefefe". "No-repeat" means that the background image does not need to be repeated, and if you need to repeat "Repeat-X" horizontally, repeat "repeat-y", repeat the entire background with "repeat". The "right bottom;" refers to the background image starts from the lower right corner. If there is no background picture, you can define the background color background: #fefefe color is used to define the font color, and the previous section has been introduced. Text-align is used to define the content arrangement in the layer, CENTER, Left is left, Right is right. Line-height defines a high line, 150% refers to 150% of the height of standard height, or Writing: line-height: 1.5 or line-height: 1.5em, is the same meaning. Width is the width of the definition layer, which can be used, such as 500px, or percentage, "60%" here. It should be noted that this width refers to the width of your content, does not include Margin, Border, and Padding. But in some browsers are not as defined, try more. Below is the actual performance of this layer: We can see the border is 2px gray, the background picture is not repeated in the lower right, the content is on the left and the left box 20px, the content is among, everything is the same. Hoho, although it is not good, it is the most basic, mastering it, you have learned half of the CSS layout technology. That's it, it's not difficult! (What is the other half? The other half is the position between layers and layers. I will gradually explain it later.
3, CSS2 Box Model Since the launch of CSS1 in 1996, the W3C organization recommended that the objects on all the web pages are placed in a box (box), and designers can control the properties of this box by creating definitions, these objects. Includes paragraphs, lists, titles, pictures, and layers
