HTML CSS

one. Basic introduction to CSS

Cascading Style Sheet (Cascading Style Sheet) is referred to as "CSS", usually also known as "Style Sheet (Style Sheet)", which is used to style web pages. Designed. For example, if you want the link word to be blue when it is not clicked, and then turn red and underlined when the mouse is moved over it, this is a style. By setting up a style sheet, you can uniformly control the display attributes of each mark in HTML. Cascading style sheets allow people to more effectively control the appearance of web pages. Using cascading style sheets, you can expand your ability to precisely specify the position and appearance of web page elements and create special effects.

CSS is the abbreviation of English CascadingStyle Sheets (Cascading Style Sheets). It is a computer language used to express file styles such as HTML or XML. The latest version of CSS is CSS3, which is a style design language that can truly separate web page performance and content. Compared with the performance of traditional HTML, CSS can perform pixel-level precise control over the position and layout of objects in web pages, supports almost all font sizes and styles, has the ability to edit web page objects and model styles, and can perform preliminary interactions. Design is currently the best expressive design language based on text display. CSS can simplify or optimize writing methods according to the understanding ability of different users, making it highly readable for all types of people.

two. How to use CSS

There are three ways to use style sheets on your site pages:

Inline styles - used in HTML elements" style" attribute

Internal style sheet - Use the <style> element in the <head> area of the HTML document to include CSS

External References - Using external CSS files

Each method has its advantages and disadvantages:

When you want to apply the same style consistently to all or part of the pages on your site , you can use external reference style sheets. Defining styles in one or more external style sheets and linking them to all web pages ensures a consistent look across all web pages. If people decide to change the style, they only need to modify it once in the external style sheet, and the change will be reflected on all pages linked to the style sheet. Usually external style sheets have .css as the file extension, such as the common style Common.css in a news release system. Then link it in the page that requires this style, such as:

<link href="/css/Common.css" rel="stylesheet" type="text/css"/ >

When people just want to define the style of the current web page, internal style sheets can be used. An internal style sheet is a cascading style sheet that is "embedded" within the <HEAD> tag of a web page. Styles in embedded style sheets can only be used on the same web page. Such as:

<style type="text/css">

body {background:grey;}

</style>

Use inline styles to apply cascading style sheet attributes to web page elements. For example:

<pstyle="@importurl('style3.css');">CSS document</p>



If the web page links to an external style sheet, inline or internal styles created for the web page will extend or override the specified attributes in the external style sheet.

To use styles from an external style sheet on a web page, link the web page to the style sheet by using the Style Sheet Link command on the Format menu. You can link one or several style sheets to the current web page in Web page view mode, to a selected web page in a folder list, or to all web pages on the site.

The Style box lists standard HTML tags, such as heading 1, as well as class or ID selectors contained in embedded style sheets or external style sheets linked to the web page. To apply a style to a web page element, select the style and click the style or selector in the Style box.

In Microsoft FrontPage 2000, certain formatting properties are automatically applied as inline styles. For example: If you use the Borders & Shadows command (on the Format menu) to apply a box around a regular paragraph, FrontPage writes the formatting information as the paragraph mark's inline style properties (for example: <pstyle=" border-style: solid">). However, the application of some properties requires the use of CSS, and others requires the use of HTML. If people only want to apply inline styles using CSS, they can use the Styles button (located in the Web element's Properties dialog box) to apply class or ID selectors or inline styles.

Example 1

Background-color attribute defines the background color of an element:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body style="background-color: green;">
<h2 style="background-color: red;">标题</h2>
<p style="background-color: blue;">内容</p>
</body>
</html>

Example 2

##Use font-family (font), color (color), and font-size (font size) ) attribute to define the font style:

<!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>

Example 3

Use the text-align (text alignment) attribute to specify the horizontal and vertical text Alignment:

<!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>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2 style="background-color: yellow;">标题</h2> <p style="text-align:center;">居中对齐的内容</p> <p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p> </body> </html>

submit Reset Code

Automatic operation