Home > Developer > Web Develop

Use of HTML styles

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS: Cascading style Sheets (cascading style sheets)

There are three ways to embed CSS in XHTML pages. See CSS Tutorials.

Example of loading a CSS file in the head tag 
<head>    <linkrel="stylesheet"type="text/css"href="style.css"/></head>

This example uses the link tag.

{font-size:12px;}{font-size:10px;color: #FFFFFF;}

Style.css's Content

Example of writing CSS content directly in the head tag of an HTML file 
<head>    <styletype="text/css">    abbr    {        font-size: 12px;    }    .text10pxwhite    {        font-size: 10px;        color: #FFFFFF;    }    </style></head>

This example uses the style label.

The two approaches are the same (but the first approach is recommended, and I'll tell you why in the CSS tutorial).

Example of loading a label using the Style property 
<pstyle="font-size: 12px;color: #000;">使用css</p>



HTML Style Tags

Style label--use this tag when declaring a style in a document
    • The style tag is paired up to start to <style> </style> end
    • Property
      • media--media type, see CSS Advanced Tutorial
      • type--Contains the type of content, general usetype="text/css"
Example 
<head>    <styletype="text/css">    abbr    {        font-size: 12px;    }    .text10pxwhite    {        font-size: 10px;        color: #FFFFFF;    }    </style></head>

HTML Link Tag

Link tag--Use this tag when declaring an external resource (such as CSS) in a document
    • The link tag appears separately
    • Property
      • HREF--Specifies the address URI of the resource (CSS file) to be loaded
      • Media-Medium type
      • REL--Specify link type
      • Rev--Specify link type
      • Title--Specify the element name
      • type--Contains the type of content, general usetype="text/css"
Example 
<head>    <linkrel="stylesheet"type="text/css"href="style.css"/></head>

HTML Rel Rev Property

The rel attribute, the rel attribute, describes the relationship between the current page and the document specified by the href. Rev Property-The Rev property, which describes the relationship of the document specified by the HREF to the current page.
    The
    • Rel,rev property typically appears in the A,link label
    • property value
      • alternate --define alternate links
      • appendix  --to define additional information for a document
      • bookmark  --bookmarks
      • canonical --Spec page is a set of content Preferred version of a highly similar web page
      • Chapter  --Chapter of the current document
      • contents
      • Copyrigh T  --Copyright of the current document
      • glossary  --glossary
      • help  --link Helpful information
      • index  --indexing of the current document
        • The
      • next --records the next page of the document. (The browser can load this page in advance)
      • nofollow  --is not used to calculate PageRank
        • The
      • prev --records the previous page of the document. (defines the browser's back key)
      • Section  --as part of the document
      • start --notifies the search engine, the beginning of the document
      • stylesheet--  defines an externally loaded style sheet
      • subsection  --as a small part of a document
    • rel is an abbreviation for relationship

The Rel and Rev properties are the same, and they all belong to the linktypes property.

Example 
<linkrel="stylesheet"href="http://www.dreamdu.com/style.css"type="text/css">
The difference between rel and Rev

Rel and Rev have complementary roles , and rel specifies a forward link relationship, and Rev specifies a backlink relationship.

HTML Alternate Property value

Alternate property value--alternate is a value of linktypes, which the web designer can use to design alternate links
    • Alternate property values typically appear in the Rel,rev property
    • Alternate: The Meaning of " spare, substitute " in Chinese
Example

Define two different styles that users can choose from a browser (ie does not support this property)

<link rel="stylesheet" type="text/css" title="blue" href="dreamdublue.css" /><link rel="alternate stylesheet" type="text/css" title="red" href="dreamdured.css" />

The contents of http://www.dreamdu.com/can be read by http://www.dreamdu.com/feed/

<linkrel="alternate"type="application/rss+xml"href="http://www.dreamdu.com/feed/"/>

HTML Start Next Prev Property value

Start Next Prev Property value--Start next prev, all belong to LinkTypes, this value can usually prompt the browser to start the article, next, the URL of the previous article
    • The start next Prev property value usually appears in the Rel,rev property.
Example 
<link rel="start" type="text/html" href="http://www.dreamdu.com/xhtml/" /><link rel="prev" type="text/html" href="http://www.dreamdu.com/xhtml/alternate/" /><link rel="next" type="text/html" href="http://www.dreamdu.com/xhtml/attribute_rel/" />

HTML Rel Canonical Property value

Rel Canonical Property value--rel= "canonical" Property lets the search engine know the duplicate or similar page in the current website, which one page is the webmaster wants to let its crawl and ingest
    • The canonical property value is usually in the Rel attribute.
    • Citation URL: http://www.dreamdu.com/xhtml/rel_canonical/
    • canonical functional, can be understood as 301 of the accessibility of permanent redirection
    • canonical can be used with relative links or absolute links, but absolute links are recommended
    • Google's definition of canonical is that the canonical page is a preferred version of a set of highly similar pages
    • canonical: The Meaning of "model" in Chinese
Example 
<linkrel="canonical"href="http://dreamdu.com/"/>

Specifies the link (canonical link) that the Web page http://www.dreamdu.com/as the search engine should ingest. You can copy the above code to the head part of all non-canonical URLs, such as URLs www.dreamdu.com, www.dreamdu.com/default.html, www.dreamdu.com/index.html, etc.

 

Use of HTML styles

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
use of tag in html use of meta in html what use of in html what use of html language different types of art styles different styles of contemporary art different types of animation styles

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More