Attributes, parameters, and descriptions frequently used by Div + CSS

Source: Internet
Author: User

Generic
Overflow: hidden; automatically hides excess content to prevent opening layers and table ranges.
! Important
Apply priority of a style rule
Text color: # ff0000; text color font-family: "Arial", "Helvetica", "Sans-serif"; font-size: 9px; text-align: center; center (left is left, right is right) line-Height: 28px; Row Height (150% values available) font-style: italic; italic (italic-italic) font-weight: bold; Service bold (bolder-bold, 400) font-variant: Small-caps; small capital letter text-transform: Capitalize; first capital text-Decoration: underline overline line-through blink; Underline, underline, strikethrough, blinking text-indent: 2em; text indent 2 font height (or 15px, 15 pixels)
Background class: Background-Attachment: fixed; fixed position (scroll rolling) Background: # 0066cc; background color (transparent) Background: URL (/image/more2.gif); background image background-repeat: repeat; repeat-X (horizontal repeat-y) Background-position: center top; horizontal center vertical top (left center horizontal center left vertical center) Background: URL (/image/dtbg.gif) # fefefe
No-repeat
Right Bottom (2px 5px );
Background image,
The background color, the image is not repeated, and the background image starts from the bottom right corner (the image is 2 PX away from the left and 5 PX away)
Framework location class
Clear: Both; float objects on both sides (float objects on left and float objects on right)
Float: Left; the position of the floating object is left (right, the location of the latest train schedule is right)
Position: relative; relative position, which is generally set in the upper-level framework
Position: absolute; absolute position. Use the settings of the upper-level framework to set the top and left values.
Top: 5px; absolute page or relative to the top of the frame
Left: 10px; absolute page or relative to the absolute position on the left of the frame
Width: 100px; width: 100px
Height: 200px; Height: 200px (auto and 100% values are available)
Margin Shanghai train schedule: 10px 20px 10px 20px;
Top-Right Bottom left margin (same value can save writing margin: 10px)
Use margin-top: 10px; (margin-right, margin-bottom, margin-left)
Padding: 20 p x 10 p x 10 p x 20 P;
Distance between the upper right and lower left content and the border (the value can be equal to or less than 10px)
Specify padding-top: 10px separately (padding-right, padding-bottompadding-left)
Border: # CCC 1px solid Chengdu train schedule;
Four border color, line width, solid line (dotted line, dashed dotted line, double line, ridge line)
Specify border-top: # CCC 1px solid separately; border-Right: # CCC 1px solid
And so on.
Project List class list-style-position: Outside; position: external (inside) List-style-image: URL (/YH/image/more04.gif ); project Symbol: List-style-type: disc; Project Symbol: dot (circle, square)
Extension class cursor: E-resize; mouse style filter: blur (add = 4, direction = 8, strength = 4); filter: fliph; horizontal flip (flipv GPRS traffic fee vertical flip)
Set link separately
# Bottool A: link {color: # fff}; unaccessed color
# Bottool A: visited {color: # fff}; accessed color traffic software
# Bottool A: hover {color: # ff0}; move the cursor over the link
In fact, the following types of definition items are commonly used: Specify the width and height of the wide and high values; specify the background: background; specify the position: float. In special cases, use position to combine top and left to locate them; set the frame margin: margin; set the container's Inner Frame distance: padding. Overflow, clear, and! are canceled in my style definition ,! Important Program . 1. Cancel overflow: hidden because after repeated experiments, this definition item can only hide content that exceeds the height of the container, but cannot hide content that exceeds the width. What I need is to automatically hide the content beyond the container width. Sometimes, the container height is required to support the container height based on the content. 2. Cancel the clear definition item because the arrangement relationship between containers and containers is truly understood in actual applications, the position of the framework or container is precisely located using float, position, top, left, and so on. 3 ,! Important
Specify the application priority of the style rule. This is mainly used to differentiate the display effect between IE and other browsers. My website just wants to fix the display effect, so there is no priority.
I am still studying Div + CSS. If you have any mistakes, please correct them. If you have any improvement, please follow suit. In my opinion, the most important thing to use Div + CSS to deploy websites is the layout ideas. Different design schemes have different complexity and simplicity. I focus on the versatility of the framework or container and design several container styles, just like the label style in fs4. Then I can call this style as needed to achieve universality rather than specialization. Let's talk about this today. We will talk about this layout design idea later.
Related Article

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.