[Reproduced] "CSS style website design" elements
Related Tags:
1, CSS is Cascading style Sheets (cascading style sheets) short. Usually called CSS is CSS1, a cascading style sheets.
2, edit CSS files: html and edit the same way. There are three kinds:
Use common hypertext editor to achieve, such as Frontpage, Dreamweaver;
Format without using any text editor to prepare, called suffix. Htm or. Html, such as notebook, tablet;
Format without using any text editor to prepare, called suffix. Css.
CSS preliminary understanding of Chapter II
1, will be combined with HTML styles: There are four methods.
In the document used <HEAD> <Style type = "text / css"> </ style> definition;
Use <LINK> elements link to external style sheets. <LINK REL="stylesheet" href="style1.css">;
In "BODY> internal elements of the definition of the use of <STYLE> CSS, such as <H3 Style ="">;
Use CSS "@ import" tags to import style sheets;
2, selectors
In h3 (font-family: arial) h3 is in the selectors. Font-family property is, arial the attribute value. Attributes and attribute values between the colon to separate. If it is used to define a number of properties, attributes and attribute between a semicolon separated. Attribute definition for a number of attribute values, separated by commas.
Any html tags can be as selectors. But sometimes used class and id more convenient. To the class. Its beginning, beginning with # id. Id class and usage almost by id to choose a unique name at the call script will be easier. However, if the use of style sheets without the use of script with a good class than id.
3, the CSS easier and more powerful
There are several ways to CSS more easily and more powerful:
Context use of the selectors: If strong em (color: red)
Selectors organization: If h1, strong em, td (color: blue;)
Simplify the code: If em (font: 12pt/14pt bolder arial, helvetical)
Use of anchored pseudo-categories: such as a: link (color: red), select elements of the middle school types can be omitted and the use of default values such as: link (color: red)
4, positioning
The use of elements of Position attributes and an absolute positioning (absolute) and the relative position of (relative).
5,3-D technology
The use of z-index attribute.
6, special effects
Including shear (clip), the overflow (overflow), Visibility (visibility) attributes. Shear properties can be covered so that the object is displayed, if the overflow attribute to the designated target on a small frame than it in the how to deal with, we can see that attribute of an object can be controlled is visible - is the production of special effects a good way.
Chapter III CSS further study
1, the statement notes: / * here to join Notes * /
2, pseudo-categories:
Choose the middle school Element type can be omitted and the use of default values such as: link (color: red)
Pseudo-type can be used in association selectors in: a: link img (border: solid blue)
Pseudo-class combination with the generic category: a.external: visited (color: blue)
3, the first trip and the first word pseudo-elements:
Pseudo-first line elements: p: first-line (font-style: small-caps) first word pseudo-elements: p: first-letter (font-style: small-caps)
Selectors, pseudo-elements: p.initial: first-letter (color: red)
4, cascading sequence of specific rules:
If the selectors and matching elements, which play a role in the statement if the statement does not apply with inherited values if there is no succession of values, use the default values.
Tagging! "Important" than that of the high-level tagging;
The author's style sheets covering the readers style sheets, and readers coverage of the UA.
By choice at the index to order. (Omitted)
By order, after the implementation of a win.
Chapter IV CSS Attributes
1, Font attributes
And the font attributes include: font-family, font-style, font-variant, font-weight, the font-size, the font. Executive order: font-style, font-variant, font-weight, font-size
1, font-family: If the font name contains spaces, we should be coupled with double quotes.
2, font-style: normal | italic | oblique
3, font-variant: normal | small-caps
4, font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Equivalent of 400 normal, bold equivalent to 700
5, font-size: absolute-size | relative-size | length | percentage
Absolute-size: xx-small | x-small | small | medium | large | x-large | xx-large
Relative-size: larger | smaller
6, font: font-style | font-variant | font-weight | font-size | line-height | font-family
Attribute definition of a font can be mentioned in front of all the font attributes.
Second, and Background Color attributes
1, color: generally refers Jianjingse.
2, background-color: background color.
3, background-image:
body (background-image: url (marble.jpg))
4, background-repeat: repeat | repeat-x | repeat-y | no-repeat
Body (background-image: url (marble.jpg); background-repeat: repeat-y)
5, background-attachment: scroll | fixed
Set text in the background logo above rolling, background patterns remain fixed without using fixed.
6, background-position: percentage | length (1,2) | top | center | Bottom | left | center | right
7, background: background-color | background-image | background-repeat | background-attachment | background-position
Can be installed in front of an all relevant background attributes. If body (background: white url (bg.jpg))
Third, text attributes
1, word-spacing: normal | length
2, letter-spacing: normal | length
3, text-decoration: none | underline | overline | line-through | blink
4, vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage
Alignment picture of this property used to particularly good effect. If image (vertical-align: baseline)
5, text-transform: capitalize | uppercase | lowercase | none
Capitalize: Each word of the first letter capitalized.
Uppercase: All characters are capitalized.
Lowercase: All characters are lowercase.
6, text-align: left | right | center | justify
7, text-indent: length | percentage
Apply to block-level elements to the definition of the first indent text mode. If p (text-indent: 1cm)
8, line-height: normal | number | length | percentage
4, containers attribute
1, margin-top: length | percentage | auto
If body (margin-top: 0)
2, margin-right: Ibid.
3, margin-bottom: Ibid.
4, margin-left: Ibid.
5, margin: length | percentage | auto (1,4)
The first four attributes can be used to define the margin. If the value is less than 4, then select the loss on the part of the value of the edge.
6, padding-top: length | percentage
7, padding-right: Ibid.
8, padding-bottom: Ibid.
9, padding-left: Ibid.
10, padding: length | percentage (1,4)
Previous four attributes can be used to define the padding. If the value is less than 4, then select the loss on the part of the value of the edge.
11, border-top-width: thin | medium | thick | length
12, border-right-width: Ibid.
13, border-bottom-width: Ibid.
14, border-left-width: Ibid.
15, border-width: thin | medium | thick | length (1,4)
Previous four attributes can be used to define the border-width. Can be given a one, two, three or four border-width values. If the value is less than 4, then select the loss on the part of the value of the edge. If h1 (border-width: thick thin medium)
16, border-color: <color> (1,4)
If a value is given, then the four frame colors are the same. Otherwise missing from the edge-to-edge color access.
17, border-style: none | dotted | dash | solid | double | groove | ridge | inset | outset
Dotted: point of the dashed line.
Dash: short-term component of the dotted line.
Double: lane.
Groove: 3D trench-like frame.
Ridge: 3D ridge-shaped frame.
Inset: 3D embedded frame (darker).
Outset: 3D embedded frame (color junior).
18, border-top: border-top-width | border-style | color
Elements of a top-width, style and color can be a top-designated border.
19, border-right: Ibid.
20, border-bottom: Ibid.
21, border-left: Ibid.
22, border: border-width | border-style | color
To set up a time frame all elements of the Width of styles and colors, you can use the border. Borders can only make four Border are the same.
23, width: length | percentage | auto
24, height: length | auto
25, float: left | right | none
Elements can be applied to Float around in a text element around. Html than in the align attribute wider application, not just pictures and tables, all the elements can be used float attribute.
26, clear: none | left | right | both
And the float should be relative. If the right is not the right elements into any object.
5. Classification attributes
1, display: block | inline |-item list | none
2, white-space: normal | pre | nowrap
3, list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Disc: Disc
Circle: circle
Square: box
Decimal: a decimal number 1,2,3……
Lower-roman: lowercase Roman numerals i, ii, iii ...
Upper-roman: uppercase Roman numerals I, II, III ...
Lower-alpha: lowercase letters a, b, c. ..
Upper-alpha: capital letters A, B, C. ..
4, list-style-image: url | none
If ul (list-style-image: url (bullet.gif))
5, list-style-position: inside | outside
Decision out of the second line from the left side of the first line with the addition symbol outside the first letter of alignment.
6, list-style: keyword | position | url
Can be a designated list-style-type, list-style-image, and list-style-position attributes.
6, mouse properties
Cursor: auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help
Chapter V CSS units
First, the length of units
1, the length of absolute value: cm, mm, in, pt, such as pc. Absolute best value for the length of print output devices, and used only as a Display of absolute length is not much significance.
2, the relative length value: CSS support the following units pc, em, ex
Em is highly representative of the capital letter "M" (or "H") level. Superiority of designers and users have the right to control font size, defect, the early version of the browser does not support.
Second, Color Units with a percentage value that if color: rgb (50%, 0,50%)
Use integer values between 0-255 to set up: If color: rgb (128,0128)
Use hexadecimal color array definition: if # fc0eab
The use of simplified definition hexadecimal color: If # 080
Named for colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
3, URL units
URL units of a specific format: "url" after keeping up with a square brackets, square brackets is the url address. If the addresses used in the brackets, commas, spaces, single quotes River double quotes, then it must address the entire outside with a pair of single or double quotes in quotation marks. Address can be absolute or relative address address.
Chapter VI CSS formatting model
CSS formatting defined to include two elements: block-level elements and elements of the industry.
Chapter VII CSS positioning
Relative Positioning: Allow elements in relation to the layout of the original document on the location of migration (OFFSET) operation.
Absolute positioning: Allow elements of the original document layout arbitrary separation and positioning.
1, CSS positioning attributes
Position, left, top, width, height, clip, overflow, z-index, visibility
1, position: absolute | relative | static
It is absolutely absolute positioning relative is relative positioning, in the scripting language of animation effects very useful; static default is not positioning capabilities.
2, left, top: length | percentage | auto
Vertex is positioning the upper left corner of the value of the reference point. Css formatting object is placed in a rectangular a "container" in the upper left corner of this rectangle is the peak value of the positioning point of reference. And the top left of any value in terms of the upper left corner is relative. Left of the containers is left vertex to the higher-level elements of the distance between the left border; top of the container is left on the peak to the higher-level elements of the distance between the border.
3, width, height: length | percentage | auto
4, clip: shape | auto
Shape: rect (top, right, bottom, left),
A regional shear element which defines a rectangular part of that.
5, overflow: visible | hidden | scroll | auto
Overflow decision in the contents of the elements beyond its width and Height restrictions, how to deal with the browser. Use visible, the width of elements can be greater than the original statement. Filling any distance or borders are retained and expanded accordingly. The use of hidden, any statement beyond the original height and the width of the content will become visible. The use of auto, it is more than height or width, the browser will provide a set of tools to scroll. Use scroll, said that if the browser supports scroll tool, regardless of whether the content of elements beyond the borders, this tool should be displayed. This avoids some of the dynamic display in the state, the rolling of the need to show that the problem of confusion.
6, z-index: auto | integer
7, visibility: inherit | visible | hidden
Inherit (inheritance) is the default.
Chapter VIII CSS Print support (abbreviated)
Chapter IX CSS and frame structure
1, attributes
"@ Page" allows users to define the framework of the external layer attributes; "@ frame" allows users to embed definition of the framework.
1, parent: <frame name>
2, zindex: <number>
3, layout: fill | fixed | row | column
Fill is the default value, but also provides the traditional layout. In the framework of the contents of the browser according to the traditional methods are out as a html file, left, top, right, bottom value will be negligible.
Fixed: not one of the elements are placed in the framework of the structure of the fixed position.
Layout: row accordance with the framework set out in the form of a single close to the line up with each other.
Layout: column in accordance with the framework in the form of a single line next to line up with each other.
4, content: <url> | normal
5, border: length | style | url | color
6, padding: values
7, background: transparent | color | url | blend-direction | repeat | scroll | position
Second, the framework will be associated with html elements
The use of flow: Property. If p (flow: the main) <P> content on the main framework.
Third, to set up hyperlinks to the framework of the objectives
<target:> Attributes.
Target: _blank open a new window.
Target: _popup open a new pop-up window frame usually does not change applies to information warning.
Target: _self in the current structure of the open framework will cover the current content.
Target: _parent superiors in the current framework of an open, if there is no higher-level framework, will be open in its own framework.
Target: _top open in the current window, covering all framework.
Fourth, dealing with the "spillover"
Overflow: autoscroll | scrollbar | hand | button | any
Chapter 10 CSS and HTML (abbreviated)
Chapter XI voice cascading style sheets
A GM attributes voice
1, volume:% | silent | x-soft | soft | medium | loud | x-loud
2, pause-before: time value of | percentage of that element before the halt
3, pause-after: ditto that element of the standstill
4, pause: 2 and 3 is a simple form specified.
5, cue, the cue-before, cue-after: url | none
6, play-during: url | mix? Repeat? | Auto | none specified background noise.
7, azimuth: angle | left-side | far-left | left | center-left | center | center-right | right | far-right | right-side | behind | leftwards | rightwards provide voice market Dreamland effect.
8, elevation: angle | below | level | above | higher | audio settings of the lower elevation position.
9, speech-rate: number | x-slow | slow | medium | fast | x-fast | faster | slower reading speed.
10, voice-family: voice-specific | generic voice-|
11, pitch: hertz | x-low | low | medium | high | x-high pitch standards.
12, pitch-range:% 0% volume representative of flat, monotonous voice; 50 percent on behalf of ordinary voice on behalf of more than 50% vibrato.
13, stress:% voice stress level.
14, richness:% of the full extent of reading voices.
15, speak-punctuation: code | none more so rich literary grace.
16, speak-date: myd | dmy | ymd reading date specified manner.
17, speak-numeral: digits | continous | none reading digital methods.
18, speak-time: 24 | 12 | none control whether the time in accordance with the 24-hour reading.
Chapter XII css filter and fountain
Filter: filtername () is to achieve the pattern of attribute filters. For a number of filter elements can be role attributes.
First, filters attribute
1, alpha Syntax: filter: alpha (Opacity =, FinishOpacity =, = Style, StartX =, StartY =, = Finishx, FinishY =) role is the one element mixed with the background.
Opacity transparency representatives from 0-100.
Finishopacity designated graded at the end of transparency.
Designated transparent style of the shape of the region. 0 - uniform shape; 1 - Alignment; 2 - radial; 3 - rectangular.
StartX startY representative and transparent effect to begin the x, y coordinates;
FinishX finishY representatives and the end of the x, y coordinates.
2, blur Syntax: filter: blur (add =, = direction, strength =) role is a blur effects.
Add the designation was changed to picture Impressionist blur effects. True, false set to add the text = 1 good effect.
Fuzzy set the direction of direction. Have 0,45,90,135,180,225,270,315
Strength can only be integer, the number of pixels on behalf of the width of impact will be fuzzy. The default value is 5.
3, chroma Syntax: filter: chroma (color =) set a target for the color specified in the transparent color.
4, dropshadow Syntax: filter: DropShadow (color =, = OffX, OffY =, Positive =) add an object of the shadow effect.
Positive can be true for any non-transparent pixel establishing the foreseeable projection. When the false transparent pixel on the part of the establishment of that projection.
5, FlipH Syntax: filter: FlipH level of turnover.
6, FlipV Syntax: filter: FlipV vertical flip.
7, Glow Syntax: filter: Glow (color =, strength =) Edge luminous effect. Strength from the 1-255 number.
8, Gray Syntax: filter: Gray plans to become a gray level image.
9, Invert Syntax: filter: Invert negatives effects.
10, Light Syntax: filter: Light Source projection simulation results.
11, Mask Syntax: filter: Mask (color =) for the establishment of a target surface covered in the film.
12, Shadow Syntax: filter: Shadow (color =, = direction) in the direction of the establishment of designated objects projection.
13, Wave Syntax: filter: Wave (add =, freq =, = LightScrength, Phase =, Strenth =) fluctuations in effect.
Add default value is true that whether or not to object in accordance with the vertical waveform patterns disrupted.
Freq is corrugated frequency. This object specified in the above need to have a total number of full bellows.
Lightstrength bellows can be enhanced lighting effects. From 0-100.
Set sinusoidal phase of the beginning of cheaper. 0-100.
Representative strength amplitude size.
14, Xray Syntax: filter: Xray and reflects the contours of the object contours Zengliang.
-- All END --
Note:
1, please refer to "CSS style website design - CSS explain the use of" Si-Wei Huang of Telecom Publishing House.
2, above CSS mean CSS1.
- Italic style of navigation
- [Original] css style tips: on the links-style settings!
- Change the style file box
- How to management style!
- CSS - Cascading Style Sheets
- Css style details, page scrolling Style
- XHTML CSS style into what?
- Layout style control
- Css style Xi summary
- Web2.0 visual style evolution
- No. 1 on the css style sheet
- CSS style names on the underlined
- Establish a Web site's style
- Cascading Style Sheets (CSS cascading style sheets)
- Home style developed
- The definition and use CSS style
- Default style sheet
- Css underscore style
- Css style (table)
- Css page of the Style rolling - css style
Use Dreamweaver to achieve the resolution of the different positioning
1. First of all you need to www. Macromedia. Com website boost download a plug-called CenterLayers 2.3 (download the former must first register on the website), size 8 K. Then Exention manager will be installed plug-ins (do not tell me that...
+ + CSS DIV JS Categories Show
Pacific Internet computer classification menu display <script Language="javascript"> Function MM_findObj (n, d) (/ / v3.0 Var p, i, x; If (! D) d = document; If ((p = 0 & & n.indexOf ("?")...
Portal is how to resolve the north-south access problems
IDC-network data centers, in China, this line is simply too helpless. Southern Telecom to the Ministry of Information Industry of North Netcom moment, it is doomed to the Chinese network is garbage. To be a portal site, how to speed user access to the South and the...
On the domain name registration, investment issues related explained
International domain name registration trap At present the three major domestic domain agents Channel, the new network million to the domestic network of general agents international domain name registration prices are 75,60,70 yuan. Price stability of the market i...
Csdn Blog template CSS code (5): Blue Sea
Preview: click to view map Rejuvenate steps: Enter the background, configuration options open Skin choice keso Below the css code will be to copy custom css text box, the final preservation A: visited, A: act...