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
CSS 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.
Mouse Cursor Properties
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