Summary and sharing of the basics of learning CSS styles

It is impossible to do CSS layout without sufficient basic knowledge. This article provides beginners with a basic summary and sharing of CSS styles. Friends who are interested can refer to the commonly used CSS attributes. It may be helpful. Help1．

Basic introduction to CSS

Cascading Style Sheet (Cascading Style Sheet) is referred to as "CSS", usually also called "Style Sheet (Style Sheet)", which is used to Web style design. For example, if you want the link word to be blue when it is not clicked, and then turn red and underlined when the mouse is moved over it, this is a style. By setting up a style sheet, you can uniformly control the display attributes of each mark in HTML. Cascading style sheets allow people to more effectively control the appearance of web pages. Using cascading style sheets, you can expand your ability to precisely specify the position and appearance of web page elements and create special effects.

CSS is the abbreviation of English CascadingStyle Sheets (Cascading Style Sheets). It is a computer language used to express file styles such as HTML or XML. The latest version of CSS is CSS3, which is a style design language that can truly separate web page performance and content. Compared with the performance of traditional HTML, CSS can perform pixel-level precise control over the position and layout of objects in web pages, supports almost all font sizes and styles, has the ability to edit web page objects and model styles, and can perform preliminary interactions. Design is currently the best expressive design language based on text display. CSS can simplify or optimize writing methods according to the understanding ability of different users, making it highly readable for all types of people.

two. How to use CSS

There are three ways to use style sheets on site web pages:

External styles: Link web pages to external style sheets.

Inner page style: Create an embedded style sheet on the web page.

Inline styles: Apply inline styles to each web page element.

Each method has its advantages and disadvantages:

Use an external style sheet when you want to apply the same style consistently to all or part of the pages on your site. Defining styles in one or more external style sheets and linking them to all web pages ensures a consistent look across all web pages. If people decide to change the style, they only need to modify it once in the external style sheet, and the change will be reflected on all pages linked to the style sheet. Usually external style sheets have .css as the file extension, such as the common style Common.css in the Brisket press release system. Then link it in the page that requires this style, such as:



When people just want to define the style of the current web page, embedded style sheets can be used. An embedded style sheet is a cascading style sheet that is "embedded" within the tag of a web page. Styles in embedded style sheets can only be used on the same web page. For example:



Use inline styles to apply cascading style sheet attributes to web page elements. For example:

CSS document

If the web page links to an external style sheet, inline or embedded styles created for the web page will extend or override the specified attributes in the external style sheet.

To use styles from an external style sheet on a web page, link the web page to the style sheet by using the Style Sheet Link command on the Format menu. You can link one or several style sheets to the current web page in Web page view mode, to a selected web page in a folder list, or to all web pages on the site.

The Style box lists standard HTML tags, such as headings

1, as well as class or ID selections contained in embedded style sheets or external style sheets linked to the web page. device. To apply a style to a web page element, select the style and click the style or selector in the Style box.

In Microsoft FrontPage 2000, certain formatting features are automatically applied as inline styles. For example: If you use the Borders & Shadows command (on the Format menu) to apply a box around a regular paragraph, FrontPage writes the formatting information as the paragraph mark's inline style properties (for example: ). However, the application of some properties requires the use of CSS, and others requires the use of HTML. If one only wants to apply inline styles using CSS, they can use the Styles button (located in the Web element's Properties dialog box) to apply class or ID selectors or inline styles.

3. CSS text attributes:

color: #999999; /*Text color*/

font-family: Song Dynasty, sans-serif ; /*Text font*/

font-size: 9pt; /*Text size*/

font-style:itelic;/*Text italic*/

font -variant:small-caps;/*small font*/

letter-spacing: 1pt; /*space between words*/

line-height: 200%; /*set line height */

font-weight:bold;/*Bold text*/

vertical-align:sub;/*Subscript*/

vertical-align:super;/*Superscript*/

text-decoration:line-through;/*Add strikethrough*/

text-decoration:overline;/*Add top Line*/

text-decoration:underline;/*Add underline*/

text-decoration:none;/*Remove link underline*/

text-transform: capitalize; /*Capitalize the first character*/

text-transform: uppercase; /*English capitalization*/

text-transform: lowercase; /*English lowercase*/

text-align:right;/*Text-aligned to the right*/

text-align:left;/*Text-aligned to the left*/

text-align:center;/*Text-aligned to the center */

text-align:justify;/*Text alignment*/

vertical-align attribute

vertical-align:top;/*Align vertically upwards*/

vertical-align:bottom;/*Align vertically downward*/

vertical-align:middle;/*Align vertically in the center*/

vertical-align:text -top;/*Align text vertically upward*/

vertical-align:text-bottom;/*Align text vertically downward*/

