Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you the relevant knowledge points of HTML CSS style example analysis, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you have some gains after reading this article, let's take a look at it together.

I. CSS

1. What is CSS?

Cascading Style Sheet Cascading Style Sheet

A tool for changing styles, to put it bluntly, is to make our pages look good.

The HTML underlayer encapsulates a tool like CSS.

2. How to use CSS

a, style, style

This keyword is written inside the label, and the label style can be modified.

Note: Write inside the label! That is, inside.

3.CSS style, divided into three types

a. In-line style sheets

111111111111

Where: style="color:#0FC" is to change the style of the current label.

b. Internal style sheets

Selector: tells the program whose style we want to change.

id selector:

1. Add the id attribute to the tag

Before writing, add #

Class selector:

1. Add the class attribute to the label

2, class selector, before writing, to add.

Note: to. beginning

Label Selector:

Note:

1. Type attribute should be written in style to indicate that this is a change in CSS.

2. Add a pair of {} after the selector,

3. After each sentence changes style, add;

c. External style sheets

written on the outside of our website.

1. Create a CSS

2. Write the corresponding style in CSS

3. Import CSS styles into web pages

a、

b.@import url ("css path");

d. Priority of style sheets

Inline Style Sheets> Internal Style Sheets> External Style Sheets

e. Priority of selector

id selector> Class selector> Label selector

f. Union selector

Find a label or group of labels by a detailed description or address

p,#id,.class{}

All label styles covered by p, id and class will be changed, separated by English input method ","

g. Intersection selector

h4.cecond{}

It will first look for h4 tags, and then look for all tags with class name second in h4 tags to modify attributes

There's nothing in between to connect.

h. Descendant selector

According to the label or selector written, it will search layer by layer until it finally finds the required label, separated by " ".

Summary:

Tag selector is applied directly to all HTML tags

Class selectors can be used multiple times on a page

id selector can only be used once on a page

i, CSS attribute

1. Font style:

font-style: Set font style

font-weight: Set font weight

font-size: Set font size

font-family: Set font family

font: Set all the above settings in one attribute

2. Text style:

color: Set font color

line-height: Set the line height

text-align: Sets the alignment of text

text-decoration: Set the decoration of the text, for example: underline, none, line-through

3. Background attributes:

background-color: Sets the background color

background-image: Set background image

background-position: Sets the position of the background

background-repeat: Sets how the background is filled

background Set the background, set all the above settings in one property

4. List attributes:

list-style-image: Sets the list to list identity

list-style-type: Sets the identification type of the list, disc solid circle, circle hollow circle,

square square

list-style: Set all the above settings in one attribute

5. Hyperlinked pseudo-classes

a:link{Unvisited link

color:#F00;

}

a:visited{links visited

color:#6F6;

}

a:hover{mouse hover to change style

color:#FCC;

}

a:active{mouse long press to change style

background-color:#0FF;

}

6. Cursor attribute

url Set custom mouse style

default default cursor

pointer to hyperlink

The wait program is busy.

help indicates available help

text indicates text

crosshair cruciform

move movable pointer

7. Box model

A: What is a box model?

Put the corresponding elements into a container and you can do the corresponding processing.

As you move or manipulate the box model, the entire element in the box model follows.

processed.

Margin:

Inner margin:

padding：top,left,right,bottom

Outside Distance:

margin：top,left,right,bottom

b. Floating

What is floating?

Actually, the principle is align

Floating Attributes:

Left: left float

Right: Right float

none: not floating

clear attribute: clear float, both clear all

c. overflow attribute

What to do when an element overflows

visible default

auto automatically

hidden hidden

scroll plus scroll bar

d. iframe label

inline frame.

You can import other things.

src: Import other page paths

width: adjust the width of the imported page, px is the unit, you can not add, the default is px

height: Adjust the height of the imported page

scrolling: whether the scroll bar is displayed

frameorder: whether to display the border, 1 means display, 0 means not display

e, position attribute

Location.

Relative positioning:

Relatively, move relative to his original position.

Absolute positioning:

absolute，

fixed

Go somewhere on the web page and stay the same.

static

Setting of offset value

X axis (left, right attribute) and Y axis (top, bottom attribute)

Available values: pixel or percentage

The above is "HTML CSS style example analysis" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.