Lesson Plans: S2-y2 Conversion course 1th Chapter common CSS Styles

Last Update:2017-01-13 Source: Internet

Author: User

Tags border color

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Teaching Instructor: Shong

Class Hours: - minutes

l Technical Objectives of this chapter

N font Text that will create a uniform appearance

N creates a hyperlink style without underlining

N will create a personalized table

N a personalized form is created

l The Focus of this chapter

N CSS Grammar Rules

N CSS Common Properties

l difficulties in this chapter

N will create a personalized table

N a personalized form is created

l work Tasks in this chapter

u beautify the "Baby category" page

u Create and beautify the "registration" page

l The Whole chapter teaching idea

N There are a total of three knowledge points in this chapter: CSS grammar Rules, CSS usage, CSS Common Properties

N because 4.0 the students in S1 I've already studied. CSS , so CSS The grammar rules can be reviewed in some ways.

N CSS usage can still be done in a retrospective manner.

N CSS attributes focus on border properties.

N teachers should be more interactive with students, so that students participate in the classroom teaching process, timely encouragement and praise, enhance the students self-confidence.

Review : [5 minutes ]

What are the two ways that you can submit data in a form and how do they differ?

What form elements are needed to create a login interface?

Target what can a property value be and what does it mean?

Preview Check : [5 minutes ]

Describe the basic structure of a style sheet?

What are the common style attributes?

Course Knowledge Point explanation:

CSS style sheet rule:[ten minutes ]

Why do I need CSS style sheet

Answer: HTML can describe the Web page, but it is far from making beautiful pages, in addition, the page content and the appearance of the Web page is done by different people, if all use HTML can cause conflict. And if the appearance of using CSS To complete the problem can be solved, in addition, because the content of the Web page and the appearance of the separation, but also let us achieve the same content with different appearance to show, greatly improve the Web page changes, reducing the cost of web maintenance.

Basic syntax for style sheets

question: We are S1 , I've already learned it. CSS now, who's to say, the basic syntax of the style sheet?

Answer:

Selector name {

Properties : value ;

}

Question: What types of style rules can be divided into?

Answer: HTML Selector, class Selector, ID Selector.

Show the Quiet night thinking Case:

First let the student guess what label used to turn the font into The red? Then let the students see the html code, there is no special tag, just p Why is the font red? Indicates that the html selector, so that the p p the

question: If you want a few P the style of the element is different from the other P , how to do?

Answer: Class selector.

. Red {

color:red; font-family: " official script "; font-size:24px;

}

.....

</STYLE>

question: If you want a P the style of the element is unique, what to do?

Answer: ID selector

#red {

color:red; font-family: " official script "; font-size:24px;

}

.....

</STYLE>

CSS Three kinds of application methods:[ minutes ]

Introduction: We know the style sheet writing, directly down, how do we apply them?

Classification:

inline style, embedded style, external style sheet

inline Style :

question: If you want a paragraph of text to show a different style than the other paragraph text ( also this style will not be used again and again in other places ) , how to solve?

Answer: Inline style

Writing : Using style Property

<HTML>

<HEAD>

<TITLE> Setting Properties </TITLE>

</HEAD>

<BODY>

<p style = "color:red;font-size:30px;font-family: official Script ;" >

This paragraph has a style applied

<P>

This paragraph is displayed in the default style

</BODY>

</HTML>

Instructor should note: inline styles are used in a smaller range, apply only to one label, and do not work with other labels

Inline style:

Question: If we want a style within a page to remain a style, how to solve it?

Answer: inline style.

Writing : Using <style> label

{font-family: " official script ";

font-size:18px;

color: #FF0000;

}

</STYLE>

</HEAD>

......

<P> before the bed bright Moonlight, </P>

<P> doubt is frost on the ground. </P>

<P> I'm Guo Degang, </P>

<P> head down and think of home. </P>

......

The instructor should indicate that all the paragraphs are in P style to ensure a uniform style .

External style sheet:

Question: If we want to maintain a style for all the pages in a website, how should we solve them?

Answer: An external style sheet.

writing: first you need an external style sheet file usually use .css suffix There is no big difference between the writing of an external style sheet file and the inline style, and there is no need to write the <STYLE> label. Second, we need to import an external style sheet into the Web page.

There are two types of links depending on how they relate: (<link>) and Import (@import)

The writing of the link:

<HEAD>

</HEAD>

Teachers should emphasize the function and writing of three attributes.

How to Import

<HEAD>

@ Import Newstyle.css;

</STYLE>

</HEAD>

