First, the concept:
Cascading style sheets (cascading style Sheet) are referred to as "CSS", often referred to as "style Sheet", which is used for web-style design.
Second, common usage
1. You can add styles to all the same tag elements in the page, such as:
<div>div Area 1</div>
<div>div Area 1</div>
Name: <input type= "text"/> Score: <input type= "text"/>
You can add tags to the Head tab of this page
<style type= "Text/css" >
div{
border: #F90 dashed 2px;
height:200px;
width:400px;
}
Input {
Border:none;
Border-bottom: #000 1px solid;
}
The. haha{/* Style name is added with a point. number that represents this style is given to the specific element element in the page is defined as the class attribute, class= "haha" */
Border:none;
}
#userBirth {/* style name is added with a well #, which means that the style is to give the page a specific element element is defined by the id attribute, and id= "Userbirth" the same usage is less, because the ID to JS with more. No need an ID is a style, a lot of cases with class, multiple tags together with a style, high scalability. Easy to modify. */
Border:none;
Border-bottom: #000 1px solid;
}
</style>
Second, the CSS file can be written separately to a plain text file to ensure that it can be used in the <style type= "Text/css" >
<link rel= "stylesheet" href= "http://www.php1.cn/" > @import import URL (2.css); /* Import the outer 2.css text in/*
</style>
Three, hyperlinks of several styles
There are four types of hyperlinks that can be specified, namely, A:link (pre-access), a:hover (before mouse clicks), a:active (Mouse is not released in the Click), a:visited (after access) four. Which is generally recommended
A:link and A:active are a group, with a style. A:hover,a:active is a group with another style. Such as:
a:link{
Background-color: #06F;
Color: #FFF;
Text-decoration:none; /* Text-decoration for none underline no */
font-size:18px;
}
a:hover{
Background-color: #FFF;
Color: #F00;
font-size:24px;
} ... Wait a minute.
Iv. priority in Tag CSS
You can specify a id,class for the label Div, or use the style directly, as follows:
<div class= "haha" id= "QQ" > This is a div area 2</div>
So what is the order of precedence:: Tag Selector < class selector <id selector <style Property
V. Simple DIV Style Introduction
#div_1 {
/*border-bottom: #F60 2px dashed;*//* Border-botton, you can set the bottom border of the Div document style, generally color, font size (such as 2px 2 pixels), border line (such as dashed dashed bar) */
Background-color: #F90;
/*padding:20px 100px 200px 300px; upper right lower left
margin:0px;*//* padding content and Border distance, margin this border with the outside DIV or body distance */
Float:left; /* Float is floating, after the original position is moved, the following label will come over. As this float:left, the label will be floating on the left, the original text can flow directly to the right, the following div will squeeze in. Position is the location, can be absolutely to locate, the original position after positioning will be used by other tags, because once the position has been pulled out of the text stream, not part of the normal text stream does not occupy the location of normal document flow. */
}
Picture and text mix, use to go to the CSS style of float:left, so that the original image below, it will automatically flow to the right of the picture.
