January 19 (HTML tour) CSS style sheet

One, the style sheet is divided into three categories:

1. Inline style sheet. --placed in the start tag of the element. --only works on the current element.
<input name= "txt" style= "border:0px; border-bottom:1px solid black; "type=" text "/>

Cases:

Results:

2. Inline style sheet. --placed in the

"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><style type="Text/css">input{border:5px; <!--style is an inline style sheet, between the head andcolor: #3F6; border-bottom:3px solid red;}</style>"text"Name="A1"Id="A1"><input type="Buttom"Name="A2"Id="A2"Value="Button"><p> Hello </p> <!--input only unchanged, does not affect--></body>

Execution Result:

3. external style sheet. --Put it in a separate. CSS style sheet file. --can be on the entire site.

Action: Create a new CSS file to hold the style sheet and call the style sheet in the HTML, to right--->css the style sheet in HTML and attach the style sheet. Style sheets are generally connected by link.
(1) Definition of an external style sheet

" Utf-8 " ; /*  */input{border:5px;                       Color: #3F6; border-bottom:3px solid red;}

(2) Invocation of an external style sheet

"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><link href="file:///E|/page/untitled-2.css"Rel="stylesheet"Type="Text/css"/> <!--link-connected external style sheet-->"text"Name="A1"Id="A1"><input type="Buttom"Name="A2"Id="A2"Value="Button"><p> Hello </p> </body>

Execution Result:

Second, the style sheet selector:
General syntax for inline, external style sheets:
Selector Selector
｛
style = value;
style = value;
style = value;
....
｝

Take the following HTML example to learn how to differentiate between the various style selectors.

"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><link href="file:///E|/page/untitled-2.css"Rel="stylesheet"Type="Text/css"/> "txt" id=" A1 "Type="text"/><br/><spen> Hello </spen> <br/><div><input name="txt" id=" A2 "Type="text"/><br/><input name="txt" id=" A3 "Type="text"Value="******"/><br/><span><input name="txt" id=" A4 "Type="text"Value="******"/><br/></span></div><p> Hello </p> </body>

1. Basic:
(1) Tag selector: Use tag name to select the selector.
Input{...}   Div{...}   Span{...} Td{...} can be used as tag selectors. The tag Selector controls a class with a large range.

Cases:

" Utf-8 " ; /*  */input{border:5px;                       Color: #3F6; border-bottom:3px solid red;}

Execution Result:

(2) Category selector: Use class to categorize elements in HTML elements, and then use the value of this class as the selector.
The name of the. Class {...} The category selector is the one who wants to change who to change individually, more precisely than the tag selector.

Selector:

" Utf-8 " ; /*  * *. uu{border:5px;                       Color: #3F6; border-bottom:3px solid red;}

The call to the HTML table is:

"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><link href="file:///E|/page/untitled-2.css"Rel="stylesheet"Type="Text/css"/>"txt"Type="text" id=" A1 "/><br/><spenclass= "UU"> Hello </spen> <br/><div><input name="txt"Type="text" id=" A2 " class= "UU"/><br/><input name="txt"Type="text" id=" A3 "Value="******"/><br/><span><input name="txt"Type="text" id=" A4 " class= "UU"Value="******"/><br/></span></div><p> Hello </p> </body>

Execution Result:

(3) ID Selector: Works on the element for the corresponding ID in HTLM.
#ID的名 {...}
Selector:

" Utf-8 " ; /*  */#a3 {border:5px;                       Color: #3F6; border-bottom:3px solid red;}

Execution Result:

2. Compounding:
(1) separated by commas. --side-by-side relations, while working.

input, #dd,. Yellow,.uu{color:gray;line-height:28px;}

(2) separated by a space. --Future relationships.

. uu{    color:gray;line-height:28px;}

Div. uu <!--div space Uu-->{background-Color:blue;}<input name="txt"Type="text" class="UU"/><div> <!--equivalent to the parent--><input name="txt"Type="text"/> <!--descendants--><input Name="txt"Type="text" class="UU"Value="******"/> <!--descendants--><span> <!--descendants--><input Name="txt"Type="text" class="UU"Value="******"/> <!--grandson--></span></div>

Whether the offspring or grandchildren are descendants, as long as the descendants of the DIV has UU changes.

Execution Result:

(3) Class two filter.
Tag Selector. class Selector {...}
Input.uu
{
border:5px double red;
}

Cases:

. uu{Color:gray;line-height:28px;} Div.uu {Background-color:red;}<body><input name="txt"Type="text" class="UU"/><br/><div><input name="txt"Type="text"/><br/><input name="txt"Type="text" class="UU"Value="******"/><br/><span><input name="txt"Type="text" class="UU"Value="******"/></span></div> </body>

Execution Result:

Div.uu means: The div exists at the same time. UU also exists, which belongs to two screening.

* Contrast : Div. UU is different from Div.uu.

div spaces. UU means: The descendants of the div (whether in the offspring or in the grandchildren) appear. UU, the items that appear will change with the style sheet.

Div.uu means: div exists at the same time. When UU is present, it changes with the style sheet and belongs to two filters.

January 19 (HTML tour) CSS style sheet