12th Chapter CSS Primer

12th Chapter CSS Primer
Learning Essentials:
1. Using CSS
2. Three different ways
3. Cascading and Inheritance

This chapter focuses on CSS (cascading style sheets) in HTML5, which is used to represent the appearance of HTML documents.
Layout and formatting of the type.

A Using CSS
CSS styles consist of one or more semicolon-delimited style declarations. The style of each declaration contains a CSS
Property and property values.
<
P style= "color:red;font-size:50px;" > This is a section of text </p>
Explanation: Style is an inline style attribute. Color is a property of colors, and red is the value of the color attribute; font-size
is the font Size property, and 50px is the font Size property value.
Two Three different ways
There are three ways to create a CSS style sheet: 1. Element inline style; 2. Document inline style; 3. Externally introduced styles.
1. Element inline style
<
P style= "color:red;font-size:50px;" > This is a section of text </p>
Explanation: The current element is declared using the Style property.
2. Document inline style
<style type= "Text/css" >
p {
Color:blue;
font-size:40px;
}

</style>
P> This is a text </p>
Explanation: Creates a <style> element between the Related CSS.
3. External reference style
<
Link rel= "stylesheet" type= "Text/css" href= "Style.css" >
/
/style.css
@charset "Utf-8";
p {

Color:green;
font-size:30px;

}
Explanation: Many times, a large number of HTML pages use the same group of CSS. You can then add these CSS styles
Save it in a separate. css file, and then introduce it through the <link> element. @charset "Utf-8"
Indicates that the character encoding of the CSS is set, and the default is Utf-8 if not written. If you have more than one. css file, you can use
@
Import imports into. css files. Only, performance is inferior to multiple <link> links.
Three Cascading and inheritance
The so-called style overlay: refers to the overlapping styles created by the same element by setting the style sheet in different ways. Style
Table inheritance: Refers to a nested element that gets its parent element style. There is also a style called browser style, which is the
Elements that are added by default when this browser is run.

1 Browser Styles
<b> This element implies bold style </b>
Span style= "font-weight:bold;" > This element through style bold </span>
Explaining that the:<b> element is an implied style with bold, while the <span> element has no hidden style, through style
property to set the style.
2
. Style Overlay
Style overlays are performed in five ways, and if the styles are the same, conflict substitution can occur for example. At this point, it's
The priority order is more important. The following priority levels are from low to High:

1). browser style (the element itself carries the style);
2). Externally introduced styles (using <link> introduced styles);
3). Document inline style (using <style> element settings);
4). Element inline style (set with Style property).
/

/element Inline
<p style= "color:red;font-size:30px;" > I will be three ways to overlay the style </p>
/
<
/Document Inline
Style type= "Text/css" >
p {
Color:blue;
Font-weight:bold;
}
<
/style>
/
@
/External Introduction
CharSet "Utf-8";
p {
Color:green;

Font-style:italic;
}
If a style is replaced by a high priority, but you want to implement this style scheme, you can use this scheme
Marked as an important style (important).
/
/forcibly set the highest priority
Color:green!important;

3. Style inheritance
If an element does not have a style associated with the parent element, then the parent element's style is used by the inheritance mechanism
Integration down.
The/<b> element inherits the style of the <p> element
P style= "color:red;" > This is <b>HTML5</b></p>
/
<
Style inheritance applies only to the appearance of the element (text, color, font, and so on), while the element's layout style on the page
Will not be inherited. If you inherit this style, you must use forced inheritance: inherit.
/
<
/Forced Inheritance layout style
P> this is <b>HTML5</b></p>
<
Style type= "Text/css" >
p {
border:1px solid red;
Border:inherit;
}
D =
}
<
/style>

Example
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>css Getting Started </title>
<!--<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<link rel= "stylesheet" type= "Text/css" href= "Test.css" >-
<style type= "Text/css" >
/*p {
color:red;
font-size:30px;
}*/
/*p {
Color:green;
font-size:30px;
Font-style:italic;
}*/
p {
color:red;
border:1px solid Orange;
}
D =
Border:inherit;
}
</style>
<body>

<!--<p style= "color:red;font-size:50px;" > This is a section of text </p>-

<!--<p> This is another text </p>--

<!--<p> This is the third paragraph <b> text </b></p>--

<!--<b>b element itself implicitly bold style </b>

<span style= "Font-weight:bold;" The >span element is not suppressed, but can be set to bold </span>

<b style= "Font-weight:normal;" > Remove the implied style of the B element </b>

<!--<p style= "Font-size:50px;color:orange;" > I want to overlay three ways to define styles </p>

<p> this is <b>HTML5</b></p>

</body>

@charset: "Utf-8";

p{
color:red;
font-size:50px;
}

. css
@charset "Utf-8";
@import
p{
color:red;
font-size:50px;
}

12th Chapter CSS Primer