Home > Developer > Web Develop
Cascading Style Sheet
Cascading Style Sheets
Cascading Style Sheets
Style sheet
2. Function:Enables separation of content and performance
Improved reusability and maintainability of code
Second, how to use CSS style sheetThere are three ways to use it, and you can change the style of the page using either.
1. Inline mode
Inline styles: Define CSS styles in HTML tags
Features: Not universal, can only define a single label of a separate style.
2. Internal style sheet
Define a series of styles in HTML
Features: The current page any one of the tags can be used to reflect the reusability.
3. External style sheet
Defines a style in an external CSS file that can be referenced by any page of a style sheet.
Features: The real meaning of the implementation of the style sheet is reusable
Third, inline style of CSSDefined in the style attribute in the HTML tag
<H2 style= "style rules" >
Syntax for CSS:
Style rule: Property Name: Property value
Color:red
To distinguish between multiple rules;
background-color:blue;color:red;
Iv. Internal style sheetStyle content appears in <style> in
<title></title>
<style>
</style>
Style composition: selectors and style declarations
Selectors: Decide which elements are able to use defined rules
Style declaration: A style rule surrounded by a pair of curly braces
Selector Selector
{
/* Style Rule */
Property Name: attribute value;
Property Name: attribute value;
}
Five, external style sheetStep1: Create a file with CSS suffix
Step2: Writing code-related selectors in a file
Step3: Referencing a CSS file in a page
Vi. CSS style sheet features
1, the Inheritance of
Most of the style attributes can be inherited.
<body>
<p></p>
</body>
2. Cascade Sex
You can define multiple style sheets for a label
3. Priority level
Styles are applied according to the precedence of style rules when the style definition conflicts
Highest level: inline style
Second: Internal style sheet and external style sheet, nearest principle
4. Adjust the priority level
!important
Grammar:
Selector {property: Property value!important;}
Seven, selector
Specifies which elements are able to use a well-defined style
1. Universal Selector
Indicates: *
Can match with any one element
Most of the default styles used to set the overall page
*{ font-size:12px; font-family: "Microsoft Yahei;" }
2. Element Selector
By the HTML element name as the selector
Function: Used to modify the default style of the element corresponding to the current selector
Represents: Element name
P {font-size:12px;} Div {color:red;}3. Class Selector
Syntax:. className
Note: The name of a class cannot begin with a number
Use: A class selector can be used for elements that can be attached to class attributes, which sets the class property of the element
A label can also introduce multiple classes at the same time
<p class= "Important solid" ></p>
Class selector and element selector are used together:
Ability to implement subdivision control of different styles in an element. Also known as the category selector.
Syntax: element Selector. class Selector {}
p.important{}
4. ID Selector
Features: Action on the specified ID attribute is worth the element
Syntax: #idname {}
#
<div id= "Head" ></div>
ID attribute:
1. Unique value of the identity element
2. The ID style in the reference style sheet
5. Group Selector
The selector's declaration is a comma-separated list of selectors
Role: Use the same rules for multiple elements
Syntax: selector 1, selector 2 ... {}
6. Descendant Selector
<div> <span> <span><span> </span></div>Function: Find elements based on the position of the element, then change the style
7. Descendant Selector
Descendants: Describes only parent-child relationships, tag nesting is also limited to the nesting of parent-child relationships
<fieldset> <span class= "S1" ><span> <div> <span class= "S2" ></span > </div> </fieldset>
SPAN.S1 is the descendant element of FieldSet
SPAN.S2 is the descendant element of a Div
SPAN.S2 is the descendant element of FieldSet.
Grammar:
Selector 1> Selector 2{}
fieldset>span{}
fieldset>.s1{}
8. Pseudo-Class Selector
Effect: Adds special effects to some selectors, most of which represent the different states of an element (selector)
Grammar:
By: The function of the binding character
Selector: Pseudo class Selector
Classification of Pseudo-classes:
Link pseudo-Class
Dynamic Pseudo-Class
Target Pseudo-Class
Element State Pseudo-class
Structure Pseudo-Class
Negation pseudo-Class
Link pseudo-Class:
: Link has not yet been visited
: Visited: Visited connection status
a:link{}
A:visited{]
Dynamic Pseudo-Class:
: Hover the state of the mouse hover over the element
: state when the active element is activated
: The state of the focus element at the time it gets focused
Need to Master:
: Link
: Visited
: hover
: Active
9, the priority of selectors
<div id= "D1" class= "Red" ></div>
Div{color:blue;}
#d1 {color:red;}
. Red{color:yellow;}
Inline >ID> Class (pseudo Class) > element
10. Size
Which elements in HTML are suitable for use with dimension properties
1. All block-level elements
Div H1 P Oi ul
2. Most inline elements are not suitable for use with dimension attribute span
3, the existence of the width and height attributes of the element img,table ...
11. Border: Border
Direction: Left,right,top,bottom
Size: Width
Styles: Style
Colour: Color
12. Border Shadow
Box-shadow: Adding a shadow to a box
Box-shadow:h-shadow v-shadow blur spread color inset
"H-shadow: Required, horizontal shadow offset distance
V-shadow: Required, vertical shadow offset distance
Blur: Optional, blur degree
Spread: optional, shadow size
Color: Optional Shadow Color
Inset: Optional, change external shadow to inner shadow "
13. Picture Border
The display effect of the border from the picture as an element
Border-image:src width Repeat
Repeat
Repeat: Tiling
Round: Fully paved
Stretch: Stretching
Border-image-source: The path to the picture
Border-image-source:url (img/aa.jpg);
Border-image-width: Picture Border width
Border-image-repeat: Border Tile Repeat,round,stretch
14. Contour
A contour (outline) is a line drawn around an element, in the perimeter of a border
Grammar:
Outline:color style width;
Outline-color:
Outline-style:
Outline-width:
The definition of the--css of my notes, the basic syntax and the use of selectors
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
