Home > Developer > Web Develop

CSS Learning (ii)

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

List

In HTML, there are two types of lists:

    • Unordered List-list item markers with special graphics (such as small black dots, small squares, etc.)
    • Sequence table-the list item is marked with a number or letter

Using CSS, you can list further styles and use the image as a list item marker.

All CSS List Properties
Properties Description
List-style Shorthand property. Used to set all properties used for the list in a declaration
List-style-image Sets the image as a list item flag.
List-style-position Sets the position of the list item label in the list.
List-style-type Sets the type of the list item flag.

CssTable

Directly above an instance:

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>Weng Tutorials</title><style>table,td,th{Border:2px solid Gray;}Table{width:100%;Border-collapse:collapse;}th{Background-color:Blue;Color:Yellow;Height:60px;padding:10px;//margin td, Th is 6PX}TD{text-align:Center;Height:35px;vertical-align:Bottom;padding:8px;//If you control the border between spaces in the contents of the table, you should use the fill properties of the TD and TH elements:}            </style></Head><Body><Table><TR><th>Firstname</th><th>Lastname</th><th>Savings</th></TR><TR><TD>Peter</TD><TD>Griffin</TD><TD>$</TD></TR><TR><TD>Lois</TD><TD>Griffin</TD><TD>HK $</TD></TR><TR><TD>Joe</TD><TD>Swanson</TD><TD>$</TD></TR><TR><TD>Cleveland</TD><TD>Brown</TD><TD>$</TD></TR></Table></Body></HTML>
View Code

Box model

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, which include: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the box model:


Description of different parts:

      • margin (margin) -clears the area outside the bounding rectangle and the margin is transparent.
      • Border (border) -a border around the inside margin and outside the content.
      • Padding (inner margin) -clears the area around the content and the padding is transparent.
      • Content-The contents of the box, displaying text and images.
BorderBorders-Set each side individually 
p{    border-top-style:dotted;    Border-right-style:solid;    border-bottom-style:dotted;    Border-left-style:solid;}
CSS Border Properties
Properties Description
Border Shorthand property, which is used to set properties on four sides in a declaration.
Border-style The style used to set all borders of an element, or to individually set border styles for each edge.
Border-width Shorthand property to set the width for all the borders of an element, or to set the width individually for each edge border.
Border-color Shorthand property, sets the color of the visible part of all the borders of an element, or sets a color for 4 edges.
Border-bottom Shorthand property, which is used to set all properties of the bottom border to a declaration.
Border-bottom-color Sets the color of the bottom border of an element.
Border-bottom-style Sets the style of the bottom border of an element.
Border-bottom-width Sets the width of the bottom border of an element.
Border-left Shorthand property, which is used to set all properties of the left border to a declaration.
Border-left-color Sets the color of the left border of the element.
Border-left-style Sets the style of the left border of an element.
Border-left-width Sets the width of the left border of the element.
Border-right Shorthand property, which is used to set all properties of the right border to a declaration.
Border-right-color Sets the color of the right border of an element.
Border-right-style Sets the style of the right border of an element.
Border-right-width Sets the width of the right border of an element.
Border-top Shorthand property, which is used to set all properties of the top border to a declaration.
Border-top-color Sets the color of the top border of an element.
Border-top-style Sets the style of the top border of an element.
Border-top-width Sets the width of the top border of an element.

CSS outlines (outline)

A contour (outline) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as an element of prominence.

The CSS outline property specifies the style, color, and width of the element outline.


The number in the CSS column indicates which CSS version defines the attribute (CSS1 or CSS2).

Properties Description value CSS
Outline Set all profile properties in a declaration Outline-color
Outline-style
Outline-width
Inherit		 2
Outline-color Set the color of the outline Color-name
Hex-number
Rgb-number
Invert
Inherit		 2
Outline-style Set the style of the outline None
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
Inherit		 2
Outline-width Set the width of the outline Thin
Medium
Thick
length
Inherit

CSS Learning (ii)

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.

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

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