CSS Learning Notes

I. Overview of CSS (Learn)
*. Css:cascading style Sheet Cascading style sheet
*. CSS is about adding various styles to HTML page labels.
*. Why use CSS
HTML flaw: 1. Not adaptable to multiple devices
2. Require the browser to be sufficiently intelligent to be large enough
3. Data and display are not separate
4. Function is not strong enough
CSS Benefits:
1. Separating the data from the display
2. Reduce network traffic
3. Make the entire website visual effect consistent
4. Increase the efficiency of development
Second, CSS syntax
p{color:red;}

Selector {Property Name: property value;}
The selector must be a curly brace after the name of the property. The attribute is separated by a colon. The attribute value is followed by a semicolon
It is best not to have a space between the property name and the colon.

Iii. how CSS and HTML are combined
The CSS code is theoretically arbitrary, but is usually written in the Style tab.
There are 3 ways to combine CSS and HTML:
A. Row-level style sheet: With the Style property, the range is only applicable for this label
<div style = "border:1px solid red;" > Everybody good </div>
B. Inline style sheet: complete with <style> tags. Scope for this page
C. External style sheet: Use the Create style sheet file. for multiple pages.
How to introduce style sheet files:
1): Adopt <link> Label
Eg:<link rel = "stylesheet" type = "text/css" href = "A.css" ></link>
2): Import, must be written in the <style> tag, and must be the first sentence
eg: @import url (a.css);

The difference between the two methods of introduction:
Cannot write <link> label in external style sheet, but can write import statement

Four, CSS Selector
Selectors fall into two main categories:
1. Basic Selector
A. Tag selector: Refers to the name of the selector that represents the label on the HTML page
p{
color:red;
border:1px dashed green; (dashed line)
}
Citation is <p></p>

B. class selector: Specify the dot. To define
Pros: Flexible
Eg:. One{background-color: #ff0099;}
Reference is <p class= "one" ></p>

C. ID selector: Specify # to define
Eg: #one {cursor:hand;}
Difference: The tag Selector is for a category of labels on the page.
Class selectors can be used for a variety of labels.
The ID selector is a value for a specific label (one). ID is the unique identifier for this label on this page.
Reference is &LT;H1 id= "one" >

D: Universal (Global) Selector: defined by *, representing all labels on the page.
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}

2. Extended Selector
A. Combination selector: separated by commas (indicating that these types of labels are all used in this style)
Eg:p,h1,h2,.one, #two {color:red; Background-image:url (image/2.jpg) (this is the background image)}
<p></p>
B. Association selector (descendant selector): separated by a space
Eg:h4 span i{color:red;}
Represents the style of the I label in the span label in the H4 label
H4 and span and I tags are not necessarily next to each other.
C. Pseudo-class selectors
1): Static Pseudo-Class: The rule is defined by:. Only two. Only hyperlinks can be used.


: link indicates the color before the hyperlink is clicked
: visited indicates the color after link click

For all Labels:
: hover indicates that the mouse is placed there
: ALink represents the style after the mouse point up
: Vlink indicates the color after click

eg:a:link{color:red; Text_decoration:underline (denotes underscore) overline () denotes an underscore}
A:visited{color:yellow;}
Note: The style defined for a:link{} is for all hyperlinks that have the href attribute written (excluding anchors)
a{} defines the style for all hyperlinks (including anchors)
2): Dynamic Pseudo-Class: Applicable for all tags
: hover: It's time to move to a label
: Focus: The time when a tag gets the spotlight
: active: Clicking on a tag without relaxing the mouse
Eg:label:hover{color: #00ff00;}
input:focus{
Background-color: #ff9999;
border:1px solid red;
}
a:active{
Color:blue;
}

Five, CSS various selectors conflict (master)
CSS style conflicts:
1.ID selector > class selector > tag Selector
2. Row-level style sheets > inline style Sheets > external style Sheets
ID selector for external style sheet > tag selector for inline style sheet

Principle: The nearest principle

You can refer to multiple style sheets in class again. such as class = "one three"


Vi. various properties of CSS (master)
? Introduction to the scale units in CSS
CSS units:
A. Absolute unit 1in=2.54cm=25.4mm=72pt=6pc, PT is point or pound, PC is dispatch card
B. Relative units: px, EM (Printing unit equivalent to 12 dots),% (relative to surrounding text)

* Font settings
p{
font-size:50px; /* Font Size */
Font-style:italic; /* Italic Body */
Font-weight:bold; /* Bold */
Font-family: Young round; /* Font type */
Font-variant:small-caps; /* Lowercase to uppercase */
}
* Text Settings
p{
letter-spacing:0.5cm; /* Letter Spacing */
word-spacing:1cm; /* Word spacing */
Text-align:center; /* In the middle of the contained container */(center of Container)
Text-decoration:overline; /* Font modifier underline underline line-through dash overline underline */
Text-transform:lowercase; /* Word font case */
Text-transform:uppercase; /* Word font lowercase (input) to uppercase (display) */
color:red;
}

* Background Settings
body{
Background-color: #ff99ff; /* Background color */
Background-image:url (images/2.gif); /* Background picture */(be sure to use URL)
Background-repeat:no-repeat; /*no-repeat do not tile (only one), repeat-x, tile horizontally, repeat-y tile vertically */
Background-position:center right; /* Background position */(Right top corner)
Background-attachment:scroll; /* Move the background, fixed with the scroll bar to move, scroll not move */
}




* List Settings
UL li{
List-style:none; /* Pre-list style */(remove the dots in front of ul)
List-style-image:url (images/2.gif); /* list item before picture */
margin-left:80px;
}

* Box model (border margin padding)
padding: is the distance of the content to the edge (Padding-top moves up)
Border: is the thickness of the edge
Margin: is the distance from the control to the control

* Positioning settings (POSITION,FLOAT,CLEAR,Z-INDEX)
#d {
Position:absolute; (absolute positioning)/*
1. Absolute positioning: Defines the horizontal ordinate. Out of its own sequential flow, the dot is in the upper left corner of the container
2. Relative positioning: Relative to the original position in the sequential stream
*/

Sequential flow: The components are arranged sequentially. There are two situations that are out of sequence Flow: 1. Absolute positioning
2.float: Floating

left:100px; /* Horizontal Axis */
top:100px; /* Ordinate */
border:1px solid red;
width:100px;
height:100px;
Background-color: #ff66ff;
}

#d1 {
position:relative; /* Relative position */(relative to the original position)
left:100px;
top:100px;
border:1px solid Green;
width:100px;
height:100px;
Background-color: #339900;
}

span{
position:relative;
left:20px;
top:20px;
}
Z-index: Any value, the greater the value, the closer we get.
float: Float
Overflow: How to go out of range (hidden hidden auto processing)

Mouse style settings (cursor) (move movement, help is?) + Hand, hand for hand shape)

Seven, filter (learn)

CSS Learning Notes