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

html - style 元素

2016-07-29 13:58 369 查看

style element

Why Need It

make your page visually interesting

A concept: Information + Style = Visual Output

CSS file

Linking To A CSS File

Inside head, add the following code

<link href = 'mystyle.css' rel = 'stylesheet' type = 'sheet'>

Commonly Used Style Properties

color – for text color

background – background color

font-family – text fonts

font-size – text sizes

text-align(对齐) – text alignment

Defining Style Inside Head

Simple Example

<head>
<style>
h1{color:purple}
p{color:blue}
</style>
</head>

Use A Unique ID

Use #element-ID for target style

<style>
#theElementID{color:blue}
</style>

An example below

<html>
<body>
<ul>
<ul id = 'rainbowColors'>
<li id = 'red'>Red</li>
<li id = 'orange'>Orange</li>
<li id = 'yellow'>Yellow</li>
<li id = 'green'>Green</li>
<li id = 'blue'>Blue</li>
<li id = 'indigo'>Indigo</li>
<li id = 'violet'>Violet</li>
</ul>
</body>
</html>

<head>
<style>
#rainbowColors{background:grey}
#red{background:red}
#orange{background:orange}
#yellow{background:yellow}
#green{background:green}
#blue{background:blue}
#indigo{background:indigo}
#violet{background:violet}
</style>
</head>

The page looks like

Use Class

Use .class-name for special class defining a style class

Specify the ‘class’ property of an element while using it

<style>
.class-name{color:blue; background:yellow}
</style>

An example

<html>
<head>
<style>
.zappy{color:purple; background:yellow}
.wow{color:blue; backgroud:lightgrey}
</style>
</head>
<body>
<h1 class = 'zappy'>My first heading</h1>
<p class = 'wow'>My first paragraph</p>
</body>
</html>

One thing to remember:

one element can have multiple classes(space is used)

An example

<p class = 'zappy wow'>My first paragraph</p>

Inline Style

A style rule applied to a particular element

<p style = 'text-align:right'>Welcome.</p>

Context Control

Apply a style rule to a specific context

<style>
ul li{background:yellow}
</style>

The style above is only for li element inside ul( unordered list ).

Pseudo-classes

Pseudo-classes is sort of relative to particular behavior.

Some examples below

link means a link

a:link{color:red}

visited means a link that has been already visited

a:visited{color:green}

active(点击的瞬间会呈现的样式)

a:active{color:blue}

empty means an empty element

p:empty{color:red}

hover(鼠标悬停)

a:hover{color:pink}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航