HTML/CSS Summary 1

Source: Internet
Author: User

1. Define the page background color

<body bgcolor= "Background color" >

Colors can be expressed in 2 ways: 1. Specify a color name directly, such as blue. 2. Use hexadecimal data representations such as #rrggbb, which represent two-bit hexadecimal data, respectively.

2. Set the background image

<body background= "image Address" >

3. Set the text color

<body text= "Color of text" >

4. Set Link Text properties

<body link= "Color" >

ALink can be used to set the color of the mouse click link, vlink can set the color of the hyperlinks that have been visited.

5. Set page margins

<body topmargin=value leftmargin=value Rightmargin=value bottommargin=value>

6. Title Tag

<title>...</title>

7. Define page Keywords

<meta name= "ketwords" content= "Enter specific keywords" >

8. Define the page description

<meta name= "description" content= "Settings page description" >

9. Define editing tools

<meta name= "generator" content= "Frontpage" >

10. Defining Author Information

<meta name= "Autor" content= "author's name" >

11. Define Web page text and language

<meta http-equiv= "Content-type" content= "text/html;charset= Character set type" >

12. Define a timed jump for a webpage

<meta http-equiv= "Refresh" content= "jump time; url= jump to Address" >

Using the refresh in http-equiv not only can realize the automatic refresh of the page itself, but also can realize the automatic jump process between pages.

13. Links

1. Create a basic hyperlink: <a property = "link target" > Link display text </a>

Properties: href--Specify the link address, name--to the link name, title--to add hint text to the link, target--to specify the target window of the link, and the property value of the target parameter:-self--opens the link in the current page; blank--opens the link in a new blank window,-top--opens the link in the top-level frame, or is understood to open the link in the root frame;-parent--opens the link on the previous level of the current frame.

2. Create an image link

<a href= "link target" > Linked images </a>

3. Create an anchor point

<a name= "anchor name" ></a> Anchor point refers to a location in a page of a given name, where the anchor point is first established before the anchor link is created.

<a href= "#锚点的名称" >...</a>

14. Forms

<form action= "handler for form" method= "Delivery Method" ></form> the handler of the form in general the action and the method of delivery are necessary parameters.

Action is used to specify the address to which the form data is submitted for processing. The form's handler is the address to which the form is to be submitted, that is, the program address to which the data collected in the form will be delivered.

There are only two values for the transfer method, get and post. The get--form data is routed to the URL specified by the Action property, and the new URL is sent to the handler. The post--form data is included in the form body and is then sent to the handler.

15. Inserting images

16. Add a multimedia file

<embed src= "Multimedia file Address" width= "Multimedia width" height= "multimedia height" autostart= "whether Autorun" loop= "Loop Play" ></embed>

<bgsound src= "background music address" loop= "played" >

17. Inserting Additional tags

Insert space Symbol:&nbsp;

Inserting special symbols:&amp;...&copy;

18. Formatting text

Fonts are used to control the font, font size, color and other properties; <font face= "font style" >...</font> can set different fonts through face. <font size= "text font size"; </font> used to set the font size. <font color= "Font Color" >...</font> used to set the text color.

<b> bold text </b>, <strong> bold text </strong>, <i> italic text </i>, <em> italic text </em>, <cite> italic text </cite>, <u> underline content </u>, <sup> superscript content </sup>, <sub> subscript content </sub>

19. Set paragraph formatting

<p> paragraph text </p>, <align= >, <nobr> do not wrap text </nobr>, <br> line break tags

20. Horizontal Line Marking

21.css

1.CSS: Cascading style sheets. Using CSS can simplify the formatting code of the Web page, speed up the download, and reduce the number of code that needs to be uploaded, greatly reducing the workload of repetitive work. The primary purpose of the style sheet is to precisely position elements on the page. Second, he separates the content structure of the Web page from the format control, so that the Web page can only be composed of content, and the format of the Web page through the CSS style sheet file to control

The 2.CSS syntax structure consists of only 3 parts, namely selectors, style attributes, and values, with the following basic syntax:

selector {style attribute: value; style attribute: value; .... }

3. Basic CSS Selector

Tag Selector: Direct HTML tags as selectors such as the P selector; Category selector: Once the tag Selector is declared, all of the tags in the page will change accordingly, and the ID selector is used in the same way as the class selector. The difference is that the ID selector can only be used once in an HTML page.

How to use 4.css

Link external style sheet: <link type= "Text/css" rel= "stylesheet" href= "file name for external style sheet" >

Inline mode:< tag style= "style attribute: property value; style attribute: property value; ..." >

Embed an external style sheet:

<style type=text/css>

@import url ("file name for external style sheet");

</style>

Internal style sheet:

<style type= "Text/css" >

<!--

Selector 1 (Style attribute: property value; style attribute: property value; ....) )

Selector 2 (Style attribute: property value; style attribute: property value; ....) )

....

Selector N (Style attribute: property value; style attribute: property value; ....) )

-

</style>

5. Set CSS Properties

CSS properties are categorized as: type, background, chunk, box, border, list, anchor, expand.

CSS Type properties: font-family, Font-size, Font-style, Line-height, Text-decoretion, Font-weight, Font-variant, Text-transform, Color

CSS Background properties: Background-color, Background-image, Background-repeat, background-attachment (determines whether the background image is fixed in its original position or scrolled with the content), Background-position (X) and Background-position (Y): Specifies the initial position of the background image relative to the element.

CSS Block properties: word-spacing: Sets the spacing of words, letter-spacing: Increases or decreases the spacing of letters or characters. Vertical-align: Specifies the vertical alignment of the element to which it is applied. Text-align: Sets the alignment of text in an element. Text-indent: Specifies the degree to which the first line of text indents. White-space: Determines how the element's whitespace is handled. Display: Specifies whether and how the element is displayed.

CSS Box Properties: The Width and Height properties set the elements ' widths and heights. float: Sets which side of the other element floats around the element. Padding: Specifies the spacing between the element content and the element's border. Margin: Specifies the spacing between one element's border and another.

CSS Border Properties: Style: Sets the style appearance of the border. Width: Sets the thickness of the element's border. Color: Sets the colors of the border.

CSS List properties: List-style-type: Sets the appearance of bullets or numbering. List-style-image: You can assign a custom image to a bullet. Click the Browse button to select an image or enter an image path. List-style-position: Sets whether the list item text wraps and indents and whether the text wraps to the left margin.

CSS Positioning properties: Position: Four selectable values: absolute can precisely move the element to the position you want, absolutely position the element. fixed--The fixed position relative to the window. relative--relative positioning is positioned relative to the default position of the element. static--The property value is the default for all element positioning and can be used to cancel the inheritance, that is, the default value of the element location is restored. Visibility: If you do not specify a visibility attribute, most browsers inherit the value of the parent by default.

CSS extension properties: Page-break-before: Two of these properties are set to page breaks for printed pages. Page-break-after: The page delimiter that appears after retrieving or setting the object. Cursor: Changes the pointer image when the pointer is over an object controlled by the style. Filter: Applies a special effect to the object that the style controls.

Html/css Summary 1

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.