CSS basics {property: value;}-CSS Tutorial-php.cn

1.CSS is the abbreviation of Cascading Style Sheets. It is used to define the display form of HTML elements.
2. There are three ways to introduce CSS into HTML:
a. External style sheet:

b. Embed style sheet:

c. Inline style sheet:
The attribute name is style. Example:

3. Selector in CSS:
A: Simple selector;
a: Element selector; Element { attribute: value; }
b: class selector; .class name { attribute: value; } Note that there is a dot.
c: ID selector; #id name { attribute: value; } Note that there is a #, the ID selector can only be referenced once, while the class selector can be referenced multiple times.
d: pseudo-class selector; (has four states) a:link 3. a:hover{ }( The mouse is on the link)
{ }
4. Compound selector ：
a:Intersection selector: The intersection selector is composed of two selectors directly connected, and the result is to select the intersection of their respective element ranges.
The first one must be a tag selector, and the second one must be a category selector or ID selector. There can be no space between these two selectors.

b: Union selector:
c: Descendant selector: (inherited The influence of the nearest) descendant selector is not limited to the "direct descendants" of the element, but also affects its "descendants at all levels"
5. Understand the cascading of style sheets:
The priorities of the levels from small to large are:
External style sheet
use use using ’ s ’ s
use using ’s ’ through ’s ‐ through ‐ ‐‐ ‐‐ ‐                                                                                                                                                                               ; Basic attributes---Text style
1. Length unit 1.px 2.em
2. Color definition color
3. Set font style Set the font of the text font-family: "Heilong";
Set the font tilt effect font-style ：Italic；
using font-weight: 100 (range 100-900, the larger the font) The thicker)

Set English letter case conversion text-transform: capitalize; (capitalize the first letter of a word)
Set control text size font-size:..px/..%/..em
out through ’ s through through use through ’ through ’ through ’ s ‐ ‐ off ‐‐ ‐‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ underline/line-through (strikethrough)/overline (top line);

4. Set the paragraph style Set the indent of the first line of the paragraph text-indent: ..em (..standard character size distance)/..px ；
‐ ‐ ‐ ‐ ‐ ‐ ‐ set the distance between words letter-spacing (letters):..px; . Controlling the horizontal position of text text-align :left/right (right-aligned)/center (centered)/justify (aligned at both ends)
                                                                                                                                                         Set the text and background color                 background-color:...; :...;(Only works for elements in table cells)

Basic attributes of css - image style
1. Set the picture border: border-width: (thickness) ; border-color: (color) ; border-style: (linear) ;
Different borders can be set in different styles. eg: border-left-style, border-top-width .... solid solid line
2. Image scaling: width height (percent, pixels)
3. Mixed graphics and text:
Text wrapping: float (floating)
Alignment of pictures and text: horizontal alignment text-align:

<br/>

Copy after login

Vertical alignment vertical-align:
4,. Set the background color and image: background-color: background-image:url(address) You can use background-repeat: to control tiling, repeat: horizontal and vertical tiling, default value. At No-Repeat: Not flat. X Repeat-X: Laip it in the horizontal direction.
.
5. Set the background image position: background-position: (two values can be set eg: left top)
6. Set the background image fixed position: background-attchment: fixed; Image scrolling: scroll
small dots, list-style: none; Positioning (see position7) 1. Absolute positioning: (The element frame set to relative positioning will be offset by a certain distance. The element still retains its shape before positioning, and the space it originally occupied is still retained. )
The position of the element is relative to the nearest positioned element,
Top:..px;
px;
^{. : table border bgcolor: table color border-collapse: merge adjacent columns Border line
border-spacing using using using using through through out through through out through out through through off ‐ ‐ ‐ ‐‐ ‐‐‐‐border}

: Indicates the header of the table : Indicates the content of the table : Indicates the tail of the table (The order can be different, but it is generally in order)

2. Set the style of the table when the mouse passes over: a:hover
3. CSS and form: a: production Button like text
transparent (transparent) Set the background to be transparent
border:0px; eg:
b: Make a colorful drop-down menu select option
c: Make an input box with only underline border: 0px/none;
border- bottom: 1px (thickness) dashed (linear) #000000 (color);
                            Supplement: 1. display: block (row-level elements are replaced with block-level elements) / inline (block-level elements are replaced with row-level elements)
                                             Device:: NTH-OF-TYPE (N) Selector matching each element of the n n element of the nly element of the parent element .
N can be numbers, keywords or formulas.

                                                                             Use CSS to set links and navigation menus (les9)
