Html css style basics, htmlcss Style

Html css style basics, htmlcss Style

I. css
1. What is css?
Cascading Style Sheet
A tool to change the style. To put it bluntly, it is to make our pages look good,
HTML encapsulates a tool like css at the underlying layer.

2. How to Use css
A. style and style
This keyword is written inside the tag. You can modify the tag style.

Note: Write it inside the tag! That is,> inside

3.css styles, divided into three types
A. Intra-row style sheets
<P> 1 <! -- Write in source code --> 2

 

Class selector:
1. Add the class attribute to the tag.
2. class selector. before writing, Add.

1 <! -- Write in source code --> 2 <p class = "qqq"> 111111111111 </p> 3 4 <! -- Write in CSS style --> 5. qqq {6 background-color: #0F9; 7}Class selector demonstration

Note: it must start.

Tag selector:

1 <style type = "text/css"> // style keyword 2 p {// p tag, tag selector, search for all corresponding tags 3 color: # F33; // The style to be changed. 4} 5 </style>Tag selector demo

Note: 1. Enter the type attribute in the style, and mark it as changing css.
2. Add a pair of {} after the selector {},
3. After each sentence changes the style, add it;
C. External Style Sheets
Written outside our webpage
1. Create a new css
2. Write the corresponding style in css
3. Import css styles to webpages
A. <link href = "1.css" rel =" stylesheet "type =" text/css "/>
B. <style type = "text/css"> @ import url ("css path"); </style>

D. style sheet priority
In-row style sheets> internal style sheets> external style sheets

E. selector priority
Id selector> class selector> label Selector

F. Union Selector
You can use a detailed description or address to find one or more corresponding tags.
P, # id,. class {}
It will change the label styles covered by all p, id, and class, separated by the English input method ",".

G. Intersection Selector
H3.cecond {}
The h3 tag will be searched first, and then the class name second in all h3 tags will be searched to modify the attributes.
There is nothing in the middle to connect
H. Descendant Selector

1 table tr. qq {2 background-color: # F00; 3}Descendant selector demonstration

You can perform a layer-by-layer search based on the written tag or selector until you finally find the desired
Tags, separated by "" in the middle

Summary:
The tag selector is directly applied to all HTML tags.
The class selector can be used multiple times on the page.
The id selector can be used only once on the page.

I. css attributes
1. Font Style:
Font-style: Set the font style
Font-weight: Set the font width
Font-size: Set the font size
Font-family: Set the font family
Font: set all the preceding settings in one attribute.

2. Text style:
Color: Set the font color.
Line-height: Set the Row height.
Text-align: set text alignment
Text-decoration: set text decoration, such as underline, none, line-through

3. Background attributes:
Background-color: Set the background color.
Background-image: Set the background image
Background-position: Set the background position
Background-repeat: sets the filling mode of the background.
Set the background and set all the preceding settings in one attribute.

4. List attributes:
List-style-image: sets the list as a list identifier.
List-style-type: Set the ID type of the list, disc solid circle, circle hollow circle,
Square
List-style: set all the preceding settings in one attribute.

5. pseudo category of Hyperlink
A: link {unaccessed link
Color: # F00;
}
A: visited {accessed Link
Color: #6F6;
}
A: hover {hover the mouse to change the style
Color: # FCC;
}
A: active {change the style with a long mouse
Background-color: # 0FF;
}

6. cursor attributes
Set a custom mouse style for URLs
Default cursor
Pointer of the pointer hyperlink
Wait program busy
Help indicates available help
Text indicates text
Crosshair cross
Move movable pointer

4. Box Model
A. What is a box model?
Put the corresponding elements into a container for corresponding processing
While moving or processing the box model, the entire element in the box model will follow
Processed.

Margin:
Padding:
Padding: top, left, right, bottom
Margin:
Margin: top, left, right, bottom
B. Floating
What is floating?
The principle is align.

Floating attributes:
Left: left floating
Right: right floating
None: Not Floating

Clear property: clear floating, clear all both

C. overflow attributes
How to deal with element overflow?

Visible default
Auto
Hidden hide
Add a scroll bar to scroll

D. iframe tag
Inline framework.
You can import other things.

<Iframe src = "1.html" width = "1366px" height = "200" scrolling = "no"
Frameborder = "0">
Src: import other page paths
Width: Adjust the width of the imported page. px is the unit and can be left blank. The default value is px.
Height: adjust the height of the imported page
Scrolling: whether to display the scroll bar
Frameborder: Indicates whether to display borders. 1 indicates display, and 0 indicates not display.

E. position attributes
Locate.
Relative positioning:
Relative, relative to his original location, move.

Absolute positioning:
Absolute,

Fixed
Locate somewhere on the webpage, which remains unchanged.
Static

Offset Value Setting
X axis (left and right Attributes) and Y axis (top and bottom attributes)
Optional values: pixel or percentage