Css Tutorial
#1.20
We must first know css is used to render and change the layout and appearance
Most of the properties of the elements defined in the head of the head of the style tag
Attribute (property) that you want to set the style attributes (style attribute). Each attribute has a value. Attributes and values are separated by a colon
property is that you have to choose to change the properties, such as color, font size, etc. are considered property
and is terminated by a semicolon {} statement is enclosed in a special declaration which every attribute of
the css comment with "/ " beginning with " /" end (/ ** /)
is in html click the query html comments
If you want to set CSS styles in HTML elements, you need to set the "id" and "class" selector in the element. This is the reason why some of the elements have id, id selector can be marked with a specific id of the HTML element specifies a particular style. Do not start with a number ID attribute, HTML elements with the id attribute set id selectors, CSS id selector to the "#" to define. Examples
#1.21
And sub-selecting comprises a selector difference is the depth included, the former is an element in the selector shaking chest, and the child can only select the first level selector
sibling selector is in two consecutive when there is some rendering format a ~ B {...}
this link notes 2
span can be embedded in other style, in a statement, the span can be used to isolate individual parts forming another style
Style, which means that the appearance, such as font size, color, etc., external and internal style style differences, click to see
which of these styles have priority read inline style) Inline style> (internal style) Internal style sheet> ( external style) external style sheet> browser's default style
Background:
By default, a background image will go horizontally or vertically overlapping tile, to only horizontal or vertical tile need to add background-repeat attribute, repeat-x is horizontal tile meaning, no repeat is not repeated
Abbreviated: The body {color; image; repeat; attachment; position}, which is abbreviated sequence is abbreviated format, directly on the page corresponding to the input value required position
Some css conversion and layout of text on
#1.22
cssWeb combination safe fonts, font type that is
Use em to set the font size, 1em is equal to the current font size. The default browser text size is 16px
Some are not commonly used fonts, perhaps only a normal body, if you use italic, there is no effect, and this time you have to use oblique, can be understood as the use of italic text in italics, oblique let no italic text attributes tilt
When designing css link, pay attention to the color change before and after the click, and in accordance with the stringent requirements designed to change this order, unvisited links link> visited links visit> mouse movement to link hover> Click the mouse active.
Text-decoration can be used to design a web site is underlined with a background-color background to design website
filling padding means is provided for all or specified current margin properties within the element. The attribute may have a value of 1-4.
Padding element of the background color when the element Padding (padding) (padding) are cleared, the "release" of the area would be.
Used alone filling property is disposed within the margin properties in one element in the declaration. Acronym filling properties may also be used, upon changing a value corresponding to the distance will change padding
# 1.23
When To set the location of the title, with a caption label, where style caption Side portion defined in such bottom (bottom)
The box model structure: Margin (margins) - clear the area outside of the frame, is transparent from the outside.
Border (Borders) - around the inner and outer margins content border.
Padding (padding) - clear the area around the content, padding is transparent.
Content (content) - the contents of the box to display text and images.
Boder defining border style, it can be different styles
can not be defined by the region style set position when a border style: right style, top style, etc., can also be a single attribute, such as the border-style: inset solid, the show is up and down around inset is solid. First down and then left, right lower left
Note: "border-color" property does not work if used alone is first used "border-style" property to set borders.
outline border that surrounds the outside of the layer, style, and border style set are similar
To understand the margin and padding of the structure, click the query
can be set independently without bearing margin margin, that distance with other statements, will be filled with blank
To minimize the code, you can use the packet selector. Used for each selection separated by commas. In the following example , we use a bank selector code for the above
Nested selector: p {}: Specifies a style for all p elements.
.marked {}: for all class = "marked" element specifies a pattern.
.marked p {}: = p elements within the "marked" element specifies a style for all class.
p.marked {}: for all class = "marked" element specifies a pattern of p.
Can hide an element by setting the display property to "none", or the visibility property to "hidden"
the former hides still has its original location and space, after which hides the location and the space was gone
when setting the element visibility: after the collapse, the general performance and visibility of elements: hidden, like, that it will take up space
Block elements: <. H1> <. P > <div.>. Examples of inline elements: <. Span> <. A > which it is more common, particularly to see this link Notes
When setting the relative position of the text or pictures, you can reference position in the fixed elements that can set its position in the web page
but using absolute Tags: fully absolute position will be better other types Click here
