CSS Basics Learning Notes

Source: Internet
Author: User
Tags border color

1.CSS Basic Style explanation

1.1 CSS Background
Background-attachment: Whether the background image is fixed or scrolled along with the rest of the page
Background-color: Setting the background color of an element
Background-image: Set the picture to the background
Background-position: Set the starting position of the background picture
Background-repeat: Set whether and how the background picture repeats
Background-size: Specify the size of the background image
Background-orgin: Specify the location area of the picture
Background-clip: The drawing area of the specified background
1.2 css Text
Color: Text Colors
Direction: Text Direction
Line-height: Row Height
Letter-spacing: Character Spacing
Text-align: Aligning elements
Text-decoration: adding adornments to Text
Text-indent: Indent the first line of text in an element
Text-transform: Letters in an element
Unicode-bidi: Setting text orientation
White-space: How whitespace is handled in an element
Word-spacing: Word Spacing
Text-wrap: Wrap Line
Text-shadow: Adding a shadow to text
1.3 CSS Fonts
font-family: Set Font family
Font-size: Setting the font size
Font-style: Setting font style
Fongt-variant: Display text in small uppercase font or normal font
Font-weight: Setting the weight of a font
1.4 CSS Links
A:link Common, inaccessible links
a:visited user has visited the link
A:hover the mouse pointer is over the link
A:active the moment the link was clicked
Text-decoration: This attribute is mostly used to remove underscores in links
Background-color: Background color
1.5 CSS List
CSS List properties can be flexibly placed, changed, or marked as a list item
List-style: Abbreviated list items
List-style-image: List item image
List-style-position: List Item flag location
List-style-type: List Type
1.6 CSS Tables
Table border:

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

Collapse border:

#tb{    border-collapse: collapse;}

1.7 css Outlines
Outline: Setting profile properties
Outline-color: Set the color of the outline
Outline-style: Setting the style of the outline
Outline-width: Sets the width of the contour

2.CSS Box Model

Inner margin:
Outside the content, inside the border
Padding setting all margins
Padding-bottom, left, right, top individually set the margin of a direction
Creates a well-performing border and can be used with any element
Border-style: 10 Styles defined
border-(top,bottom,left,right)-style: Defining a 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 Round Corner border
Box-shadow Border Shadow
Border-image Border Picture
Outer margin:
Margin overall margins
margin-(top,bottom,left,right) unilateral margin
Margin Merging: a concept of superposition

3.CSS positioning and floating

CSS positioning:
Position:static, relative, absolute, fixed;
CSS floating:
Float Property: Left,right,none,inherit
Clear property: Remove Floating property
Left,right: Remove left and right floating
Both: the left and right side floats are removed
Inherit: Inherit from parent to clear value

4.css Selector

Derived selectors:

li strong{    color:red;}

Specifically, the strong label effect in the list item has been defined so that the effect is not overwritten.

ID selector:

#id {    color:red;}

The ID selector can be used in combination with a derived selector, and the ID selector does not work with the ID combination

Class selector:

.pclass{    color:red;}

Class selectors can also be combined with derived selectors

Property selector:
Lack of provincial-only selector:

[title]{    color:red;}   

Property selector with a name:

[title=te]{    color:red;}

Attribute selectors are not supported in IE6 and lower versions
The property selector must match exactly before it works

Child element Selector:
Use of > symbols, but only a first-level positioning

Adjacent sibling selector:
Label + Label form, this as long as a simple understanding can be

CSS Basics Learning Notes

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.