PHP.9-HTML+CSS (iii)-css Style

Source: Internet
Author: User
Tags border color

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.