About css and css added method

What is css?

CSS is short for Cascading Style Sheets, CSS is used to beautify the Chinese website called Cascading Style Sheets, used to control the performance of Web page data, you can make the performance of the web page content and data separation.

The basic syntax of css

1. Selector {attribute: value; attribute: value; .......}. Note: a colon (:) spaced between attributes and attribute values, defining a plurality of attributes, semicolon between the English input attributes; spaced.

Width: 20px; width

Height: 20px; height

Background-color: red; background color

font-size: 24px; text size

text-align: left | center | right horizontal alignment of content

text-indent: 2em; first line indent

Color: red; text color

There are several methods to add css? How has the format?

1. the line style: inline style type is set in the CSS style attribute tag. In this way does not reflect the advantages of CSS is not recommended!

<!--行内添加法-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="color:red;">
css行内添加法
</p>
</body>
</html>

 

2. The embedded style: even if there is a common css code, also need to be defined for little css file under the code are not many situations. If there are many pages in a site, each file will be larger, post-maintenance is also very difficult.

<! - inline styles ->
<! DOCTYPE HTML>
<HTML lang = "EN">
<style type = "text / CSS"> {P Color: Red;} </ style>
<head>
<Meta = charset "UTF-. 8">
<title> the Document </ title>
</ head>
<body>
<P> inline style representation </ P>
</ body>
</ HTML>

3. separate file style: page structure css style html code and the code completely separate maintenance more convenient, need to change the style of the site, only need to modify the internal public can refer to multiple external style sheet file in the same html file!

css document:
the style.css
P {Colo: Red; / * set the text color * /}

html file:

<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<Link the rel = "this stylesheet" type = "text / CSS" the href = "external file /style.css" />
<head>
<body>
<P> CSS method of adding a separate file </ P>
</ body>
</ HTML>

css priority adding methods to use that?

1. Multiple patterns may be stacked, may be covered

2. Style priority in accordance with the "principle of proximity"

3. inline style> inline style> Links Style> browser's default style!

Guess you like

Origin www.cnblogs.com/niuyaomin/p/11291970.html