Home > Developer > Web Develop
Task Description = = = = =
"Original link" http://ife.baidu.com/task/detail?taskId=2
Mission Purpose= = Summary = = =
I. Creation of CSS Styles
1. External style sheet
An external style sheet is an ideal choice when the style needs to be applied to many pages.
Each page uses <link> tags to link to the style sheet, the specific CSS file loading method is as follows:
< Head > < rel= "stylesheet" type= "text/css" href= " Mystyle.css "/></head>
2. Internal style sheet
An internal style sheet should be used when a particular style is required for a single document. You can use the <style> tag to define an internal style sheet at the head of the document, just like this:
<Head><styletype= "Text/css">HR{Color:Sienna;}P{Margin-left:20px;}Body{Background-image:URL ("images/back40.gif");}</style></Head>
3. Inline style
Write directly in the existing HTML tag. Use this method with caution, such as when the style only needs to be applied once on one element.
To use inline styles, you need to use style properties within the relevant tags. The Style property can contain any CSS properties. This example shows how to change the color and left margin of a paragraph:
<style= "Color:sienna; margin-left:20px">This isa paragraph </p>
When three are present, the priority of the application follows the "nearest principle", namely: inline style > Internal style sheet > external style sheet
Two. CSS Selector
1. Tag Selector
The tag selector is actually a tag in the HTML code. such as
P{font-size:12px;line-height:1.6em;}2. Class Selector
Class selectors are most commonly used in CSS style coding. Grammar:
. class Selector name {CSS style code;} 3. ID Selector
In many ways, the ID selector is similar to a class selector, but there are some important differences:
(1) Set id= "ID name" for the label instead of class= "class name".
(2) The ID selector is preceded by the pound sign (#) , not the English dot (.).
#ID选择器名称 {CSS style code;}
4. Sub-selector
There is also a more useful selector sub-selector, the greater than symbol (>), for selecting the first generation of child elements of the specified label element. Such as:
<ulclass= "Food"> <Li>Fruit<ul> <Li>Banana</Li> <Li>Apple</Li> <Li>Pear</Li> </ul> </Li> <Li>Vegetable<ul> <Li>Cabbage</Li> <Li>Rape</Li> <Li>Cabbage</Li> </ul> </Li></ul>CSS code for the child selector:. food>li{border:1px solid Red;}
This line of code causes the child element Li (fruit, vegetable) under the class name to add a red solid line border.
5. descendant (inclusive) Selector
Contains a selector, which is a space to select the Descendants element under the specified label element. Such as:
. First span{color:red;}
"Note" > acts on the first generation of descendants of the element, and the space acts on all descendants of the element.
6. Universal Selector
The universal selector is the most powerful selector, which uses a (*) number designation, which is used to match all tag elements in the HTML, using the following code to use any LABEL element in the HTML font color is all set to red:
* {color:red;}
7. Pseudo-Class selectors
A pseudo-class selector that allows you to set a style for a label that does not exist in the HTML (a state of the label), such as when we set the font color for the mouse-over state of a tag element in HTML:
a:hover{color:red;}
8. Grouping selectors
When you want to set the same style for multiple label elements in the HTML, you can use the grouping selector (,), which is the following code for the H1 in the right-hand code editor, and the span label to set the font color to red:
h1,span{color:red;}
HTML Practice--ife Task (CSS selector)
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
