Three html5 styles
Although I have been working overtime recently, I still do not dare to fall behind in html5 learning. I think html5 style is also very important, style is also an important point in html5.
The style labels have two styles and links. style is used for style definition. link is used for resource reference and some external styles are referenced in html pages. Attributes in a style include rel, type, and margin. For example, rel = "stylesheet" indicates an external style table, and type = "text/css" indicates introducing css documents, margin-left indicates the left margin.
Insert methods for three style sheets:
① External style sheet
<link rel=stylesheet type=text/css href=mystlye.css>
In the external sample mystyle.css, the color of the paragraph text is defined as green.
After being introduced in the current html document, the text color is changed from the default black to green.
Introduce the style file named mystyle.css to the current page.
② Internal Style Sheets
<style type=text/css> body{ background-color: beige; } p{ margin-left: 40px; color: blue; }
style>
The internal style defines the background color of the current webpage as pink, the indentation distance of the first line of the paragraph is 40 pixels, and the color of the paragraph text is changed to blue, the back and left margin of the page are refreshed and modified accordingly.
③ Inline style sheet
<PStyle =Color:Red> Contact me P>
The style is defined in the paragraph label. The color of the text in the paragraph is changed to Red. After refreshing the page, the text in the paragraph is changed to red.
Html> <Html> <HeadLang =En> <MetaCharset =UTF-8> <Title>
Title> <StyleType =Text/css>Body{Background-color:Beige;}P{Margin-left: 40Px;Color:Blue;}
Style> <LinkRel =StylesheetType =Text/cssHref =Mystlye.css>
Head> <BodyBgcolor =# F0ffff> <AHref =Test.html> Open local
A> <H1Align =Center> Title 1
H1> <PStyle =Color:Red> Contact me
P>
<Big> This is my first time to use html styles.
Big>
Body>
Html>
In this Code, all programs exist. The Inline style has the highest priority among the three styles as shown in the rendering effect, then the external style, and finally the internal style.
However, if I change the external style and internal style order
<link rel=stylesheet type=text/css href=mystlye.css><style type=text/css> body{ background-color: beige; } p{ margin-left: 40px; color: blue; }
style>
The following results are displayed:
That is to say, the priority is the highest priority for inline style sheets, the second priority for internal styles, and the lowest priority for external styles.
The above facts can actually show that in html5, the closer the person is to the target, the more influential the person is. Therefore, you must pay attention to the code writing process, put the part that you want to achieve most to the point closest to the target.
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
