HTML+CSS Foundation Course II

1.border Frame the System
<style type= "Text/css" >table tr td,th{border:1px solid #000;} </style>
2.<table summary= "form brief text" >
Add a title to a table

<caption> Title Text </caption>
3.<a  href= "Destination url"  title= "mouse over displayed text" > link displayed text </a>
A label
4.<a href= "Destination url" target= "_blank" >click here!</a>

Open a link in a new browser window

5.

1, SRC: Identify the location of the image;

2, alt: Specify the descriptive text of the image, when the image is not visible (when the download is unsuccessful), you can see the text specified by the attribute;

3. Title: Provides a description of the image when the image is visible (the text displayed when the mouse slides over the picture);

4. The image can be an image file in gif,png,jpeg format.

6.

<form   method= "transfer mode"   action= "Server file" >

1.<form>:<form> label is in pairs appear, start with <form>, end with </form>.

2.action: Where the data entered by the browser is transmitted, such as a PHP page (save.php).

3.method: The way data is transmitted (Get/post).

7.

<form>   <input type= "Text/password" name= "name" value= "text"/></form>

type：

   当type="text"时，输入框为文本Input box;

   当type="password"时,输入框为密码输入框。

8.

Grammar:

<textarea  rows="行数"cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

9.

<input   type= "Radio/checkbox"   value= "value"    name= "name"   checked= "checked"/>

1. Type:

When Type= "Radio", the control is a radio box

When type= "checkbox", the control is a check box

2, Value: Submit data to the server values (background program PHP use)

3, Name: For the control name, in case the background program ASP, PHP use

4, checked: When set checked= "checked", this option is selected by default

10.1. Value:

2.

Selected= "Selected":

Set the Selected= "selected" property, the option is selected by default.

Results displayed in the browser:

Selected= "Selected":

Set the Selected= "selected" property, the option is selected by default.

Results displayed in the browser:

11. The drop-down list can also be multi-select, set the properties in the <select> tag, multiple="multiple" You can implement multi-select function, under the Windows operating system, the press the key while the multi-select Ctrl 单击 (under the Mac use Command + click) , you can select multiple options. The following code:

Results displayed in the browser:

12.

Submit data using the Submit button

<input   type= "Submit"   value= "Submission" >

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

13.

When the user needs to reset the form information to the initial state, such as when the user enters the "username" and finds that the writing is incorrect, the 重置按钮 input box can be restored to its original state. You only need to set the type to "reset".

Grammar:

<input type="reset" value="重置">

14.

Label label on Form form

Little friends, you are learning the form in front of the various controls, when you find a label--label, this section to reveal its role.

The label label does not present any special effects to the user, and it is useful for improving usability for the mouse user. If you click on the text within the label tag, the control is triggered. That is, when the user clicks the label label, the browser automatically shifts focus to the label-related form control (automatically selected on the form control associated with the label label).

Grammar:

<label for= "Control ID Name" >

Note: The value in the for property of the label should be the same as the value of the associated control's ID property.

Example:

<form>  <label for= "male" > Male </label>  <input type= "Radio" name= "Gender" id= "male"/>  <br/>  <label for= "female" > Women </label>  <input type= "Radio" name= "Gender" id= "female "/>  <label for=" email > enter your email address </label>  <input type= "email" id= "email" placeholder= " Enter Email "></form>
15.

CSS code syntax

CSS styles consist of selectors and declarations, and declarations are made up of attributes and values, as shown in:

Selectors, also called selectors, indicate the elements in the Web page to which you want to apply a style rule, as in this case, the text in all segments (p) in the page will turn blue, while other elements, such as OL, will not be affected.

Declaration: In English curly braces "{}" is the declaration, the attribute and the value are separated by the English colon ":". When there are more than one statement, the middle can be a semicolon ";" Delimited, as follows:

p{font-size:12px;color:red;}

Attention:

15.

CSS Comment Code

Just like in HTML annotations, there are comment statements in CSS: used /*注释语句*/ to mark (use in HTML <!--注释语句--> ).

16

Where can CSS styles be written? From the form of CSS-style code insertion, the basic can be divided into the following 3 kinds: inline, embedded and external three kinds. This section first explains the inline type.

内联式CSS style sheet is to write CSS code directly in the existing HTML tags, such as the following code:

<p style= "Color:red" > here the text is red. </p>

Note that it is wrong to write in the start tag of the element:

<p> here the text is red. </p style= "color:red" >

and CSS style code to write in style= "" double quotes, if there are multiple CSS style code settings can be written together, separated by semicolons. The following code:

<p style= "color:red ; font-size:12px" > here the text is red. </p>
17.

Embedded CSS style, written in the current file

Now there is a task, the right editor in the "Cool Internet", "service timely intimate", "fun and easy to learn" The three short word text size modified to 18px. It would be a headache to set up the inline CSS style that we learned in the last lesson (adding sytle= "font-size:18px" to each <span> tag), this section explains a new way of embedding CSS styles to accomplish this task.

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. The following code is implemented to set the text in three <span> tags to red:

<style type= "Text/css" >span{color:red;} </style>
18.

An external CSS style (also known as an inline) is to write the CSS code in a separate external file, with the CSS style file " .css " as the extension, within

<link href="base.css" rel="stylesheet" type="text/css" />

Attention:

1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.

2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.

3, <link> label location is generally written in the

19. Principle of proximity

Three ways to prioritize

Some of the small partners asked, if there is a situation: for the same element we have three ways to set CSS style, then which method really effective? That's what happens in the editor on the right.

1. Use 内联式 CSS to set "super cool Internet" text for 粉色 .

2. Then use 嵌入式 CSS to set the text to 红色 .

3, and finally use 外部式 the settings text 蓝色 (style.css file Settings).

But eventually you can observe that the text of the short word "super cool Internet" is set in order 粉色 . Because these three styles are prioritized, remember their priorities:内联式 > 嵌入式 > 外部式

But embedded > external has a premise: the placement of the embedded CSS style must be behind the exterior. As is the case with the right code editor, <link href= "Style.css" ...> code in front of <style type= "Text/css" >...</style> Code (also written in the actual development). Interested partners can try, change them in order, and see if their priority changes.

In fact, in summary, that is --就近原则（离被设置元素越近优先级别越高） .

However, note that the precedence summarized above is a precondition: inline, inline, external style sheet CSS style is the same weight in the case, what is the weight of the value? This is explained in the next 9-2 sections.

20.

Each CSS style declaration (definition) consists of two parts, in the following form:

selector {    style;}

The part before {} is the selector, and the selector indicates the object of the style in {}, that is, which elements in the Web page the style acts on.

21st.

Tag Selector

The tag selector is actually a tag in the HTML code. such as

P{font-size:12px;line-height:1.6em;}
22.
Class Selector

Class Selector

Class selectors are most commonly used in CSS style encodings, such as the code in the right-hand code Editor: can be implemented as "timid", "courage" font is set to red.

Grammar:

. class Selector name {CSS style code;}

Attention:

1, English dot start

2, where the class selector name can be arbitrarily named (but not Chinese OH)

How to use:

The first step: Use the appropriate tags to mark the content to be modified, as follows:

<span> Timid </span>

Step Two: Use class= class selector name to set a class for the label as follows:

<span class= "Stress" > Timid </span>

Step three: Set the class selector CSS style as follows:

. stress{color:red;} /* Add an English dot in front of the class */
22.

ID Selector

In many ways, the ID selector is similar to a class selector, but there are some important differences:

1. Set id= "ID name" for the label, instead of class= "class name".

2. The ID selector is preceded by the pound sign (#), not the English dot (.).

The right-hand code editor is a complete instance of an ID selector.

23. The similarities and differences between class and ID selectors

Same point: can be applied to any element
Different points:

1. The ID selector can only be used once in the document. Unlike class selectors, an ID selector can only be used once, and only once, in an HTML document. The class selector can be used more than once.

The following code is correct:

<p> third grade, I was a <span class= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. There has been no such <span class= "stress" > Courage </span> to answer questions raised by the teacher. </p>

And the following code is wrong:

<p> third grade, I was a <span id= "stress" > Timid </span> little girl, class never dare to answer the teacher asked questions, afraid to answer the wrong teacher will criticize me. There has been no such <span id= "stress" > Courage </span> to answer questions raised by the teacher. </p>

2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for one element at the same time, but only with the method of the class selector, the ID selector is not possible (the list of ID words cannot be used).

The following code is correct (see the Code Editor on the right for the full code)

. stress{color:red;}. bigsize{font-size:25px;} <p> <span class= "Stress bigsize" > third grade </span> next semester, our class has a public class ...</p>

The function of the above code is to set the text color to red for the "third grade" three text and the font size to 25px.

The following code is incorrect (see the Code Editor on the right for the full code)

#stressid {color:red;} #bigsizeid {font-size:25px;} <p> <span id= "Stressid Bigsizeid" > Third grade </span> next semester, our class has a public class ...</p>

The above code can not be implemented for the "third grade" three text set the text color is red and the font size for the effect of 25px.

24.

There is also a more useful selector sub-selector, the greater than symbol (>), for selecting the first generation of child elements of the specified label element. Code in the right-hand code Editor:

. food>li{border:1px solid Red;}

This line of code causes the child element Li (fruit, vegetable) under the class name to add a red solid line border.

25.

Include (descendant) selectors

Contains a selector, which is a space to select the Descendants element under the specified label element. Code in the right-hand code Editor:

. First  span{color:red;}

Notice the difference between this selector and the sub-selector, where the child selector (children selector) refers only to its immediate descendants, or you can understand the first generation of descendants acting on child elements. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >.

Summary:> acts on the first generation of descendants of the element, and the space acts on all descendants of the element.

26.

Universal Selector

The universal selector is the most powerful selector, which uses a (*) number designation, which is used to match all tag elements in the HTML, using the following code to use any LABEL element in the HTML font color is all set to red:

* {color:red;}
27.

Pseudo-Class selectors

What's even more interesting is the pseudo-class selector, which is called a pseudo-class selector, which allows you to set a style for a tag that does not exist in the HTML (a state of the label), such as when we set the font color for the mouse-over state of a tag element in HTML:

a:hover{color:red;}

The previous line of code is to set the font color to red for the A-label mouse-over state. This will make the first paragraph of the text content of the "timid" text added to the mouse over the font color into a red effect.

About pseudo-selectors:

28.

Group Selector

When you want to set the same style for multiple label elements in the HTML, you can use the grouping selector (,), which is the following code for the H1 in the right-hand code editor, and the span label to set the font color to red:

h1,span{color:red;}

It is equivalent to the following two lines of code:

h1{color:red;} span{color:red;}
29.

Inherited

Some styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants. For example, the following code: If a color is applied to the P tag, the color setting applies not only to the P tag, but also to all child element text in the P tag, where the child element is the span label.

p{color:red;} In my third year of <p>, I was a little girl with a <span> timid </span>. </p>

Visible to the right of the results window, the text in P and the text in span are set to red. Note, however, that there are some CSS styles that are not inherited. such as border:1px solid red;

30.

Particularity

Sometimes we set a different CSS style code for the same element, so which CSS style does the element enable? Let's take a look at the following code:

p{color:red;}. First{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

P and. First are matched to P on this tab, so what color does it show? Green is the right color, then why? This is because the browser uses the weights to determine which CSS style to use, and which CSS style to use when the weights are high.

Here are the rules for weights:

The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. For example, the following code:

P{color:red,}/* Weighted value is 1*/p span{color:green;}/* the weight is 1+1=2*/.warning{color:white;}/* The weight is 10*/p span.warning{color:purple;} /* The weighted value is 1+1+10=12*/#footer. Note P{color:yellow;}/* Weighted value is 100+10+1=111*/

Note: There is also a special weighted value-inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.

31.

Cascade

Let's consider a question: what if there are multiple CSS styles in the HTML file that can exist for the same element and that have the same weight values for the multiple CSS styles? Well, the Cascade in this section helps you solve this problem.

Cascading is in the HTML file for the same element can have more than one CSS style exists, when the same weight of the style exists, according to the order of the CSS style to decide, in the back of the CSS style will be applied.

As in the following code:

p{color:red;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

The text in the last P is set to green, which is well understood and is understood as a style that overrides the previous style.

So the previous CSS style precedence is easy to understand:

Inline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file).

32.

Importance

When we do the code of the Web page, some special situations need to have the highest weights for some style settings. At this time we can use!important to solve.

The following code:

P{color:red!important;} P{color:green;} <p class= "First" > Third grade, I was a little girl with a <span> timid </span>. </p>

The text in the p paragraph is then displayed in red.

Note:!important to be written in front of the semicolon

Note that when a page creator does not set a CSS style, the browser displays the page in its own set of styles. And users can also set their own custom style in the browser, such as some users are accustomed to the font size to larger, so that they see the text of the page more clearly. Notice that the style priority is: Browser default style < page maker Style < user-set style, but remember that the!important priority style is an exception and the weight is higher than the user's own style.

HTML+CSS Foundation Course II