HTML is often used to display content in a Web page, and of course, it can be a layout, but it is not convenient, so the introduction of CSS
CSS full name cascading style Sheets, Chinese name: Cascading style sheet
Help Document: Css.chm
Role: Layout and landscaping pages
Characteristics:
Like HTML, is a markup language that can be executed directly by the browser
Case insensitive
The CSS file is a text file with a suffix called css
Nesting is used in HTML
CSS Rules
Grammar
CSS definitions consist of selectors (selector), attributes, and attribute values (value);
Format: Selector{property:value;}
Selectors include
Type selector:
Definition: HTML tags
Use: Use labels directly
Define the use
Class selector:
Definition: Tag name. class name or. Class Name
Use: class= "class name"
The tag name is the HTML tag, and the tag name. Class name indicates that the selector is used only if the label is used and the class value is the category name;
". Class name" means that the selector is used whenever the class value is the name
Define the use
ID selector:
Definition: Tag name #id value or #id值
Using: id= "id value"
The tag name is an HTML tag, and the tag name #id value means that the selector is used when the tag is used and the ID is the value.
"#id值" means that the selector will be used whenever the ID is the value
The same page ID value is unique (yes, if the same page has two identical IDs, the style can be displayed, but this is illogical, and the future use of JS Call ID, there will be confusion)
Define the use
Contains selectors:
A hierarchical combination of multiple selectors, separated by spaces, and left to right for each selector, containing the relationship
Definition: Combination of selector characters, separated by spaces
Use: Each selector is embedded using
The number of layers is not limited, but it is recommended not too much, affecting maintenance and SEO
Define the use
Group selector:
Define multiple selectors for the same attribute at the same time
Definition: Each selector combination, with "," separate open
Use: Use each separator directly
Define the use
Pseudo element selector:
A way to define different states of HTML elements
Definition: Tags: pseudo-elements
Use: The different states of the label use different attributes
Define the use
Attributes are separated from attribute values by ":", with multiple attribute values ";" Separated
Comments
Format:/*.......*/
Length Units
Relative units (common)
PX: pixels
EM: Font size relative to the text within the current object
%: Percent
Absolute units (not commonly used)
PT: Dot
CM: cm
MM: MM
Color units and URL values
Color:
#rrggbb
#rgb
RGB (X,X,X) (not used, browser incompatible)
RGB (x%,x%,x%) (not used, browser incompatible)
Url
Means: url (address)
How to use CSS in HTML
Inline style sheet
Use directly in the label
Embed CSS key-value pairs using the Style property
Use flexibility, but lose the role of CSS
Inline style sheet
In the label, use or
External link Style sheet
External link CSS file, input CSS content directly in file
Advantages:
Using the external CSS file, the browser with the cache function, do not download every time
Multiple file shares
Use tags to introduce HTML in the form
Priority in three formats, Proximity principle: inline > Inline > Outer-chain
Inline elements and block-level elements
Inline elements
The contents of the label are all on the same line and are not wrapped automatically
Not set width and height
Block-level elements
The contents of the tag are automatically wrapped.
can be set width and height
CSS Font Properties
Multiple attributes are written on the same line, with the composite attribute, the order must be [[| | | | |]? [/ ]?], and the required option.
Single-Attribute write-apart
Property: Sets whether the font is italic and the default value is normal;
Property: Sets whether the font is a small uppercase letter and the default value is normal;
Properties: Set the font weight, the default value is normal;
Properties: Set the font size, the common units are "px" or "%", the default value is normal;
Properties: Set the font, you can set a variety of fonts, separated by ",", the browser will sequentially retrieve the presence of the font to display, the font name is Chinese, to use single quotation marks. The default value is based on the browser selection.
Properties: Sets the font width, the default is normal;
CSS Background Properties
Multiple attributes are written on one line, using a composite attribute with a property value of [Background-color] | | [Background-image] | | [Background-repeat] | | [Background-attachment] | | [Background-position], when other parameters are not filled in, the default unconditional override.
Single-Attribute write-apart
: Set background color, default is transparent;
: Set the background image, use "url ()" To set the picture path;
: Set background picture fill effect, default is repeat;
: Sets the fill position of the background picture, the default value is "0% 0%", common units "%" and "px".
Tip: You can set an area and attributes that can be populated with the area, such as navigation bars, attributes can be taken as part of the picture, separate reality, reduce page load time.
CSS Text Properties
: Set character spacing, allow negative values, default to Normal
: Set word spacing, allow negative values, default to Normal
: Add adornments to text, underline underline, overline underline, Line-through strikethrough
: Horizontal alignment, Centen Center, right-aligned, left-aligned
: Sets the row height of the object, and the text is centered vertically when the row height is the same as the area
: Set text indent in units of EM (character), px (pixels),% (percent)
: Set Font Color
CSS Border Properties
Multi-attribute merge write, using compound attribute , attribute value order is [Border-width] | | [Border-style] | | [Border-color]
,,, : Set the left line, right line, on-line, offline properties, the property value order is [Border-width] | | [Border-style] | | [Border-color]
Single-Attribute write-apart
: Set border style, common dotted (dots), dashed (dashed), solid (solid line)
: Sets the border width, does not allow negative numbers, the property is set to None, this property loses effect
: Set Border color
CSS List Properties
: Sets the mark of a list item as a preset marker
: Set the tag for the list item to be an optional tag, and the URL () to set the address of the tag
: Sets the position of the table item in the text, outside means that the marker is placed outside the text, inside indicates that the marker is placed within the text
Div+css Page Layout
Advantage:
- Separation of content from layout
- Simple code to improve page browsing speed
- Easy to maintain and modify
- Improve indexing efficiency of search engines for pages
Div and Span
DIV: block-level elements, will wrap, can set the width of the high
Span: inline element, does not wrap, cannot set width height
Box model
Maigin: Outer filler (extended margin of the four-sided box)
Maigin: 1~4 parameters can be used to set the size of the outer filler
Maigin-top, Maigin-right, Maigin-bottom, Maigin-left: Set the box, the right, the lower, the left outer filler size respectively
Border: Border
Border: You can use 1~4 parameters to set the width of the border
Border-top, Border-right, Border-bottom, Border-left: Set box size on box, right, bottom, and left respectively
padding: Inner filler (the distance between the contents of the box and the frame)
padding: You can use 1~4 parameters to set the size of the inner filler
Padding-top, Padding-right, Padding-bottom, Padding-left: Set the box, right, bottom, and left inner filler size respectively
div positioning
Position: Set positioning mode, parameters are static, absolute, relative, fixed
Absolute: absolute positioning, Position relative to document flow, out of document flow
Relative: relative positioning, Position relative to its original position, not out of document flow
Fixed: fix positioning, Position relative to browser window
Binding mode: The parent layer is anchored using "relative", the child layer is positioned with "absolute", the child layer is "bound" to the parent layer, and the child layer's position is no longer relative to the document flow, but relative to the parent layer
Top: The distance between the box and the top
Right: The distance between the box and the
Bottom: The distance between the box and the bottom
Left: The distance between the box and the
Z-index: Sets the cascade order, starting at 0 by default and can be negative
Text-align: Horizontal alignment, Centen Center, right-aligned, left-aligned
Line-height: Sets the row height of the object, when the row height is the same as the width of the area, the text is centered vertically
Float: Sets the object as a floating effect
will only float horizontally and will not float vertically
is out of the document flow
When multiple objects are set to float at the same time, each object is displayed side-by
Left: Floating
Right: Floating
Clear: Clear Floating
Right: Clear floating object cannot exist on the right side of object
Left: The floating object cannot exist on the left side of the object.
Both: Clear both sides floating, object cannot exist on both sides of floating object
The display of the DIV
Display: Sets the way the element displays hair
Block: Displayed as blocks-level elements
Inline: inline element mode display
None: Hides the element, hides it, and does not occupy the location
Visibility: Setting the display of nested relationships
Inherit: The display property is the same as the parent layer, the parent is explicit, the parent is hidden
Visible: The child layer remains visible regardless of whether the parent layer is displayed
Hidden: Child layers are hidden and occupy locations regardless of whether the parent layer is displayed
Overflow: How content is displayed when it is out of bounds
Auto: Automatic processing, display scroll bar when out of bounds, not displayed
Scroll: Scroll bars are always displayed, whether or not exceeding
Visible: Beyond also direct display, do not do processing
Hidden: Out-of-section hidden, scroll bar not displayed
