Chinese recognition statement: <meda charset = “utf-8”> HTML displayed in Chinese requires this sentence.
CSS rules consist of two main parts: selector, and one or more declarations:
Selector is usually the HTML element you need to change the style.
Each statement consists of a attribute and a value.
Property is the style attribute you want to set. Each attribute has a value. The attributes and values are separated by the colon.
The commonly used HTML elements are:
<Title> </Title> (Title)
<p> </p> (paragraph)
<body> </body> (main part)
<br/> It is the empty element (<br/> label definition definition).
<a href=”default.htm, </a> (link element)
When the CSS is chaotic, use <style> </style>
Now officially start CSS learning
1.ID and class selector
ID selector use standard:
<style>
#para1
// Define a name calledpara1
ID type
// Define a name calledpara1
ID type
{
text-align:center;
color:red;
}
</style>
<p id=”para1″>Hello World!</p>
Class selector use standard
（1）
<style>
.center // Define a name calledcenter
Class
Class
{
text-align:center;
}
</style>
<h1 class = “center”> Title centered </h1>
<p class = “center”> The paragraph is centered. </p>
（2）
<style>
p.center
// Define a name calledcenter
exclusive to the Class of P element
// Define a name calledcenter
exclusive to the Class of P element
{
text-align:center;
}
</style>
<p class=”center”>This paragraph will be center-aligned.</p>
2.CSS style table insertion
Insert style tables: There are three ways to insert style tables:
- (1) External style table
- <head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>//mystyle.css is an external style
</head>
// First define onemystyle.css style tables are stored. - (2) Internal style table
- <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head> - // Internal insertion<style></style>CSS style editing in it can define multiple element styles.
- (3) Inner United style
- <p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
- // Style settings in separate elements
(4) Multiple styles will be stacked into one
style table allows style information in multiple ways. The style can be stipulated in a single HTML element, in the head element of the HTML page, or in an external CSS file. You can even quote multiple external style tables inside the same HTML document.
layer stack sequence
When the same HTML element is defined by more than one style, which one will it use?
Generally speaking, all styles will be stacked in a new virtual style table according to the following rules, where the number 4 has the highest priority.
- Browser default settings
- outer style table
- Internal style table (located inside the <head> label)
- Inner couplet style (within HTML elements)
Therefore, the inner joint style (within HTML elements) has the highest priority right, which means that it will give priority to the following style declaration: the style statement in the label, the style statement in the external style table, or the browser in the browser Style declaration (default value).
3.
css background
css background
CSS attribute definition background effect:
- background-color // Background Color
- background-image // Background Picture
- background-repeat // Background style (horizontal or vertical, or not flat)
- background-attachment// Background Attachment:Define the background picture with the rolling shaft movement method
- background-position// Background Picture location
(1) Background color
In
CSS, the color value is usually defined in the following ways:
- Sixteen Entry -Ru: “# FF0000”
- RGB -Such as: “RGB (255,0,0)”
- color name -such as: “red”
Definition method: Background-COLOR:# B0C4DE;
background-color:rgb(255,0,0)
;
;
background-color:red
;
;
(2) Background picture definition:
background-image:url(‘paper.gif’);
(3) Background style:
background-image:url(‘gradient2.png’);
background-repeat:repeat-x; //
Generally use Background-Repeat: Repeat-X; Make the picture horizontally flat; no-Repeat
Generally use Background-Repeat: Repeat-X; Make the picture horizontally flat; no-Repeat
(4) Background Attachment
Value: scroll | Fixed | Inherit
scroll: With the rolling shaft background picture of the page, it will move
FIXED: With the rolling shaft background picture of the page, it will not move
Inherit: Inheritance
Initial value: Scroll
Inheritance: No
Applicable to: all elements
Background: Background .Aattachment: Attachment.
(5) Background location
background-position:right top;//
Represents the picture in the upper right part
Represents the picture in the upper right part
Summary：
When used in use, you can perform abbreviations: Background: #ffffFFFF URL (‘IMG_TREE.PNG’) No-Repeat Right Top;’IMG_TREE.PNG ‘; not flat; the picture location is on the right. Essence Essence Essence
4.
CSS text format
CSS text format
| attribute | Description |
|---|---|
| color | Set text color |
| direction | Set text direction. |
| letter-spacing | Set the character spacing |
| line-height | Setting height |
| text-align | Text in alignment elements |
| text-decoration | Add modification to text |
| text-indent | In the first line of the Chinese text in Chinese |
| text-shadow | Set text shadow |
| text-transform | Letter in the control element |
| unicode-bidi | Settings or whether the text is rewritten |
| vertical-align | Set the vertical alignment of the element |
| white-space | Set the blank processing method in the element |
| word-spacing | Set the word spacing |
（1）
color：
color：
Definition method: consistent with the background color.
（2）
direction: Text direction
direction: Text direction
| ltr | default. The direction of the text is from left to right. |
| rtl | The direction of text from right to left.
The |
| inherit | regulations should inherit the value of the Direction property from the parent element. |
（3）
letter-spacing: Text character spacing
letter-spacing: Text character spacing
Definition: Letter-spacing: 2px;
| normal | default. There is no extra space between characters. |
| length | Define the fixed space between characters (allowed negative values).
The |
| inherit | regulations should inherit the value of the Letter-Spacing property from the parent element. |
（4）
line-height：
line-height：
Definition method: line-height: 200%; (%)
line-height: 10px；（length）
line-height: 2; (number)
| normal | default. Set reasonable line spacing. |
| number | Set the number, this number will be multiplied with the current font size to set the line spacing. |
| length | Set a fixed spacing. |
| % | Percent pitch based on the current font size.
The |
| inherit | regulations should inherit the value of the LINE-Height attribute from the parent element. |
（5）
text-align：
text-align：
Definition: Text-Align: Right
| left | Set the text to the left. The default value: determined by the browser. |
| right | Set the text to the right. |
| center | Set the text into the middle. |
| justify | to achieve the effect of alignment at both ends.
The |
| inherit | regulations should inherit the value of the text-align attribute from the parent element. |
（6）
text-decoration
text-decoration
Definition method: text-decoration: overline; color definition: text-decoration-color: red (red (red (red (red (red (red (red (red
but：
Almost all mainstream browsers do not support the Text-DECORATION-COLOR property.
Almost all mainstream browsers do not support the Text-DECORATION-COLOR property.
Note:Firefox supports another attribute that can replace the attribute, that is, -moz-graw-decoration-color property.
）
| none | default. Define the standard text. |
| underline | Define a line under the text. |
| overline | Define a line on the text. |
| line-through | Define a line through the text. |
| blink | Define the flickering text.
The |
| inherit | regulations should inherit the value of the Text-DECORATION attribute from the parent element. |
（7）
text-indent
text-indent
Definition method: XT-indent: 50px;
| length | Define the fixed indentation. Default value: 0. |
| % | Define the percentage of the width of the parent element.
The |
| inherit | regulations should inherit the value of the Text-indent property from the parent element. |
（8）
text-shadow
text-shadow
Definition method: Text-shadow: 2px 2px 8px#ff0000;
| h-shadow | must. The position of the horizontal shadow. Make negative values. |
| v-shadow | must. The position of vertical shadow. Make negative values. |
| blur | Optional. Vague distance. |
| color | Optional. The color of the shadow. |
（9）
text-transform
text-transform
Definition method: Text-Transform: Uppercase;
| none | default. Definition text with standards with lowercase letters and uppercase letters. |
| capitalize | Each word in the text starts with capital letters. |
| uppercase | Definition only has uppercase letters. |
| lowercase | Define the non -uppercase letters, only lowercase letters. |
| inherit | The regulations should inherit the value of the Text-Transform attribute from the parent element. |
（10）
unicode-bidi
unicode-bidi
Definition method:unicode-bidi: normal|embed|bidi-override|intitial|inherit;
| normal | default. No additional embedded level. | |
| embed | Create an additional embedded level. | |
| bidi-override | Create an additional embedded level. Re -sort depending on the Direction property. | |
| initial | Set this attribute to its default value. Seeinitial。 | |
| inherit |
Inherit the attribute from the parent element. Seeinherit。
|
（11）
vertical-align
vertical-align
Definition method: vertical-align: text-top;
| baseline | default. The elements are placed on the baseline of the parent element. |
| sub | Vertical settlement of alignment text. |
| super | Vertical alignment of alignment text |
| top | Align the top of the element with the top of the highest element in the row |
| text-top | Align the top of the element with the top of the parent element font |
| middle | Place this element in the middle of the parent element. |
| bottom | Align the top of the element with the minimum element in the row. |
| text-bottom | Align the bottom end of the element with the bottom end of the parent element font. |
| length | |
| % | Use the percentage value of the “LINE-Height” property to arrange this element. Make negative value.
The |
| inherit | regulations should inherit the value of the Vertical-Align property from the parent element. |
（12）
white-space
white-space
Definition method: White-Space: Nowrap
| value | Description |
|---|---|
| normal | default. Blank will be ignored by the browser. |
| pre | blank will be retained by the browser. Its behavior is similar to the <pre> label in HTML. |
| nowrap | The text will not be changed, and the text will continue on the same line until the <br> label is encountered. |
| pre-wrap | Keep the blank sequence, but it is changed normally. |
| pre-line | merged blank sequence, but retain the exchange symbol. |
| inherit | The regulations should inherit the value of the White-Space attribute from the parent element. |
（13）
word-spacing
word-spacing
Definition method: word-spacing: 30px
| normal | default. Define the standard space between words. |
| length | Define the fixed space between words. |
| inherit | The regulations should inherit the value of the Word-Spacing attribute from the parent element. |
This blog is my JS learning notes -CSS to sort out these first, and will continue to update in the future.