CSS Learning Notes

0. CSS Concept
Cascading style sheets (cascading style Sheets), the origin of CSS will not have to say more. It is easy to understand a standard that is specified by the World Wide Web Consortium to enrich the layout and appearance of HTML pages.

1. CSS instance:
CSS rules consist primarily of selectors and at least one declaration:
/* Comment Format */
p{
color:red;? Text-align:center;
}

2. ID selector and CALSS selector
/*id is the only tag with the label ID idname that will follow the following style */
#idName
{
Text-align:center;
Color:red
}
/* Class is a kind of label, the style sheet scope under the page all labels in the class name ClassName will follow the following style */
. className
{
Text-align:center;
Color:red
}

3, Priority: 1,2,3,4 priority in order to increase
1. Browser Default Style
2. External style
3. Internal style
4. Inline style
Multiple style sheets overlap as one

External Style Representation example
<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css" >

Example of an internal style representation:
<style>
hr
{
Color:sienna;
}
p {
margin-left:20px;
}
body{
Background-image:url ("Images/image.gif");
}
</style>

Inline Style Representation Example: (write style in tag)
<p style= "color:sienna;margin-left:20px" >this is a paragraph.</p>

4. CSS background:
Background-color:
Body {
/* How to represent colors in CSS:
Hex: "#ff0000"
RGB: "RGB (255,0,0)"
Color name: "Red"
*/
Background-color: #003344
}
Background-image
body{
Background-image:url ("xxx.jpg");/* The default image is only tiled horizontally and vertically */
}
background-repeat/* how images are repeated */
body{
Background-image:url ("xxx.jpg");
background-repeat:repeat-x;/* images are tiled horizontally only */
}

background-attachment/* whether the image is fixed on the page */
body{
Background-image:url ("xxx.jpg");
background-attachment:fixed;/* Fixed background image position */
/* The background image is fixed or scrolled along with the rest of the page. The default scroll background picture scrolls with the rest of the page. Inherit inheriting parent elements
*/
}
background-position/* location of background image */
/* There are 9 locations to choose from, similar to 9 Gongge
Left top center top right Top
Left Center Center Center Right Center
Left bottom center bottom right Bottom
can also use hundred x%,y% is the default value of the upper left corner 0%0% (the previous digit represents the horizontal offset, the latter represents the vertical offset)
You can also xpos ypos (the previous number represents the horizontal offset, the latter represents the vertical offset)
PS: With a percentage there will be a special algorithm,
0% 0% the upper-left corner of the image is coincident with the upper-left corner of the parent element.
50% 50% The image will be in the middle of the parent element,
100% 100% The lower-right corner of the image is coincident with the lower-right corner of the parent element
Inherit inherit from parent element
*/
body{
Background-position:right top;/* Control the position of the background image */
}

/* Background shorthand: Shorthand for attribute value order: Color image repeat Attachment position*/
Body {
Background: #ffffff URL (image.png) no-repeat right top;
}

Background-size
{
Background:url (image/xxx.gif);
background-size:100% 100%;/* stretched and full background scope */
}

The/*background-origin property specifies that the Background-position property should be relative to the position note if the background image background-attachment is "pinned", The Background-origin property has no effect. */

/* Background-clip property specifies the background drawing area
*border-box the default value. The background is drawn inside the border box (cut into the border box).
The *content-box background is drawn inside the content box (cut into the contents box).
*padding-box background is drawn in the padding box (cut into the padding box).
*/
Body
{
/* Multiple background pictures */
Background-image:url (/upload/love/css.gif), url (/upload/love/html.gif);
}

5. Text text
5.1 Text color
Standard specification: If you define a color attribute, you must also define the background color property
body{
Color:blue;
}
H1 {
Color: #00ff00;
}
h2{
Color:rgb (255,0,0);
}
5.2 Text-align Text Alignment
h1{
Text-align:center;
}
p.date {
Text-align:right;
}
p.main{
text-align:justify;
}
5.3 Text-decoration Retouching
h1{
text-decoration:overline;/* Text underlined */
}
h2{
text-decoration:line-through;/* Text Middle Dash */
}
h3{
text-decoration:lint-underline;/* Text Underline */
}
h4 {
text-decoration:blink;/* Defining Flashing Text */
}
/* can also be none and inherit */
5.4 Text-transform:uppercase Text to uppercase
/*text-transform:lowcase to lowercase text-transform:capitalize first capitalization */
p.uppercase{
Text-transform:uppercase
}
5.5 Text-indent: Text indent
p {
text-indent:5px;
}
/* Main properties:
Property Description
Color Set Text colors
Direction sets the text orientation.
letter-spacing Setting Character Spacing
Line-height Setting Row Height
Text-align aligning text in an element
Text-decoration adding adornments to text
Text-indent indent the first line of text in an element
Text-shadow Setting text Shadows
Text-transform the letters in the control element
Unicode-bidi
Vertical-align Setting the vertical alignment of elements
White-space how whitespace is handled in the SET element
word-spacing Set Word Spacing
*/*

5.6 Direction Text Direction
Ltd default left-to-right default, text-oriented
RTL right-to-left text direction
Inherit specifies that the direction property value should be inherited from the parent element
5.7 letter-spacing
Letter Spacing
H1 {
letter-spacing:2px;/* default normal can also inherit inherit*/
}
h2{
letter-spacing:-3px;
}
5.8 line-hight Row Height
P.small {
line-height:90%;
}
p.big{
ling-hight:200%;
}
5.8 Text-shadow: Basic Text Shadow
Text-shadow:h-shadow V-shadow blur color;
/*h-shadow: The position of the horizontal shadow must be: negative value allowed
*v-shadow: The position of the vertical shadow must be: negative value allowed
*blur: selectable blur distance
*color: The color of the shadow
*/

5.9 Vertical-align:text-top
Sets the vertical alignment of an element
Value description
/*baseline default. element is placed on the baseline of the parent element.
*sub the subscript for vertical aligned.
*super Vertical aligned text
*top aligns the top of the element with the top of the highest element in the row
*text-top aligns the top of the element with the top of the parent element's font
*middle Place this element in the middle of the parent element. The
*bottom aligns the top of the element to the top of the lowest element in the row. The
*text-bottom aligns the bottom of the element with the bottom of the parent element's font.
*length 
*% Use the percent value of the Line-height property to arrange this element. Negative values are allowed. The
*inherit specifies that the value of the Vertical-align property should be inherited from the parent element.
*/*
5.10 white-space: blank attribute in paragraph
/*
Normal default. The blank will be ignored by the browser. The
Pre blank is reserved by the browser. It behaves like a <pre> tag in HTML. The
nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered. The
Pre-wrap preserves a sequence of whitespace characters, but wraps normally. The
Pre-line merges a sequence of whitespace characters, but preserves newline characters. The
inherit specifies that the value of the White-space property should be inherited from the parent element.
*/*
5.11 word-spacing:30px; Defines the distance between words is 30px

6. A Style connection
A:link-Normal, non-visited connection
A:visited a connection that a user has already visited
A:hover when the user mouse is placed on the connection
a:active when the user clicks the moment
a:link {
Color: #FF0000;
}/* unvisited link */
a:visited {
Color: #00FF00;
}/* Visited link */
a:hover {
Color: #FF00FF;} /* Mouse over link */
a:active {
Color: #0000FF;} /* Selected Link */

CSS Learning Notes