4. CSS symbol attributes:

list-style-type:none;/*No number*/

list-style-type:decimal;/*Arabic numerals*/

list- style-type:lower-roman;/*lowercase Roman numerals*/

list-style-type:upper-roman;/*uppercase Roman numerals*/

list-style-type: lower-alpha;/*lowercase English letters*/

list-style-type:upper-alpha;/*uppercase English letters*/

list-style-type:disc;/* Solid circle symbol*/

list-style-type:circle;/*Hollow circle symbol*/

list-style-type:square;/*Solid square symbol*/

list-style-image:url(/dot.gif);/*Picture symbol*/

list-style-position:outside;/*Convex row*/

list-style-position:inside;/*Indent*/

5. CSS background style:

background-color:#F5E2EC;/*Background Color*/

background:transparent;/*Perspective background*/

background-image: url(/image/bg.gif); /*Background image*/

background-attachment: fixed; /*Watermark fixed background*/

background-repeat: repeat; /*Repeat arrangement - web page default*/

background-repeat: no-repeat; /*Do not repeat the arrangement*/

background-repeat: repeat-x; /*Repeat the arrangement on the x-axis*/

background-repeat: repeat-y; /*Repeat on the y-axis Arrange*/

Specify the background position

background-position: 90% 90%; /*The position of the x and y axes of the background image*/

background-position: top ; /*Align up*/

background-position: buttom; /*Align down*/

background-position: left; /*Align left*/

background-position: right; /*Align right*/

background-position: center; /*Align center*/

6. CSS connection properties:

a/*All hyperlinks*/

a:link/*Hyperlink text format*/

a:visited/*Viewed link text format*/

a:active/*Format of pressed link*/

a:hover/*Mouse to link*/

Mouse cursor style:

Link finger CURSOR: hand

Cross body cursor:crosshair

Arrow down cursor:s-resize

Cross arrow cursor:move

Arrow facing down Right cursor:move

Add a question mark cursor:help

Arrow pointing left cursor:w-resize

Arrow pointing up cursor:n-resize

Arrow points to the upper right cursor:ne-resize

Arrow points to the upper left cursor:nw-resize

Text I-type cursor:text

Arrow tilts to the lower right cursor:se-resize

Arrow diagonally lower left cursor:sw-resize

Funnel cursor:wait

Cursor pattern (IE6) p {cursor:url("cursor file name.cur"),text ;}

7. CSS border list:

border-top: 1px solid #6699cc; /*Top border*/

border -bottom: 1px solid #6699cc; /*Bottom border*/

border-left: 1px solid #6699cc; /*Left border*/

border-right: 1px solid # 6699cc; /*Right border line*/

The above is the recommended writing method, but you can also use the conventional method as follows:

border-top-color: #369 /*Set the top border line top color*/

border-top-width:1px /*Set the top width of the top border*/

border-top-style: solid/*Set the top style of the top border*/

Other frame styles

solid/*solid frame*/

dotted/*dotted frame*/

double/*double frame* /

groove/*Three-dimensional inner convex frame*/

ridge/*Three-dimensional relief frame*/

inset/*Concave frame*/

outset /*convex frame*/

8. CSS form application:

Text box

Button

Checkbox

Select button

Multi-line text box

Drop-down menuOption 1

Option 2

9. CSS border style:

margin-top:10px;/*upper border*/

margin-right:10px;/*right Margin value*/

margin-bottom:10px;/*Lower margin value*/

margin-left:10px;/*Left margin value*/

10. CSS border blank

padding-top:10px;/*Leave blank top border*/

padding-right:10px;/*Leave blank right border*/

padding-bottom:10px;/*leave the lower border blank*/

padding-left:10px;/*leave the left border blank*/

十一, Scroll bar style

Scrollbar-face-color:#f3f3f3;/*Color of the protruding part of the scroll bar*/

Scrollbar-highlight-color:#f1f1f1/*Scroll Color of the shadow part of the bar*/

Scrollbar-shadow-color:#fcfcfc/*Three-dimensional scroll bar shadow color*/

Scrollbar-3dlight-color:#fcfcfc/*Scroll bar bright edge Color*/

Scrollbar-arrow-color:#34837/*Color of the triangular arrows on the up and down buttons*/

Scrollbar-track-color:#fcfcfc/*Background color of the scroll bar */

Scrollbar-darkshadow-color:#66c0f4/*Three-dimensional scroll bar strong shadow color*/

Scrollbar-base-color:#fcfcfc/*The basic color of the scroll bar*/

The above is a basic study of CSS styles. Please forgive me if there are any discrepancies.

The above is the detailed content of Summary and sharing of the basics of learning CSS styles. For more information, please follow other related articles on the PHP Chinese website!