Basic Introduction to CSS
Cascading style sheets (cascading style Sheet) are referred to as "CSS", often referred to as "style Sheet", which is used for web-style design. For example, if you want the link word to be blue when it is not clicked, the word turns red and underlined when the mouse is moved up, which is a style. By setting up style sheets, you can control the display properties of each flag in HTML uniformly. Cascading style sheets make it easier for people to control the appearance of a Web page. Using cascading style sheets, you can expand the ability to precisely specify the location of page elements, their appearance, and the creation of special effects.
CSS is an abbreviation for English Cascadingstyle Sheets (cascading style sheets), a computer language used to represent file styles such as HTML or XML. CSS is currently the latest version of CSS3, is to be able to truly achieve Web page performance and content separation of a style design language. Compared to the performance of traditional HTML, CSS can control the placement of objects in the Web page with pixel-level precision, support almost all font size styles, have the ability to edit Web objects and model styles, and be able to conduct preliminary interaction design, is currently based on the best performance design language text display. CSS can be based on the understanding of different users to simplify or optimize the writing, for all types of people, have a strong legibility.
two. How to use CSS
There are three ways to use style sheets on a site page:
External style: Links a Web page to an external style sheet.
Inner page style: Creates an embedded style sheet on a Web page.
Inline styles: Apply an embedded style to individual page elements.
Each method has its advantages and disadvantages:
Use an external style sheet when you want to apply the same style consistently across all or part of a Web page on a site. Defining styles in one or more external style sheets and linking them to all pages ensures consistent appearance across all pages. If people decide to change the style, they only need to be modified once in the external style sheet, and the change will be reflected on all pages linked to the style sheet. Usually external style sheets are file extensions with. css, such as the public style common.css in the Beef Brisket press release system. Then link it in a page that requires this style, such as:
<link href= "/css/common.css" rel= "stylesheet" type= "Text/css"/>
When people just want to define the style of the current page, you can use an embedded style sheet. An embedded style sheet is a cascading style sheet that is "embedded" within the <HEAD> tag of a Web page. Styles in an embedded style sheet can only be used on the same page. Such as:
<style type= "Text/css" ><!--/* Include the declared style in an HTML comment, which resolves an older browser that does not recognize the style of the problem */
body {Background:grey;}
</style>
Use inline styles to apply cascading style sheet properties to page elements. Such as:
<pstyle= "@importurl (' style3.css ');" >css document</p>
<!--cannot be used in the Style property @import--
If a Web page is linked to an external style sheet, the inline or inline style created for the page expands or overrides the specified attribute in the external style sheet.
To use the style of an external style sheet on a Web page, you can link the page to a style sheet by using the style sheet join command on the Format menu. You can link one or several style sheets to the current page in Page view mode, or to the selected page in the Folder list, or to all pages on the site.
The Style box lists standard HTML tags, such as the title
1, there is also a class or ID selector contained in an embedded style sheet or external style sheet linked to a Web page. To apply a style to a page element, select the style, and then click the style or selector in the Style box.
In Microsoft FrontPage 2000, some formatting attributes are automatically applied as inline styles. For example, if you apply a box around a normal paragraph using the Border and Shadow command (on the Format menu), FrontPage writes formatting information as an inline style attribute for paragraph marks (for example: <pstyle= "Border-style:solid" >). However, the application of some attributes requires CSS, others need to use HTML. If people only want to apply inline styles using CSS, you can apply the class or ID selector or inline style using the Style button (located in the Properties dialog box of the page element).
Third, CSS Text properties:
Color: #999999; /* Text color */
Font-family: Song body, Sans-serif; /* Text font */
font-size:9pt; /* Text Size */
font-style:itelic;/* Text Italic */
font-variant:small-caps;/* Small Font */
letter-spacing:1pt; /* distance between characters */
line-height:200%; /* Set Line Height */
font-weight:bold;/* text Bold */
vertical-align:sub;/* Subscript Word */
vertical-align:super;/* Superscript Words */
text-decoration:line-through;/* + DELETE Line */
text-decoration:overline;/* Add top Line */
text-decoration:underline;/* Underline */
text-decoration:none;/* Delete Link underline */
Text-transform:capitalize; /* First Letter Capital */
Text-transform:uppercase; /* English Capital */
Text-transform:lowercase; /* English lowercase */
text-align:right;/* Text Right-aligned */
text-align:left;/* text left-justified */
text-align:center;/* Text Center Alignment */
text-align:justify;/* Text Dispersion Alignment */
Vertical-align Property
vertical-align:top;/* Vertical Upward Alignment */
vertical-align:bottom;/* Vertical Downward Alignment */
vertical-align:middle;/* Vertical Center Alignment */
vertical-align:text-top;/* Text Vertical Upward alignment */
vertical-align:text-bottom;/* text vertically downwards */
four, CSS symbol properties:
list-style-type:none;/* not numbered */
list-style-type:decimal;/* Arabic numerals */
list-style-type:lower-roman;/* lowercase roman Numerals */
list-style-type:upper-roman;/* Capital Roman Numerals */
list-style-type:lower-alpha;/* lowercase English alphabet */
list-style-type:upper-alpha;/* Capital English Alphabet */
list-style-type:disc;/* Solid Round symbol */
list-style-type:circle;/* Hollow Round symbol */
list-style-type:square;/* Solid Square Symbol */
List-style-image:url (/dot.gif);/* picture-type Symbol */
list-style-position:outside;/* Convex row */
list-style-position:inside;/* Indent */
v. CSS background style:
Background-color: #F5E2EC;/* Background color */
background:transparent;/* Perspective Background */
Background-image:url (/image/bg.gif); /* Background picture */
background-attachment:fixed; /* Floating watermark Fixed background */
Background-repeat:repeat; /* Repeat Arrangement-page default */
Background-repeat:no-repeat; /* Do not repeat the arrangement */
Background-repeat:repeat-x; /* Repeat arrangement on X axis */
Background-repeat:repeat-y; /* Repeat arrangement on y-axis */
Specify background position
background-position:90% 90%; /* background picture x and Y axis position */
Background-position:top; /* Align up */
Background-position:buttom; /* Downward alignment */
Background-position:left; /* Align Left */
Background-position:right; /* Align Right */
Background-position:center; /* Center Alignment */
vi. CSS Connection properties:
a/* All Hyperlinks */
a:link/* Hyperlink Text Format */
a:visited/* the link text format you've browsed */
a:active/* press the format of the link */
a:hover/* Mouse go to link */
Mouse cursor Style:
Link Finger cursor:hand
Cross Body Cursor:crosshair
Arrow facing down Cursor:s-resize
Cross Arrow Cursor:move
Arrow facing right Cursor:move
Add a question mark Cursor:help
Arrow facing left Cursor:w-resize
Arrow facing up Cursor:n-resize
Arrow to top right cursor:ne-resize
The arrow is facing up to the left Cursor:nw-resize
Text I type Cursor:text
Arrow Oblique Right Bottom cursor:se-resize
Arrow Oblique left Lower cursor:sw-resize
Funnel cursor:wait
Cursor pattern (IE6) p {cursor:url ("cursor filename. cur"), text;}
Seven, CSS frame line list:
border-top:1px solid #6699cc; /* Upper Frame line */
border-bottom:1px solid #6699cc; /* Bottom Border */
border-left:1px solid #6699cc; /* Left Border line */
border-right:1px solid #6699cc; /* Right Border line */
This is the way the proposal is written, but it can also be used in the usual way:
Border-top-color: #369/* Set upper Border top Color */
BORDER-TOP-WIDTH:1PX/* Set upper Border top Width */
border-top-style:solid/* set upper Border top style */
Other wireframe Styles
solid/* Solid Line Box */
dotted/* Dashed Box */
double/* two-wire frame */
groove/* three-dimensional inner convex frame */
ridge/* Stereoscopic Relief Frame */
inset/* Concave Frame */
outset/* Convex frame */
The use of CSS forms:
text box <input type= "text" name= "T1" size= ">"
Button <input type= "Submit" value= "Submit" Name= "B1" >
check box <input type= "checkbox" Name= "C1" >
Select button <input type= "Radio" value= "V1" checkedname= "R1" >
Multiline text box <textarea rows= "1" name= "S1" cols= "></textarea>"
Drop-down menu <select size= "1" name= "D1" ><option> options 1</option>
<option> Options 2</option></select>
ix. CSS boundary style:
margin-top:10px;/* Upper Border */
margin-right:10px;/* Right Boundary value */
margin-bottom:10px;/* Bottom Boundary value */
margin-left:10px;/* left boundary value */
10, CSS border blank
padding-top:10px;/* Upper Border left blank */
padding-right:10px;/* right Border left blank */
padding-bottom:10px;/* lower Border left blank */
padding-left:10px;/* left box blank */
11. Scroll bar Style
Scrollbar-face-color: #f3f3f3;/* Color of the bulge of the scrollbar */
Scrollbar-highlight-color: #f1f1f1/* Color of the shaded portion of the scrollbar */
Scrollbar-shadow-color: #fcfcfc/* Stereo scrollbar shadow Color */
Scrollbar-3dlight-color: #fcfcfc/* Color of the scrollbar light */
Scrollbar-arrow-color: #34837/* Color of the triangular arrows on the up/down buttons */
Scrollbar-track-color: #fcfcfc/* Background color of scroll bar */
Scrollbar-darkshadow-color: #66c0f4/* Solid scroll bar strong shadow color */
Scrollbar-base-color: #fcfcfc/* Basic color of scroll bar */
The above is the basic learning of CSS style, such as discrepancies, please forgive me.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
