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
Use inline styles to apply cascading style sheet attributes to web page elements. For example:
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:
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!

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

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

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

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.

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.

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.

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.

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.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

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
A free and powerful IDE editor launched by Microsoft

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
Powerful PHP integrated development environment
