您的位置：首页 > Web前端 > CSS

Using CSS in HTML

2015-06-09 19:58 537 查看

Table of Contents

CSS in style Attributes

CSS in style Elements

CSS in External Files

The link Element

The @import Instruction

CSS is intended to be used with HTML (or SVG). There are three ways you can include the CSS in your HTML file:

Embed CSS inside the 
style
attribute of HTML elements.

Embed CSS inside 
style
HTML elements

Link to external CSS files.

Each of these options will be described below.

CSS in style Attributes

The simplest way to include CSS in an HTML page is to embed the CSS inside the 
style
attribute of an HTML element. CSS properties embedded inside a 
style
attribute are only applied to the HTML element into which they are embedded. Here is how that looks:

<div style="border: 1px solid black;"> Style This! </div>

This example inserts the CSS property 
border
into the 
style
attribute of the 
div
element. The value of the
border
property is 
1px solid black
which sets the border of the 
div
element to a one pixel wide, black border.

If you need to set more than one CSS property inside the 
style
element, separate the CSS properties with a semicolon, like this:

<div style="border: 1px solid black; font-size: 18px;"> Style This! </div>


　　

This example sets both the 
border
CSS property and the 
font-size
CSS property.

CSS in style Elements

Another option of using CSS in HTML is to embed your CSS inside 
style
HTML elements inside your HTML page. If you need to apply the same styles to multiple HTML elements, this is much easier than setting the styles inside each HTML element in their 
style
attribute. Here is a CSS example using the 
style
element:

<style>
div {
border: 1px solid black;
}
</style>

<div> Style This! </div>
<div> Style This Too! </div>


　　

This example shows a single 
style
element which defines a CSS rule which is applied to all 
div
elements. Thus, the CSS property inside the 
style
element (the 
border
property) is applied to both of the 
div
elements in the example.

You can define more than one CSS rule inside the same 
style
element. Here is an example:

<style>
div {
border: 1px solid black;
}
span {
border: 1px solid blue;
}


　　

</style>

This example defines two CSS rules. The first CSS rule applied to all 
div
elements, and the second CSS rule is applied to all 
span
elements.

You can also embed more than one 
style
element within the same HTML page. Here is an example:

<style>
div {
border: 1px solid black;
}
</style>

<style>
span {
border: 1px solid blue;
}
</style>


　　

This example shows the CSS rules from the previous example embedded in their own 
style
element.

The 
style
elements can be embedded either inside the HTML 
head
element or the 
body
element. Here is an example:

<!DOCTYPE html>
<html>

<head>
<style>
div {
border: 1px solid black;
}
</style>
</head>

<body>

<style>
span {
border: 1px solid blue;
}
</style>

<div> Style This! </div>
<span> Style This Too! </span>

</body>
</html>


　　

In this example the CSS rule for 
div
elements is embedded inside its own 
style
element inside the 
head
HTML element, and the CSS rule for 
span
elements is embdded inside its own 
style
element inside the 
body
HTML element.

CSS in External Files

If you need to apply the same CSS styling to multiple HTML pages, it is easier to move your CSS rules to a CSS file, and then link to that file from your HTML pages. You can reference an external style sheet in two ways:

Via a 
link
element inside the 
head
element.

Via an 
@import
instruction inside a 
style
element.

Both of these mechanisms are explained in the following sections.

The link Element

You reference an external CSS file using the 
link
element (inside the 
head
element). Here is an example:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="my-css-file.css">
</head>

<body>
<div> Style This! </div>
<span> Style This Too! </span>

</body>
</html>


　　

This example links to the external CSS file named 
my-css-file.css
. This file has to be accessible online, and in this case it has to be located in the same directory as the HTML file. Thus, if the HTML file is located at
http://jenkov.com/my-website/my-html-file.html
, then the CSS file should be available at
http://jenkov.com/my-website/my-css-file.css
.

Actually, the 
href
attribute of the 
link
element can contain an absolute or relative URL. For more information about absolute and relative URLs, see HTML and URLs in my HTML4 tutorial.

If we move the CSS rules from the earlier examples to the 
my-cess-file.css
file, then the contents would look like this:

div {
border: 1px solid black;
}
span {
border: 1px solid blue;
}


　　

Notice that the CSS file has no 
style
element. It only has the CSS rules themselves.

The @import Instruction

You can also import an external CSS file from inside a 
style
element using the 
@import
instruction. Here is a CSS 
@import
example:

<style>
@import url('http://jenkov.com/my-website/my-css-file.css');
</style>


　　

This example will include the CSS file 
http://jenkov.com/my-website/my-css-file.css
into the HTML page which contains that 
style
element.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航