Home >Web Front-end >CSS Tutorial >Detailed description of CSS cascading style sheets
========================
CSS CascadingStyle Sheet
= =======================
Naming rules: use letters, numbers or underscores and minus signs Composition, do not start with a number
1. CSS syntax
------------------ -----------
Format: Selector{property:value;property:value;property:value;....}
The selector is also called the selector
Comment in CSS: /* ... */
2. How to use css style in HTML (the way to embed css in html);
--------------------- ----------------------------------
1. Inline mode (inline style)
Use the style attribute in the HTML tag to set the css style
Format: <html tag style="Attribute: value; Attribute: value;...."> ;Modified content
font-family:official script"> in HTML How to use css style in
Features: Only applies to this tag.
2. Internal method (embedded style)
is to use tag to set css style
Format:
Features: Applies to the entire current page
3. External import method (external link in)
3.1 (recommended) is to use the tag in the head tag to import a css file, and then act on this page to implement css style setting
Format:
3.2 can also be used import imports the css file in the style tag.
For example:
Features: Acts on the entire website
Their priority: When styles conflict, the proximity principle is adopted, which is the value css attribute The one closest to the modified content is given priority.
If there is no style conflict, the overlay effect will be used.
3. **css2 selector:
----------------- --------------------------------------------------
1. html selector (tag selector)
is to use the html tag as a selector
such as p{....} All p in the web page Tags adopt this style
h2{....} All h2 tags in the web page adopt this style
2. classClass selector ( Use point. Selector to define a custom name (class name))
Definition: .Class name {style....} Anonymous class
Others Select symbol name.Class name{style....}
Use:...
.mc{color:blue;} /* All those whose class attribute value is mc adopt this style*/
p.ps{color:green;} / *Only the class attribute value in the p tag is ps. This style is used*/
Note: the class selector can be reused in the web page
3. Id selector
Definition: #id name{style....}
Use: ...< ;/html tag>
Note: The id selector is only used once in the web page.
Priority of the selector: from the largest Go to the small [ID selector]->[class selector]->[html selector]->[html attribute]
4. Associated selectors (including selectors)
Format: Selector 1 Selector 2 Selector 3 ...{style....}
For example: table a{....} /*Only the a tag in the table tag adopts this style*/
h1 p{color:red} /*Only the p tag in the h1 tag adopts this style*/
5. Selector combination (selector group)
Format: Selector 1, Selector 2, Selector 3...{Style....}
h3,h4,h5,#one,.one{color:green;} /*h3, h4 and h5 all use this style*/
6. Pseudo-classSelect (pseudo-element) selector:
Format: Tag name: pseudo-class name {style....}
a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/
a:visited {color: #00FF00; text-decoration: none} /* Visited link*/
a:hover {color: #FF00FF; text-decoration: underline} /* Mouse On link*/
a:active {color: #0000FF; text-decoration: underline} /* Activate link*/
7 . Attribute selector:
...
8. Other pseudo class selectors
...
4. Selectors in CSS3 (understanding)
－－－－－－－－－－－－－－－－－－ ----------------------------------------------
1. Relationship selector:
div> p selects all the child elements p
that are div elements div+p selects the p element immediately after the div element
div~p selects all sibling elements p
# after the div element ## 2. Attribute selector: [attribute] Selects elements with the attribute attribute. [attribute=value] Select elements with attribute attribute and attribute value equal to value. [attribute~=value] Select an element that has an attribute attribute and the attribute value is a space-separated list of words, one of which is equal to value. [attribute|=value] Select the E element that has the att attribute and the attribute value is astring starting with val and separated by the connector "-".
[attibute^=value] Matches E elements that have an attribute attribute and the value starts with value [attribute$=value] Matches E elements that have an attribute attribute and the value ends with value [attribute*=value] Matches E elements with attribute attributes and values containing value 3. Structural pseudo-class selector: ::first-letter Set the style of the first character within the object .
::first-lineSet the style of the first line in the object.
:lang(language) matches E elements using a special language.
:element1~element2::first-of-type Matches the first sibling element of the same type
:last-of-type Matches the last sibling element of the same type
:only-of-type matches the only sibling element of the same type :only-child matches the only child element of the parent element :nth-child(n) matches the nth child element of the parent element :nth-last-child(n) matches The penultimate nth sibling element of the same type :last-child() matches the last child element of the parent element :root matches the root element of the document. In HTML, the root element is always HTML :empty matches elements without any child elements (including text nodes)Status Pseudo-class selector
:link sets the style ofhyperlinka before it is visited.
:visited Sets the style of hyperlink a when its link address has been visited. :active Sets the element when it is activated by the user (event that occurs between mouse click and release ) style
*:hover Set the style of the element when it is hovered by the mouse *:focus Set the style of the element when it gets focus
:target matches the E element pointed to by the relevant URL :enabled matches the elements in the available state on the user interface :disabled matches the elements in the disabled state on the user interface :checked Matches selected elements on the user interface :not(selector) matches elements that do not contain the selector selector ::selection Sets the value when the object is selected StyleMatches all elements that do not match the simple selector s E
p:not(.bg) {background-color:#00FF00;}
============================================== ==========================================
5. Commonly used attributes in CSS:
-------------------------------- -------------------------------------------------- --------
1. Color color attribute:
a. HSL color: By comparing hue (H), saturation (S), and brightness (L) Changes in color channels and their superposition on each other to obtain a variety of colors.
background-color: hsl(240,100%,50%);color:white;
b . HSLA color: Hue (H), Saturation (S), Lightness (L), Transparency (A);
background-color: hsla(0,100%,50%,0.2);
*c. RGB color: changes in the three color channels of red (R), green (G), and blue (B)
background-color: rgba(200,100,0);
d. RGBA color: red (R), green (G), blue (B), transparency (A)
background-color: rgba(0,0,0,0.5);
*e. Picture Transparency setting img{ opacity:0.25;}
2. Font attributes: font
font
*font-size: Font size: 20px, 60% based on the percentage of the parent object
*font-family: Font: Song Dynasty, Arial
font-style: normal normal; italic italic; oblique inclined font
*font-weight: font bold: bold
font-variant: small-caps Small uppercase font
font-stretch: [Understand] Text stretching is relative to browsing The normal width of the font displayed by the browser (not supported by most browsers).
3. Text attributes:
text-indent: First line indent: text-indent:30px;
text-overflow: Whether to use the omission mark (...) for text overflow. clip|ellipsis (display omission mark)
*text-align: Text position: left center right
text-transform: The case of the text in the object: capitalize(first letter)|uppercase uppercase|lowercase lowercase
*text -decoration: font line drawing: none, underline, line-through
text-decoration-line: [Understand] the position of text decoration lines (browser is not compatible)
*text-shadow: Whether the text has a shadow and blur effect
vertical-align: The vertical alignment of the text
direction: Text flow direction. ltr | rtl
white-space:nowrap; /*Force all text to be displayed on the same line*/
*letter-spacing: The spacing of text or letters
word-spacing: The spacing of words
*line-height : Line height
*color: Font color
*4. Border:
border: width style color;
border-style; Border style: solid implementation, dotted dotted line, dashed dashed line
border-left-color;
border-left-style;
border-left-width:
. ..
CSS3 style
border-radius: rounded corner processing
box-shadow: set or retrieve object shadow
5. Background properties: background
*background-color: Background color
*background-image: Background image
*background-repeat: Whether to repeat, how to repeat? (Tile)
*background-position: Positioning
background-attachment: Whether to fix the background,
scroll: default value. Background image is scrolled with the content of the object
fixed: The background image is fixed
’s ’s ’s 3’s ’s ’s ’s ’s ’s ’s ’s ’ s 3 ‐ ‐ -size
: background size, such as background-size:100px 140px; background:url(test1.jpg) no-repeat scroll 10px 20px,url( test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;background-origin
:content-box,content-box,content- box;:padding-box,padding-box,padding-box; background-size:50px 60px,50px 60px,50px 60px;
6. *Inner padding (inner patch) padding: Retrieve or set the internal margins on the four sides of the object, such as padding:10px; padding :5px 10px;padding-top
: Retrieve or set the internal padding of the top edge of the object: Retrieve or set the object's top edge Internal padding on the right : Retrieve or set the internal padding below the object : Retrieve or set the object Internal margin on the left 7. *Outer padding (outer patch)margin
: Retrieve or set the outer margins on the four sides of the object, Such as margin:10px; margin:5px auto;: Retrieve or set the extended margin of the top edge of the object: Retrieve or set the outer margin on the right side of the object : Retrieve or set the outer margin on the bottom of the object : Retrieve or set the extended margin on the left side of the object 8. Position positioning *position: Positioning method: absolute(Absolute positioning
) , fixed (relative positioning reference, can be used for relative absolute positioning of the interior)*z-index
: Stacking order, the larger the value, the higher it is. right: Retrieve or set the position of the object relative to the right of its most recently positioned parentbottom: Retrieve or set the position of the object relative to the bottom of its most recently positioned parent object *left: Retrieve or set the position of the object relative to the left side of its most recently positioned parent object 9. Layout *
display
: Whether and how to display: none hidden, block block display...* float
: Indicates whether and how the object floats: value none | left | right *clear:
Clear float: none | left | right | both sides visibility: Set or retrieve whether to display the object. visible|hidden|collapse.
Unlike the display attribute, this attribute reserves the physical space occupied by the hidden object clip: Retrieve or set the
visual areaof the object. The parts outside the area are transparent. rect(top-right-bottom-left)
For example: clip:rect(auto 50px 20px auto); top and left are not clipped, right 50, bottom 20. *overflow: beyond hidden: hidden, visible: do not cut content
overflow-x
: How to manage content when it exceeds its specified width: visible | hidden | scroll | auto
overflow-y: How to manage content when the content exceeds its specified height
10. Flexible Box Flexible Box (see manual for details)
box-orient: Set or retrieve the arrangement of the child elements of the flexible box model object. horizontal(horizontal)|vertical(vertical)
box-pack sets or retrieves the alignment of child elements of the flexible box model object.
box-align sets or retrieves the alignment of child elements of the flexbox model object.
box-flex sets or retrieves how the child elements of the flex box model object allocate their remaining space.
box-flex-group sets or retrieves the group to which the child elements of the flex box model object belong.
box-ordinal-group sets or retrieves the display order of child elements of the flexible box model object.
box-direction sets or retrieves whether the order of the child elements of the flexible box model object is reversed.
box-lines sets or retrieves whether the child elements of the flexible box model object can be displayed in new lines.
11. User Interface User Interface
*cursor Which system predefined cursor shape the mouse pointer adopts. Pointer little hand, url customization
zoom Sets or retrieves the zoom ratio of the object: normal|5 times|200% percentage
box-sizing Sets or retrieves the box model composition mode of the object. content-box | border-box
content-box: padding and border are not included in the defined width and height.
border-box: padding and border are included within the defined width and height.
resize sets or retrieves whether the area of the object allows the user to zoom and adjust the size of the element.
none: Do not allow the user to resize the element.
both: Users can adjust the width and height of elements.
Horizontal: The user can adjust the width of the element
Vertical: The user can adjust the height of the element.
outline Composite attribute: Set or retrieve the line outline outside the object
outline-width Set or retrieve the outline outside the object The width of the line outline
outline-style Sets or retrieves the style of the line outline outside the object
outline-color Sets or retrieves the style of the line outline outside the object The color of the line outline
outline-offset Sets or retrieves the value of the offset position of the line outline outside the object
nav-index Sets or retrieves the ## of the object #NavigationSequence.
nav-up Sets or retrieves the navigation direction of an object. nav-right Sets or retrieves the navigation direction of the object. 12. Multi-column columns Set or retrieve the number of columns of the object and the width of each column column-width Set or retrieve The width of each column of the object column-count Set or retrieve the number of columns of the object
column-gap Set or retrieve the gap between the columns of the object column-rule Set or retrieve the border between the columns of the object column-rule-width Set or retrieve the border thickness between the columns of the object column -rule-style Set or retrieve the border style between the columns of the object column-rule-color The color of the border between the columns of the object column-span Whether the image element is Across all columns column-fill Whether the height of all columns of the object is uniform column-break-before Whether the object breaks lines before
column-break -after Whether to break lines after the object column-break-inside Whether to break lines inside the object 13.TableRelated properties:
table-layout Set or retrieve the layout algorithm of the table
border-collapse Set or retrieve whether the rows and cell edges of the table are merged together or according to the standard The HTML styleseparate separate | collapse
border-spacing Sets or retrieves the horizontal and vertical spacing of the row and cell borders when the table borders are independent.
caption-side Sets or retrieves the side of the table where the caption object is. top | right | bottom | left
empty-cell Sets or retrieves the side of the table. When the cell has no content, whether to display the border of the cell hide | show 14. Transition: transition Retrieve or set the objectTransition effect during transformation
transition-property retrieves or sets the properties involved in the transition in the object
transition-duration retrieves or sets the duration of the object's transition
transition-timing-function retrieves or sets the transition in the object The type of
transition-delay retrieves or sets the time of the object’s delayed transition
15. Animation Animation
animation retrieves or Set the animation effects applied to the object
animation-name Retrieve or set the animation name applied to the object
animation-duration Retrieve or set the duration of the object animation
animation- timing-function retrieves or sets the transition type of object animation
animation-delay retrieves or sets the delay time of object animation
animation-iteration-count retrieves or sets the loop# of object animation ##Numbers
animation-direction retrieves or sets whether the object animation moves in reverse direction in the loop animation-play-state retrieves or sets the state of the object animation animation- fill-mode retrieves or sets the state of the object outside the animation time 16.2D Transform 2D Transform:
transform retrieves or sets the object's state Transform transform-origin Retrieves or sets the origin referenced by the transformation in the object 17. Media Queries Properties width defines the width of the visible area of the page in the output device height defines the height of the visible area of the page in the output device device-width defines the visible width of the screen of the output device device-height defines the visible height of the screen of the output device orientation defines whether 'height' is greater than or equal to 'width'. The value portrait represents yes, landscape represents noaspect-ratio defines the ratio of 'width' to 'height'
device-aspect-ratio defines 'device-width ' to 'device-height' ratio. Such as common monitor ratios: 4/3, 16/9, 16/10 device-aspect-ratio defines the ratio of 'device-width' and 'device-height'. For example, common monitor ratios: 4/3, 16/9, 16/10 color defines the number of color originals for each group of output devices. If it is not a color device, the value is equal to 0 color-index defines the number of entries in the color lookup table of the output device. If no color lookup table is used, the value is equal to 0 monochrome defines the number of monochrome originals per pixel contained in a monochrome frame buffer . If it is not a monochrome device, the value is equal to 0
resolution Defines the resolution of the device. For example: 96dpi,300dpi, 118dpcm
scan defines the scanning process of TV equipment grid is used to query whether the output device uses raster or dot matrix. Only 1 and 0 are valid values, 1 represents yes, 0 represents noThe above is the detailed content of Detailed description of CSS cascading style sheets. For more information, please follow other related articles on the PHP Chinese website!