search
HomeWeb Front-endCSS TutorialSummary 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 menu

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Anchor Positioning Just Don't Care About Source OrderAnchor Positioning Just Don't Care About Source OrderApr 29, 2025 am 09:37 AM

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.

What does margin: 40px 100px 120px 80px signify?What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment