Home > Developer > Web Develop
Introduction to CSS
CSS is a cascading style sheet, CSS style sheets greatly improve the productivity
CSS Basic syntax
1. First select a property
2. After selecting attributes, enclose them in curly braces
3. Inside the parentheses are the corresponding attributes and attribute values, such as:
{ property: value;}Give a practical example, like this:
H1 is a property, and then a curly brace, the color in parentheses is a property, followed by the corresponding property value red, which is required after the setting is finished;
{ color: red; font-size: 14px;}Using CSS styles:
To use CSS styles in HTML, you can invoke CSS files with the <link> tag, such as:
<!DOCTYPE HTML><HTML> <Head> <title></title> <MetaCharSet= "Utf-8"> <!--invoking a CSS style sheet - <Linkrel= "stylesheet"type= "Text/css"href= "Test.css"> </Head> <Body> <H1>I was changed by CSS.</H1> </Body></HTML>
CSS Selector grouping:
Selector grouping is the definition of a bunch of page elements together:
H1, H2, H3, p, a { color: red; font-size: 14px}CSS derived class selection
The style is defined based on the context of the element in its position, such as the label in the label, and if the BODY element is defined directly, all values are changed, but it is possible to define only certain elements. Of course, the precedence of the style defined for an element is higher than the definition <body> all style. So even if the <body> modifies the style, it can be modified for a single element.
The following code:
<!DOCTYPE HTML><HTML> <Head> <title></title> <MetaCharSet= "Utf-8"> <!--invoking a CSS style sheet - <Linkrel= "stylesheet"type= "Text/css"href= "Test.css"> </Head> <!--Labels in the label - <Body> <P>I am a small p, I am the body p{} The specified label changed</P> <H1>I am the title</H1> </Body></HTML>
Then we use CSS style to modify
Body { color: green;} Body P { color: red;}As you can see, the body is all defined as green, but if you specify the P element in the body to define it, you can change the color. So the priority of the specified element is higher than the full definition. Instead of specifying the defined H1 title, it is green.
ID Selector
The ID selector can specify a specific style for an HTML element labeled with an ID, and the ID selector is defined with a "#". ID selection is often used for CV-derived selectors, and they often come together to use
<!DOCTYPE HTML><HTML> <Head> <title></title> <MetaCharSet= "Utf-8"> <!--invoking a CSS style sheet - <Linkrel= "stylesheet"type= "Text/css"href= "Test.css"> </Head> <Body> <DivID= "TestID">Oh hehe<P>hahaha, I was assigned to define the color, ID and element often used together!</P> </Div> </Body></HTML>
/* The ID can be represented directly by the # number. */ #testid { color: green;} #testid P { color: red;}CSS class Selector
The class selector is at a point "." To display, class can also be used in conjunction with derived selectors, such as defining an element <div class= "TestClass" >
Using CSS can be modified as follows:
/*class you may need to use "." To represent */. TestClass{ color: green;} . TestClass P { color: red;}Property selector:
The property selector is for the property in the tag to modify, of course, can also be based on the value of the property, to modify the specific:
<!DOCTYPE HTML><HTML> <Head> <title></title> <MetaCharSet= "Utf-8"> <!--invoking a CSS style sheet - <Linkrel= "stylesheet"type= "Text/css"href= "Test.css"> </Head> <Body> <oltype= "I"> <Li>Property Selector</Li> <Li>Property Selector</Li> <Li>Property Selector</Li> </ol> <oltype= "1"> <Li>Property Selector</Li> <Li>Property Selector</Li> <Li>Property Selector</Li> </ol> <oltype= "a"> <Li>Property Selector</Li> <Li>Property Selector</Li> <Li>Property Selector</Li> </ol> </Body></HTML>
Then use CSS to modify
/* If there is no value, all styles are modified through the property */ [Type] { color: red;} /* If there is a value, it is modified for the value. */ [type= "a"] { color: green;}Summarize:
The main learning is the use of CSS, has been derived selectors, using the ID selector, the use of class selector and the use of the property selector
ID---start with "#"
Class---with "." Beginning
The property selector---to fill in the properties and values in the bracket class with []
Derived selectors---call tags directly, such as: <p>{}
Introduction to CSS Basics
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