1. Set hyperlink styles: In HTML                                                                                                                                                           a:visited (visited). a:link{ } a:active{ }
(You can set these) background: ;
color: ; Border-top: px .
3. Make a fluorescent menu: Apply an unordered list,
, a:hover, (check les9).
4. Control the mouse (cursor) pointer . {cursor: } (check other CSS 2.0 Chinese manuals under properties).
5. Set the project list format: You can use ordered list

and unordered list

Use list-style to set.

6. Create a simple navigation menu:

a: Vertically arranged menu

List-style-type:none is often used. Its function is to remove the ordered or unordered list numbers or dots in front.

b: Horizontal menu

To achieve horizontal and vertical conversion, just set float:left and cancel the width.

7. Set the picture flip effect: (referring to a picture on the web page, which is changed to another picture when the mouse pointer passes over it.) You can use hover.

Attribute rotate(angle)

Effect: When the mouse moves up, the list can rotate to the angle you set. (Zheng is clockwise, negative as counterclockwise, if it is 180 degrees, you can see that the word is inverted. You cannot clearly see the rotation

, but you can see the change of the word)

transform (conversion): rotate (rotate; cycle to rotate; make rotation; make turns) (-20deg) ; deg: degree (degree)

Box model (les 10)

1. The concept of box: In CSS, an independent box model has 4 content (content), border (border), padding (inner margin) and margin (outer margin) Partially composed.

The actual width or height occupied by a box is composed of "content + inner margin + border + outer margin".

2. Set the border, inner margin, and outer margin:

a Inner margin (padding) The padding attribute can set 1, 2, 3, and 4 attribute values, as follows:

3-- to 3. the relationship between boxes:
tags and tags: p is simply a block container tag, that is,

is equivalent to a container, which can accommodate various HTML elements such as paragraphs, titles, tables, pictures, and even chapters.

Span is an inline element and will not wrap.

4. Positioning principles of boxes in the standard flow: The horizontal margin between inline elements: When two inline elements are adjacent, the distance between them is the margin-right of the first element plus the first margin-left of 2 elements.

Vertical margin between block-level elements: When two block-level elements are arranged vertically, the situation is different. The distance between two block-level elements is not the sum of margin-bottom and margin-top, but the larger of the two.

{Background positioning: background-position:center; There are many ways to provide values for the background-position property. First,
can use some keywords: top, bottom, left, right and center. Typically, these keywords will appear in pairs,
but that’s not always the case. You can also use length values like 100px or 5cm and finally you can use percentage values. )
Floating and positioning of CSS boxes
1. Floating of boxes (float): In the standard flow, a block-level element will automatically stretch in the horizontal direction. They won't line up vertically.
The default is none. If the value of the value of the float property is set to left or right, the element will move closer to the left or right side of its parent element.了 In addition to the Clear property, it can be set to LEFT and Right, and it can also be set to Both, indicating that the impact on the left and right sides at the same time can be cleared at the same time.
From its original position, it reaches the new position by offsetting it by the specified distance without affecting other boxes. )

2. Positioning of the box (static):
(The positioning of the box -Left, Right, TOP, Bottom: The four attributes are only valid when the Position attribute is set to Absolute, Relative, or FIXED. In-3.z-index: The z-index property is used to adjust the upper and lower positions of the overlapping block when the positioning is adjusted. (The default z-index value is 0. When the two blocks of the Z-Index value are the same,
will maintain the original high and low coverage relationship.)
4. Inline has two values, one represents block-level display and the other represents inline display. display also has a value of none. When set to none, it means that the element will be hidden. This hiding means that the element completely disappears from the page. . 8.28o1.overflow (overflow): There are four values: visible (default value. No cut content or increase the scroll bar)
Hidden (part of the hidden content)
内容 Auto (when the content is more frame, the rolling bar is displayed)

scroll (always displayed scroll bar)

2.display (display): Common value: None: This element will not be displayed.此 Block: This element will be displayed as a block -level element. This element will have a change liner in front and after.

3.clip (cut): two values: auto : The object has no clipping
rect ( number number number number ) : The upper left corner of the object is provided in the order of top-right-bottom-left (0 , 0) The four offset values of the coordinate calculation are available at any of the values. Note: Retrieves or sets the visible area of the object.
The value of position must be set to absolute for this property to be used.
Overflow: hidden This is a component whose function is to automatically change it to the same height as the inner box (or the highest box). Must be used together.

2. Position (position) The left here refers to: how far away from the left. Top refers to how far away from the top it is.

Relative positioning: (position: relative;) The reference point is: the upper left corner of its original position. After moving, the original position will be occupied.

Absolute positioning: (position: absolute;) Its reference point is: the upper left corner of its parent element with position. After moving, the original position will be vacant.