PHP notes (CSS) HTML is often used to display content on webpages. of course, it can also be layout, but it is inconvenient. Therefore, CSS is introduced.
CSS Full name: Cascading Style Sheet. Chinese name: stacked Style sheet
Help document: CSS. chm
Purpose: layout and beautify webpages
Features:
Like HTML, it is a markup language that can be directly executed by a browser.
Case insensitive
A css file is a text file with the suffix css
Nested in HTML
Css rules
Syntax
CSS definition consists of selector, property, and value;
Format: selector {property: value ;}
Selector includes
Type selector:
Definition: HTML tag
Use: use tags directly
Define and use
Class selector:
Definition: Mark name. class name or. class name
Use: class = "class name"
Tag name: html tag. "Tag Name. class name" indicates that the selector is used only when the tag is used and the class value is the class name;
". Class name" indicates that the selector is used as long as the class value is the class name.
Define and use
Id selector:
Definition: tag name # id value or # id value
Use: id = "id value"
Tag name: html tag. "Tag name # id value" indicates that the selector is used only when the tag is used and the id is the value.
"# Id value" indicates that the selector is used as long as the id is the value.
The id value of the same page is unique (yes, if there are two identical IDs on the same page, the style can also be displayed, but this is against the logic and will be called by js in the future, will be messy)
Define and use
Include selector:
A hierarchical combination of multiple selectors separated by spaces. Each selector consists of left-to-right and contains links.
Definition: a combination of selector characters separated by spaces
Usage: embedded with each selector
The number of layers is not limited, but it is recommended that too many layers affect maintenance and seo.
Define and use
Group Selector:
Multiple selectors are defined as the same attribute at the same time.
Definition: A group of selectors separated by commas (,).
Use: use the separators directly
Define and use
Pseudo element selector:
A method for defining different states of html elements
Definition: Label: pseudo element
Usage: different attributes are used for different states of the tag.
Define and use
Attribute and attribute values are separated by ":", and multiple attribute values are separated ";"
Note
Format :/*.......*/
Length unit
Relative unit (commonly used)
Px: Pixel
Em: The font size relative to the text in the current object.
%: Percentage
Absolute unit (not commonly used)
Pt: Point
Cm: centimeter
Mm: mm
Color unit and URL value
Color:
# Rrggbb
# Rgb
Rgb (x, x, x) (not commonly used, incompatible with browsers)
Rgb (x %, x %, x %) (not commonly used, incompatible with browsers)
URL
Url (address)
How to use CSS in HTML
Inline style sheet
Use in tags directly
Embed css key-value pairs using the style attribute
It is flexible to use, but does not play the role of CSS.
Embedded style sheet
InLabel, useOr
External link style sheet
External links to the css file. directly enter the css content in the file.
Advantages:
Using external css files, the browser has the cache function and does not need to be downloaded every time.
Multiple File sharing
Use The tag is introduced into HTML in the format
Priority of the three formats, proximity principle: inline type> embedded Type> external chain
Inline and block-level elements
Inline element
The content in the label is in the same line and will not wrap automatically
The width and height cannot be set.
Block-level elements
The content in the label is automatically wrapped.
Configurable width and height
CSS font attributes
Multiple attributes are written in the same row and composite attributes. The order must be [[|]? [/ ]? ], And is required.
Separate write of single attribute
Attribute: set whether the font is italic. the default value is normal;
Attribute: set whether the font is a small uppercase letter. the default value is normal;
Property: specifies the font width. the default value is normal;
Property: set the font size. the common unit is "px" or "%". The default value is normal;
Attribute: set the font. you can set multiple fonts separated by commas (,). The browser searches for whether the font exists in order to display the font. when the font name is Chinese, it must be enclosed in single quotes. The default value is selected based on the browser.
Property: set the font width. the default value is normal;
CSS background attributes
Write multiple attributes in one row and use composite attributes The attribute value is [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position], if other parameters are not specified, they are overwritten unconditionally by default.
Separate write of single attribute
: Sets the background color. the default value is transparent;
: Set the background image. use "url ()" to set the image path;
: Set the filling effect of the background image. the default value is repeat;
: Set the filling position of the background image. the default value is "0% 0%". common units: "%" and "px ".
Tip: You can set a region And Attribute, This area can be filled with attributes, for example, as a navigation bar; The property can take part of the image separately to separate the reality and reduce the webpage loading time.
CSS text attributes
: Set the character spacing. a negative value is allowed. the default value is normal.
: Set the word spacing. a negative value is allowed. the default value is normal.
: Add modifier, underline, overline underline, line-through strikethrough
: Horizontal alignment, center in centen, right in right, left in left
: Sets the object row height. if the row height is the same as the region height, the text is centered vertically.
: Sets text indent. unit: em (character), px (pixel), % (percentage)
: Set the font color
CSS border attributes
Merge multiple attributes and write using composite attributes , Attribute value order: [border-width] | [border-style] | [border-color]
, , , : Set the left, right, online, and offline attributes. the attribute values are in [border-width] | [border-style] | [border-color]
Separate write of single attribute
: Set border style, commonly used dotted (dot), dashed (dotted line), solid (single solid line)
: Set the border width, which cannot be negative, The attribute is set to none, and this attribute is ineffective.
: Set border color
CSS list attributes
: Set the marker of the list item as the default marker.
: Set the flag of the list item to the selected tag, and set the tag address for "url ()".
: Sets the position of table items in the text. outside indicates that the table items are placed outside the text, and inside indicates that the table items are placed within the text.
DIV + CSS page layout
Advantages:
- Separation of content and layout
- Concise Code, improving page browsing speed
- Easy to maintain and modify
- Improve the page indexing efficiency of search engines
P and span
P: block-level element. it is automatically wrapped and can be set to wide or high.
Span: an inline element that does not wrap automatically. the width and height cannot be set.
W3C box model
Maigin: outer padding (the outer margin of the four sides of the box)
Maigin: 1 ~ Four parameters are used to set the external whitelist size.
Maigin-top, maigin-right, maigin-bottom, and maigin-left: respectively set the upper, right, bottom, and left outer padding size of the box.
Border: border
Border: 1 ~ Four parameters to set the border width
Border-top, border-right, border-bottom, and border-left: specify the upper, right, lower, and left border sizes of the box.
Padding: padding (the distance between the box content and the border)
Padding: 1 ~ Set the padding size for four parameters
Padding-top, padding-right, padding-bottom, and padding-left: set the upper, right, lower, and left padding sizes of the box respectively.
DIV positioning
Position: sets the positioning method. the parameters are static, absolute, relative, and fixed.
Absolute: absolute location. The location is relative to the document stream and will be detached from the document stream.
Relative: relative Positioning. The location is relative to its original location and will not be separated from the document stream.
Fixed: fixed position, relative to the browser window
Binding mode: The parent layer uses "relative" to locate, and the child layer uses "absolute" to locate. The child layer is "bound" to the parent layer, and the child layer is no longer relative to the document stream, but relative to the parent layer.
Top: The distance between the box and the top
Right: The distance between the box and the right side
Bottom: The distance between the box and the bottom
Left: The distance between the box and the left
Z-index: Set the cascade order. the default value starts with 0 and can be negative.
Text-align: align horizontally, center centen, right, and left
Line-height: Set the row height of the object. if the row height is the same as the area height, the text is centered vertically.
Float: Set the object to floating
It only floats horizontally, not vertically.
Will be out of the document stream
When multiple objects are set to floating at the same time, each object is displayed side by side
Left: left floating
Right: right floating
Clear: clear floating
Right: clear the right floating. no floating object exists on the right of the object.
Left: clear the left floating. no floating object exists on the left of the object.
Both: clear floating on both sides. the floating object cannot exist on both sides of the object.
DIV display
Display: sets the element display mode.
Block: displays block-level elements.
Inline: displays inline elements.
None: this element is hidden, and the position is not occupied.
Visibility: Set the display of nested relationships
Inherit: the display attributes are the same as those of the parent layer. the parent layer displays sub-explicit and the parent hidden sub-hidden.
Visible: whether or not the parent layer is displayed, the child layer is still displayed
Hidden: whether or not the parent layer is displayed, the child layer is hidden and occupied
Overflow: Display mode when the content exceeds the boundary
Auto: automatic processing. the scroll bar is displayed when the value exceeds the threshold. if the value is not exceeded, the scroll bar is not displayed.
Scroll: always displays the scroll bar, whether or not it exceeds
Visible: exceeded values are displayed directly without processing.
Hidden: hide the excess part without displaying the scroll bar.
