HTML CSS
HTML Style-CSS
CSS (Cascading Style Sheets) Style used to render HTML element tags.
Look! Styles and colors
##Try it - Example
This example demonstrates how to use add to <head> Part of the style information formats the HTML.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>Run Instance»Click the "Run Instance" button to view the online instance
How to use the style attribute to make a link without underline.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" style="text-decoration:none;">访问 php.cn!</a> </body> </html>
Run Instance»Click the "Run Instance" button to view the online instance
This example demonstrates how to link a tag to an external style sheet.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
Run instance »Click the "Run instance" button to view the online instance
How to use CSS
CSS was started in HTML 4 and was introduced to better render HTML elements.
CSS can be added to HTML in the following ways Medium:
Inline styles - use the "style" attribute in HTML elements
Internal style sheets - in The <head> area of the HTML document uses the <style> element to contain CSS
External references - use external CSS files
The best way is to reference the CSS file externally.
In the HTML tutorial on this site we use inline CSS styles to introduce examples. This is to simplify Examples also make it easier for you to edit code online and run examples online.
You can learn more CSS knowledge through the CSS tutorial CSS tutorial on this site.
Inline style
When special Inline styles can be used when styles need to be applied to individual elements. The way to use inline styles is to use the style attribute in the relevant tag. Style properties can contain any CSS property. The following example shows how to change the color and left margin of a paragraph.
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
To learn more styles, please visit CSS tutorial.
HTML style example - background color
Background-color attribute defines the background color of an element:
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body> </html>
Run Example »
Click the "Run Example" button to view the online example
The early background-color attribute (background-color) is defined using the bgcolor attribute.
HTML style example - font, font color, font size
We can use the font-family (font), color (color), and font-size (font size) attributes To define the font style:
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> </body> </html>
Run Example»
Click the "Run Example" button to view the online example
It is now common to use the font-family (font), color (color), and font-size (font size) attributes to define text styles instead of using the <font> tag.
HTML style example - text alignment
Use the text-align (text alignment) attribute to specify the horizontal and vertical alignment of text:
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
The text alignment property text-align replaces the old tag <center>.
Internal style sheet
When a single file requires special styling, you can use an internal style sheet. You can define an internal style sheet through the <style> tag in the <head> section:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>##External style sheet External style sheets are ideal when styles need to be applied to many pages. Using external style sheets, you can change the look of your entire site by changing one file.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML Style Tag
| Description | |
|---|---|
| Define text style | |
| Define resource reference address |
In HTML 4, originally Support for tags and attributes that define styles for HTML elements has been deprecated. These tags will not support new versions of HTML tags. The tags that are not recommended are: <font>, <center>, <strike>The attributes that are not recommended are: color and bgcolor.
