1. CSS
1.1. Inline elements, block-level elements
1.1.1. Types of elements
CSS divides elements into inline and block-level elements, each with their own characteristics and behavioral habits.
Div, H1, or p elements are often referred to as block-level elements. This means that these elements are displayed as a piece of content, a "block box", also known as a block-level element. Block-level elements are exclusive on a single line when the page is laid out.
In contrast, elements such as span and strong are called "inline elements," because their content is displayed in rows, or inline boxes, also known as inline elements. Inline elements do not have a single row in the layout page. The vertical padding, borders, and margins do not affect the height of the inline box at the same time.
You can modify the type of the box by using the Display property.
1.2. CSS Overview
1.2.1. What is CSS?
CSS is a cascading style sheet (cascading style Sheets) used to define the display of a Web page. It can solve the duplication of style definition in HTML code, improve the maintainability of later style code, and enhance the function of the Web page display effect. Simple sentence: CSS separates the content of the Web page from the display style, which improves the display function.
1.2.2. Two common ways to organize Web pages
There are two main ways to organize page structure:
Table Nesting Table
Div+css
The early Web page is the form of the form of a table, this way for a relatively simple page effect is fair, once the page is slightly more complex, use it is very troublesome, most of the current web pages are mainly used Div+css way, only in the local use of table nesting
1.3. How to introduce CSS
1.3.1. Style Property Mode
Use the Style property in the label to change the display style for each label.
Cases:
<p style= "color: #FFFFFF" >
P Label paragraph content.
</p>
This method is flexible, but it is cumbersome for the same style definition for multiple identical labels, which is suitable for partial modification.
1.3.2. Style label mode
Add a style tag to the head tag to make a uniform change to multiple labels.
<style type= "Text/css" >
p {color: #FF0000;}
</style>
This way you can set the style of a single page uniformly, but not for the local flexibility.
1.3.3. How to link
This is done through the link tag in the head tag, provided that you have a fixed CSS file first.
Cases:
<link rel= "stylesheet" type= "Text/css" href= "css_3.css" media= "screen"/>
Note: Multiple CSS files can be linked through multiple link tags. The repeating style is subject to the CSS style that the last link comes in.
1.3.4. Priority of Introduction mode
From top to bottom, from outside to inside. The priority level is from low to high.
1.4. CSS code format
1.4.1. CSS code format
Selector Name {property Name: Property value 1; Property value 2 property value 3; Property Name: Property value; ...}
Separating attributes from attributes by semicolons
property is concatenated with the property value directly by using a colon
If a property has multiple values, then multiple values are separated by a space.
1.5. CSS Basic Selector
1.5.1. HTML Tag name Selector
The HTML tag name selector. Using the tag name of HTML
div{
color:red;
｝
*{
color:red;
}
1.5.2. Class Selector
Class selector. Actually use the class attribute in the tag. Format is. class name
. aaa{
color:red;
}
<div class= "AAA" >hahahaha</div>
1.5.3. ID Selector
The ID selector. In fact, the id attribute in the tag is used. Format is #id name
#bbb {
color:red;
}
<div id= "BBB" >hehehe</div>
1.6. css Extension Selector
1.6.1. Descendant Selector
You can use this selector when you select a descendant element in the selected element of the parent selector that conforms to the child selector.
Cases:
p {color: #00FF00;}
P B {color: #FF000;}
<p>p tags <b> andy lau </b><a href= "#" ><b> paragraph </b> style </a></p>
<p>p Label paragraph </p>
1.6.2. Child element Selectors
Select the child element in the selected element of the parent selector that conforms to the child selector, which can be used with this selector.
Child selectors can only select elements that are child elements of an element, as compared to descendant selectors.
H1 > Strong {color:red;}
This rule turns the two strong elements below the first H1 red, but the strong in the second H1 is unaffected:
This is <strong>very</strong> <strong>very</strong> important.
This is <em>really <strong>very</strong></em> important.
1.6.3. Grouping selectors
Apply this selector when you have the same style settings for multiple different selectors.
Cases:
P,div {color: #FF0000;}
The <p>p tab displays the paragraph. </p>
<div>div Label Display paragraph </div>
Note: Several different selectors are separated by commas.
1.6.4. Property Selector
The property selector can select elements based on their attributes and property values.
If you want to turn all the elements of the containing attribute (title) into red, you can write:
*[title] {color:red;}
Similar to the above, you can apply styles only to anchors with an href attribute (a element):
A[href] {color:red;}
In order to set the text of HTML hyperlinks with both href and title attributes to red, you can write this:
A[href][title] {color:red;}
Suppose you want to select only those planet elements with the Moons property value of 1:
planet[moons= "1"] {color:red;}
The code above turns the second element in the following markup into red, but the first and third elements are unaffected:
<planet>Venus</planet>
<planet moons= "1" >Earth</planet>
<planet moons= "2" >Mars</planet>
Alignment
Text-align
Sets or retrieves the alignment of text in an object.
Take value:
Left (align right) center (center align) justify (justify)
List Properties
List-style
Set list item related styles
The List-style-position
Sets or retrieves how the list item markers as objects are arranged according to the text.
List-style-type
Sets or retrieves the preset markup used by the object's list item.
Font settings
Font
Fonts setting, which is a composite property that can be set sequentially as follows, or can be set individually
Font:font-style | | font-variant | | font-weight | | | font-siz e | | Line-height | | font-family
Font-style
Italic settings
font-weight
Font weight
font-size
Font size
Color
Font Color
font-family
Font settings
text-decoration
Font underline
Text-underline-position
Underline position
Line-height
Line height. That is, the distance between the bottom of the font and the top of the font.
Width setting
Height
Height
Width
Width
Background setting
background, which is a composite property, you can set the following properties in turn, or you can set
background individually: Background-color | | Background-image | | Background-repeat | | background-attachment | | Background-position
Background settings
Background-color
Background color settings
Background-image
background picture settings
Background-repeat
Sets or retrieves the background image of an object and how to layout
Background-position
Set or retrieve the background image position of an object
Basic understanding of CSS
