Home > Developer > Web Develop
CSS Styles
CSS is a shorthand for cascading Style sheets, which allows you to easily set the display location and format of page elements, and even produce filters, image fades, and fade-out gradients. CSS is to display the effect of the Web page with Word layout control a paragraph, font, color, background, border and so On.
Note: comments/* * * cannot contain annotations
1, CSS four ways to set
Inline style sheet: inline with the style attribute in HTML element tags, not applicable if the same style is required
Each HTML tag can be styled as Follows:
<span style= "font-size:18px;" ><span style= "font-size:18px;" ><body><p>aaaaa</p><p style= "color:red;font-size:4cm;border:2px Solid blue; Text-align:center ">bbbb</p><p style=" color:red;font-size:4cm;border:2px Solid blue; Text-align:center ">cccc</p><b style=" Color:blue ">wwwwwww</b></body></span>< /SPAN>
Embed style Sheet: embed CSS into HTML using HTML <style> tags
You can control all styles for the entire page
<span style= "font-size:18px;" >
External style sheet: defines a style separately in a document with a suffix of. css, and is used in HTML to connect to HTML through the link Element.
Multiple pages can be used
<span style= "font-size:18px;" >
Input style sheet: You can enter a style file into another style file, or enter a style file into the <style> element
@import URL (css file) "fragment file into full CSS file"
<span style= "font-size:18px;" >p {background-color:green;} @import url (one.css), @import url (two.css), @import URL (three.css);</span>
Priority Level:
The inline is higher than the other, and the other is related to the order of loading
2. Style Selector
Selector: When you define a style rule, you must specify the page element that is affected by the style rule, and the page element defined in one rule is Selector (selector), which is the page element that the style rule is used for.
1. HTML Selector
HTML has tags, CSS uses selectors
A selector is a name given to an internal or external style Sheet.
HTML tag, used to change the style of a specified label
Any element can be a CSS selector
2. Class Selector
The same selector can have different classes, thus allowing the same element to have different style-setting methods
[tag]. class name (the class name is custom, and all HTML elements are represented if no tag is added)
<tag class= "class Name Class Name 1 class name 2" > (multiple classes can be used for the same element, separated by a space between class names)
3. ID Selector
In an HTML page, the id attribute specifies a single element, and the id attribute is used to define a separate style for a single element
An HTML page in which the id attribute value is unique
4. Correlation Selector
The Association selector is simply a string of two or more single selectors separated by a space
Because of the rules of stacking order, they have precedence over a single choice sizes
Must be used in relation to an association, not in reverse order
As long as you can keep the correlation, no matter how many layers
5. Combination Selector
In order to reduce duplicate declarations of style sheets, the combination is allowed
Just use commas (,) to separate each Selector.
6. Pseudo Element Selector
Pseudo-element selectors are a way of defining the same HTML element in a different state
Currently only the A and P two HTML elements can be used
<a> tag defines a hyperlink that is used to link from one page to Another. Its most important attribute is the href attribute, which indicates the target of the Link.
<p> Label Definition Paragraphs.
#使用时的语法
Tags: pseudo element Tags [. class name]: pseudo-element
A:link doesn't have any pre-operational status.
A:hover the cursor to the state on the hyperlink
A:active: Select the status of the hyperlink
a:visited access to hyper-connected status
P:first-letter the state of the first letter in a paragraph
P:first-line the state of the first line in a paragraph<style>a:link {color:green;font-size:1cm;} A:hover {color:red;font-size:2cm;} A:active {color:blue;font-size:2cm;} a:visited {color:yellow;font-size:1cm;} P:first-letter {color:red;font-size:3cm;} P:first-line {color:yellow;font-size:1cm;} </style>
# #样式规则的继承
All HTML tags nested in an HTML tag inherit the style rules set by the outer label.
# #样式规则的优先级
Association >id selector >class Selector >html Tag Selector
#################################################################################
How to download CSS files in a page: http://www.daimami.com/HTML-CSS/188531.htm
#################################################################################
3. Properties and values of common CSS
1. font
Font: [< font style > | | < font morphing > | | < font bold >]? < font size > [/< row Height >]? < font family section >
#根据值判断属性, It's best to enter it sequentially
Properties of decorated fonts in CSS
Properties
Description
Property value
Font-family
Font family Section
Any font family section name can be used such as times, serif, etc., and the assignment of multiple families can be used, separated by commas, to prevent the selection of Non-existent font family Section
Font-size
Font size
You can use absolute size, relative size, length, or percentage
Font-style
Font style
Normal (normal), italic (italic) or oblique (inclined)
Font-weight
Font Bold
normal, bold, bolder, or lighter, etc.
Font-variant
Font warp
Normal (normal) or small-caps (small capital Letter)
2. text
Properties of control text common in CSS
Properties
Description
Property value
Letter-spacing
Letter Spacing
The value must conform to the length format, allowing negative values to be used
Word-spacing
Text interval
The value must conform to the length format, allowing negative values to be used
Text-decoration
Text decoration
Underline (underline), overline (underline), line-through (strikethrough), blink (flashing), or default use of None
Text-align
Horizontal arrangement
left, right, center, or Justify
Text-indent
Text indent
The value must be a length or a percentage, depending on the width of the ancestor element, as a percentage
Line-height
Row height
You can accept a value that controls the interval between text Baselines. When the value is a number, the row height is multiplied by the amount of the Element's font size and the Number. The percentage value is relative to the size of the element font. Negative values are not allowed
3. background
Background: < background color > | | < background image >| | < background repeat > | | < Background Accessories >| | < background position >
Properties of the control background common in CSS
Genus
Description description
is value
Background-color
Background color
Value and color property values are set the same way or use transparent (transparent) values
Background-image
Background image
Picture URL or none (none)
Background-repeat
Repeating background
repeat, repeat-x, repeat-y, no-repeat
Background-attachment
Background attachment
Scroll (scrolling) or fixed (pinned)
Background-position
Background position
Horizontal keywords (left, center, right), vertical Keywords (top, Center , bottom) percent and length can also be used to arrange the position of the background image
Page optimization
Apply multiple icons to the same image "reduce server requests to optimize"
Multiple icons placed in the same image, by defining a chunk of the background positioning, call the same image in different locations of small icons, The advantage is that the number of requests to the server can be reduced, thereby speeding up the page access speed
4. Location
5. Border
A. Border properties
Any element can be set border border property is used to set an element border style, border width, border color of the slightly write, you can set 4 sides of the border, you can also set the top, right, bottom and left borders Separately.
B. Border style properties
The style of the upper and lower borders can be set by the Border Style property border-style, which is used to style the border of an element and must be used to specify the visible border. You can use 1 to 4 keywords, and if the four values are given, they are applied to the top, right, bottom, and left border styles, respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted values and the Bensian can also be used, respectively, border-top-style, border-bottom-style, Border-left-style and Border-right-style properties individually set the style of each side
C. Attribute values used by the style of each side
None: No border, No matter how big the border width is dotted: point line border dashed: broken line border solid: straight line border double: two-wire border groove: Groove border ridge: Ridge border inset: Inline effect border outset: outline of the effect
D. Border width properties
The width of the left and right borders can be set by the border Width property border-width, which uses 1 to 4 values to set the bounds of the element, which is a keyword or length and does not allow negative lengths.
If four values are given, they are applied to the top, right, bottom, and left border styles, respectively.
If only one value is given, it will be applied to each edge.
If two or three values are given, the omitted value is equal to the Edge. This property is a slight write to the top border width, the right box width, the bottom border width, and the left border width Property.
You can also set the width of each side individually using the border-top-width, border-bottom-width, border-left-width, and Border-right-width Properties. In addition to using length unit values, You can also use medium (which is the default), thin (finer than medium), or thick (thicker than Medium) Values.E. Border color Properties
The color of the left and right borders can be set by the border color property border-color, which can be used between 1 and 4 keywords. If four values are given, they are applied to the top, right, bottom, and left border styles, respectively. If a value is given, it is applied to each edge. If two or three values are given, the omitted value is equal to the edge
F. Write-Down border properties
Mouse Cursor PropertiesCSS property Border is a quick and comprehensive notation of the border property, which is a set of the width, style, and color of the border of an element, which contains the Border-width,border-style and Border-color Properties.
The Border property border can only set four borders, and can only give the width and style of a set of Borders. In order to give a different value to the four borders of an element, the creator must use one or more attributes, such as: top, right, bottom, border, border, width, border, top, border, border, width, or left box Width.
The default mouse pointer in the Web page is only two, one is the most common arrow, and the other is the "small hand" that appears when you move to the Link. But now more and more Web pages are using CSS mouse pointer technology, when you move the mouse over the link, you can see a variety of different effects. CSS can be changed by the cursor property of the mouse shape, its properties can be the default mouse shape defaults, small hand shape hand, Cross cross crosshair, text selection symbol text, Windows hourglass shape wait, Mouse help with a question mark and the value of the arrow property in each direction of the Move.
6, the list "commonly used for style self-tuning"
Properties of control lists common in CSS
NL style: Unordered
OL Style: ordered
Properties
Description
List-style-type
Set the symbol type of the boot list item, you can set a variety of symbol types, the value is disc, circle, square, etc.
List-style-image
Using images as custom list symbols
List-style-position
Determine the extent to which list items are indented
7. Other
PHP.9-HTML+CSS (iii)-css Style
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