( This is a mistake that students make easily < Font face= "Times New Roman" "The

In addition, Instructors should recommend that students use the because for some css unsupported browsers < Font face= "Times New Roman" > ( @import

CSS Common Properties [ min ]

Introduction: We now understand the syntax of the stylesheet, and there are three ways to use the style sheet. As we can see from the preceding story, the writing style sheet is actually a variety of attributes that write it. What are the common attributes of the style sheet? What's the use of them? Let's look at it together.

Text properties

Property	Description
Font-size	Font size
Font-family	Font type
Font-style	Font style
Color	Font Color
Text-align	Text alignment

P { font-size:12px;

font-family : "The song body ";

Text-align:left; }

. focus

{ font-size:16px;

color:red; }

</STYLE>

</HEAD>

<BODY>

"News" [ set Sohu homepage ] 9 Month 1 Day

<p class= Span ' Times New Roman '; Mso-hansi-font-family: ' Times Roman ' ">" focus "> World Championships Liu Xiang 12 seconds 95 the Grand slam </p>

<P> • Implementation of the unsafe food recall system in China Curbing illegal exports </P>

. .. ..

p Span ' Times New Roman '; Mso-hansi-font-family: ' Times Roman ' "" is used as the definition of the overall style, while the class style is used as a style definition that requires special emphasis. Also emphasize the class

Summary 1 :

write the results shown in the following figure HTML Code

/* table cell style for large fonts */

{ font-size:20px;

font-family : " bold ";

color:red;

Text-align:center;

}

/* style for small fonts */

. Smallfont

{ font-size:14px;

color:blue; }

</STYLE>

The instructor provides a table without style HTML, the student completes the style sheet on the machine.

Background properties:

Property	Description
Background-image	Background image
Background-color	Background color
Background-repeat	Tile background: Repeat ( default, two-direction tile, that is, tile full range ), repeat-x ( tile horizontally, that is, tiled on one line ), repeat-y ( tile vertically, that is, tile on a column ), no-repeat ( uneven shop )

.....

Table

{

Background-image:url (images/type_back1.jpg);

background-repeat:no-repeat;

}

</STYLE>

.....

The instructor explained the key code above and explained Repeat the meaning of each value.

Box Properties:

Property	Description
Margin-top	Left margin
Margin-right	Right margin
Margin-bottom	Bottom margin
Margin-left	Left margin
Border-style	Border Style None: A borderless frame. Regardless of any specified border-width value Hidden: hides the border. IE does not support dotted: mac platform ie4+ and windows and unix platform ie5.5+ dashed: mac platform ie4+ and windows and unix platform ie5.5+ Solid: Solid Line Border Double: A two-line border. Two single line and its interval equals the specified border-width value Groove: according to Border-color the value of painting 3D Groove Ridge: according to Border-color to draw a diamond-shaped border inset: according to Border-color the value of painting 3D Concave Edge outset: according to Border-color the value of painting 3D Convex side
Border-width	Border width
Dorder-color	Border color
Padding-top	Top padding
Padding-right	Right padding
Padding-bottom	Bottom padding
Padding-left	Left padding

Question: How do I write style rules to achieve the effect shown in the following illustration?

Key code:

. tableborder

{ border-right-width:3px;

border-right-color:red;

border-right-style:dashed;

padding-top:20px;

padding-left:10px; }

TR { background:yellow; }

<TR>

<TD class= "Tableborder" > cell phone punching value </TD>

<TD class= "Tableborder" > Electronic lottery </TD>

</TR>

......

teachers should focus on explaining Border The meaning of each property word and the effect they produce, you can correspond to the browser effect ( For example, the annotation portion of code ) for explanation.

Thin border Effect:

Question: How do I write code to achieve the effect of the following diagram?

Key code:

. textborder{

border-width:1px;

Border-style:solid;

}

</STYLE>

<P> Name:

<P> Password:

<input name= "pass" type= "password" class= "Textborder "

size= "></P>"

</FORM>

teachers should focus on explaining border-width and The meaning and usage of Border-style , here you can a summary of Border-style ( see table for front border properties )

Hyperlink Special Style

Pseudo class	Description
A:link	Default style for hyperlinks
a:visited	Hyper-clicked Hyperlink style
A:hover	The style that the mouse pauses over the hyperlink
A:active	Style when the mouse is pressed but not released

Question: How to write the hyperlink style in the following illustration.

Key code:

A { color:blue;

Text-decoration:none;

}

a:hover{

color:red;

}

</STYLE>

......

<TR>

<td><a href= "#" > Lenovo </A> | <a href= "#" > dell </A></TD>

</tr> .....

teachers should highlight the writing of hyperlink pseudo class (between a and hover is a colon (:), not a comma (,) , nor is it a semicolon (;) nor is it a dot (.)).

Summary 2 :

write the results shown in the following figure HTML code

instructors should provide a framework (HTML) , please do two to three students on the machine (CSS) , other students to do with paper, teachers should be prompted to the key code.

/* text input box with thin borders */

. textbaroder

{

border-width:1px;

Border-style:solid

}

a{ /* set hyperlink style without underline * *

Color:blue;

Text-decoration:none;

}

a:hover{ /* mouse changes color when hovering over hyperlinks

color:red;

Text-decoration:underline

}

</STYLE>

Comprehensive example: to achieve the effect of the following picture buttons, how do you write style rules?

Instructors can select multiple trainees to complete this case together.

Summary of this chapter [ ten minutes ]

What are the common properties of box properties? and explain its meaning separately?

What are the types of hyperlink styles?

What are the settings for inline style sheets, in-row style sheets, and external style sheet files, respectively?

Assessment points

CSS naming Syntax

CSS Common Properties

Extension section:

border-style constant value of the property

Student Problem Summary:

temporarily no

Homework:

&NBSP; < Span ' Times New Roman '; Mso-hansi-font-family: ' Times Roman ' "" "Exercise 1 : 26 the page to 27 page multiple-choice

&NBSP; < Span ' Times New Roman '; Mso-hansi-font-family: ' Times Roman ' "" "Exercise 2 : 27 the page 1,2,3,4

Exercise 3 : Preview the second chapter, try to do after the class choice question

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More