Home >Web Front-end >HTML Tutorial >CSS basic knowledge study notes_html/css_WEB-ITnose

CSS basic knowledge study notes_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:42:391016browse

1. Explanation of basic css styles

1.1 css background
background-attachment: whether the background image is fixed or scrolls with the rest of the page
background-color: Set the background color of the element
background-image: Set the image as the background
background-position: Set the starting position of the background image
background-repeat: Set whether and how the background image repeats
background- size: Specifies the size of the background image
background-orgin: Specifies the positioning area of ​​the image
background-clip: Specifies the drawing area of ​​the background
1.2 css text
color: Text color
direction: text direction
line-height: line height
letter-spacing: character spacing
text-align: aligning elements
text-decoration: adding decoration to text
text- indent: Indent the first line of text in the element
text-transform: Letters in the element
unicode-bidi: Set the text direction
white-space: How to handle whitespace in the element
word-spacing: word spacing
text-wrap: automatic line wrapping
text-shadow: add shadow to text
1.3 css font
font-family: set font family
font-size :Set font size
font-style :Set font style
fongt-variant: Display text in small caps or normal font
font-weight: Set font thickness
1.4 css link
a:link ordinary, unvisited link
a:visited link that the user has visited
a:hover mouse pointer is above the link
a:active link that was clicked Moment
text-decoration: This attribute is mostly used to remove underlines in links
background-color: background color
1.5 css list
CSS list attributes can be placed flexibly, Change the logo, or use the image as the list item logo
list-style: abbreviation for list item
list-style-image: list item image
list-style-position: list item logo position
list- style-type: List type
1.6 css table
Table border:

#tb,th,td,tr{ border: 1px solid blue; }

Collapse border:

#tb{ border-collapse: collapse; }

1.7 css Outline
outline: Set the outline attributes
outline-color: Set the color of the outline
outline-style: Set the style of the outline
outline-width: Set the width of the outline

2. css box model

inner margin:
outside the content, inside the border
padding set all margins
padding-bottom, left, right, top individually set a certain direction Margins
Border:
can create excellent borders and can be used for any element
border-style: 10 styles are defined
border-(top, bottom, left, right)-style: define single-sided style
border-width: border width setting
border-(top, bottom, right, left)-width single border width
border-color border color
border-(top, left, bottom, right)-color single border color
CSS3 border:
border-radius rounded border
box-shadow border shadow
border-image border image
margin:
margin overall margin
margin-(top, bottom, left, right) unilateral margin
outer margin Distance merging: is a concept of superposition

3. css positioning and floating

css positioning:
position: static, relative, absolute, fixed;
top
left
right
bottom
overflow
….
css float:
float properties: left, right, none, inherit
clear property : Remove floating attributes
left, right: Remove left and right floats
both: Remove both left and right floats
inherit: Inherit clear value from parent

4.css selector

Derived selector:

li strong{    color:red;}

Specify the strong tag effect in the list item. The already defined effect will not be overwritten.

id selector:

#id { color:red; }

The id selector can be used in combination with the derived selector, but the id selector is not suitable for use in combination with id

Class selector:

.pclass{ color:red; }

Class selector can also be used in combination with derived selector

Attribute selector:
Default attribute selector:

[title]{ color:red; }   

Named attribute selector:

[title=te]{ color:red; }

In IE6 and lower versions, attribute selector is not supported
Attribute selector It must match exactly to work

Child element selector:
uses the > symbol, but it can only be positioned one level at a time

Adjacent sibling selector:
In the form of a label tag, you only need to have a simple understanding of this

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn