CSS Pocket Reference

最新推荐文章于 2024-09-17 23:15:58 发布

weixin_33896069

最新推荐文章于 2024-09-17 23:15:58 发布

阅读量212

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/LosersAFC/blog/213251

版权

2019独角兽企业重金招聘Python工程师标准>>>

#CSS Pocket Reference
##CHAPTER 1 Basic Concepts
###Adding Styles to HTML and XHTML
####Inline Styles
In HTML and XHTML, style information can be specified for an individual element via the style attribute. The value of a style attribute is a declaration block (see the section “Rule Structure” on page 5) without the curly braces:

<p style="color: red; background: yellow;">Look out!
This text is alarmingly presented!</p>

XML languages may or may not provide an equivalent capability; always check the language DTD to be certain.
###Embedded Style Sheets A style sheet can be embedded at the top of an HTML or XHTML document using the style element, which must appear within the head element.XML languages may or may not provide an equivalent capability; always check the language DTD to be certain.
###External Style Sheets
Another key advantage is that external style sheets are cached, which can help reduce bandwidth usage. An external style sheet can be referenced in one of the following three ways:

@import directive
<head><title>My Document</title> <style type="text/css"> @import url(site.css); @import url(navbar.css); @import url(footer.css); body {background: yellow;} </style> </head>

Note that @import directives can appear at the top (and, according to the specification, only at the top) of any style sheet. Thus, one style sheet could import another, which in turn would import a third.

link element

<head> <title>A Document</title> <link rel="stylesheet" type="text/css" href="basic.css" media="all"> <link rel="stylesheet" type="text/css" href="web.css" media="screen"> <link rel="stylesheet" type="text/css" href="paper.css" media="print"> </head>

It is also possible to link to alternate style sheets. If alternate style sheets are supplied, it is up to the user agent (or the author) to provide a means for the user to select one of the alternates:

<head>
<title>A Document</title>
<link rel="stylesheet" type="text/css" href="basic.css">
<link rel="alternate stylesheet" title="Classic"
type="text/css" href="oldschool.css">
<link rel="alternate stylesheet" title="Futuristic"
type="text/css" href="3000ad.css">
</head>

*xml-stylesheet processing instruction
In XML documents (such as XHTML documents sent with a mime-type of “text/xml,” “application/xml,” or “application/ xhtml+xml”), an xml-stylesheet processing instruction can be used to associate a style sheet with a document. Any xml-style sheet processing instructions must be placed in the prolog of an XML document. Multiple xml-stylesheet processing instructions are permitted. The media pseudo-attribute can be used to restrict a style sheet to one or more forms of media:

<?xml-stylesheet type="text/css" href="basic.css" media="all"?>

<?xml-stylesheet type="text/css" href="web.css" media="screen"?>

<?xml-stylesheet type="text/css" href="paper.css" media="print"?>

It is also possible to link to alternate style sheets with the xmlstylesheet processing instruction:

<?xml-stylesheet type="text/css" href="basic.css"?>

<?xml-stylesheet alternate="yes" title="Classic" type="text/css" href="oldschool.css"?>

<?xml-stylesheet alternate="yes" title="Futuristic" type="text/css" href="3000ad.css"?>

转载于:https://my.oschina.net/LosersAFC/blog/213251