CSS learning notes and css Learning

CSS learning notes and css Learning

Organize your learning visual screen (and forget it, maybe a brother or someone else)

<! -- CSS cascading style sheets cascading style Sheet CSS is to achieve the same typographical control of the webpage display effect as the Word. A style sheet consists of presentation rules. HTML is used to place content on the page, CSS can have four attributes for any label: id class style name Example 1: a paragraph, Font: red; Background: yellow; there is a two-pixel implementation border, the font size is 4 cm implementation: Syntax: Format: attribute 1: value; Attribute 2: value; Attribute 3: value ...... The attributes and values are separated by colons. Multiple Attributes are separated by semicolons (;), including color, background-color, font-size, border, and text-align. Unit: color: # rgb # 8fa # aaffaa red (green) number (0-255) character size: height of the font of the em element px pixel (commonly used) the above is relative unit pt pound cm mm in absolute unit percentage: % +-URL: Note:/* start */end note: annotations cannot contain four annotations. inline styles can be used to specify styles in any label, that is, inline styles such as: <p> flexible, but not conducive to updates, in addition, labels cannot share a style embedded style table. You can embed CSS into html using HTML <style> style </style> to control all the current pages. style, but cannot control the style of all pages. The external style sheet uniquely defines the style in a document suffixed with. CSS, In addition, you can use this document to connect to HTML through link and use all pages in HTML, this allows all pages to share the style <link rel = "stylesheet" type = "text/css" href = "css file folder"> multiple pages can use the input style. A table can input a css file to another style file, input a winning style file to the <style> </style> element to combine multiple style tables into one style table, how can I use multiple style sheets to use @ import url (where css is located); To import other CSS files, use @ import url (where css is located) in <style>) </style> the priority of the four style sheets is higher than that of other embedded style sheets, external style sheets, the priority of the input style sheet is related to the loading sequence, such as font-family,, and. You can assign values to multiple families separated by commas, to prevent the selection of nonexistent font family- Size can use absolute size, relative size, length, or percentage font-style normal (normal), Italic (Italic), oblique (skewed) font-weight normal, bold, or a number (1-is a narrow font), bolder, lighter font-variant normal, small-caps (case-sensitive conversion, for letters), pay attention to the sequence of writing: font: [<font style> | <font deformation> | <font bold>]? <Font size> [</line height>]? Font family color: text letter-spacing: letter interval word-spacing: text interval text-decoration: Set the underline (underline) line-through (overline) the bink attribute can remove the underline Of the hyperlink, for example, set to none; text-indent: Set to indent, must be a length or percentage text-transform: lowercase (lowercase to uppercase) line-height: The Row height. text-align is used in upper and lower vertices: horizontal arrangement, left, right, center, and justify background-color background-image: the background image is tiled by default, duplicate URLs (image addresses) background-repeat background repeat, repeat-x, repeat-y, No-repeat background-position: Specifies the background position center, bottom, or percent. Length: background-attachment: Specifies whether the background image slides fixed as the scroll bar when the background attachment pulls the scroll bar. scroll integration attribute: background: <color> <image> <repeat> <attachment> <location> application: Multiple icons are placed in the same image. By defining the background of a block, the advantage of calling small icons at different locations in the same image is that it can reduce the number of requests to the server, thus speeding up page access. The Border border attribute is used to set the Border Division of an element, border Width and border color. You can set the border with four sides or the upper border, lower border, and left border, the right border is set separately through border-style to set the style of the upper and lower sides of the border. This attribute is used to set the style of an element border and must be used to specify the visible border. You can use border-top-style, border-buttom-style, border-left-style, and border-right-style to separately set the attribute border-width: top, right, buttom and left can also be pointed out separately by using border-top-width, border-right-width border-buttom-width border-left-width. border-color: Specifies the color. Usage: none dotted, dot-line dashed: broken line solid: solid line · double: double Line groove: trough-line ridge: Spine-line inset: embedded effect outset: protruding effect Note: if four borders are uniformly set, you can use the order of <border-width> <border-style> <border-color> to give three Such as border: 14px solid red mouse cursor: Value Attribute Value: help, pointer, move, text, hand, wait, crosshair list-style-type for unordered list circle square none for ordered list lower-roman upper-roman lower-alpha upper-alpha default number list-style-image url () list-style-position style selector defines secletor {property: value ......} When defining a rule, you must specify the elements that are affected by the rule. The web page element defined in a rule is selector ), that is, select the webpage element form that the style rule acts on :. nvv {}# nvv {}a, B, h1, # one {} a B h1 # one {}a: hover, a: link {} class HTML selector HTML has tags, CSS uses the selector separator to assign the internal or external style table name. The HTML Tag is used to change the style of a specified tag. Any HTML element can be a CSS selector, for example: p {} div {} ul {} B {} table {} input {} select {} class selector the same selector can have different classes, therefore, the same element is allowed to have different style definitions [tag]. the class name {} has different representations for implementing the same element: Define p. cla1 {} p. cla2 {} p. cla3. {} use <p class = "cla1"> ...... </P> <p class = "cla2"> ...... </P> multiple classes can be used for the same element. Classes are separated by spaces. Note: If tags are omitted, this class can be used for any element, it can be seen that multiple elements share the same class: different style classes can be used for one element, you can also use the ID selector of the same style class for different elements on the HTML page. The ID attribute specifies a single element. The id attribute is used to define a separate style for a single element. Note: in an HTML object, the id attribute value must be uniquely defined: # idname {} (idname is a custom name) usage: <tag id = "idname"> An association selector is a string consisting of two or more single selectors separated by spaces, therefore, their priority is higher than that of a single selector. Because it is used by association, there cannot be any reverse order as long as the association can be maintained, no matter how many layers of the composite selector to reduce repeated declaration of the style sheet, the composite is allowed to be defined: you only need to use commas (,) to separate the pseudo-element selector of each selector from each other. Currently, only HTML elements a and p in different states can be defined: tags: pseudo element tags [. class Name]: Use of pseudo elements: a: link, no action status a: hover move cursor to the hyperlink status a: active selected hyperlink status: note: a: hover must be located after a: link and a: visited. a: active must be located after a: hover. p: the status p of the first letter in a first-letter paragraph: the State style of the first line in a section of first-line inherits all HTML tags nested in an HTML Tag, and inherits the priority Association of style rule rules set in the outer tag> ID> class> The FireBug component of HTMLDIV + CSS preparation software IETEST FirFox requires multiple browsers to be installed, to facilitate debugging, note: even if the effects in different browsers are not exactly the same, the div and the span tag div should be roughly the same as that in the "meaningless" way: the line breaks automatically. span: do not automatically wrap div, large container; span, small container box model every HTML element can be seen as a box with something loaded, the box has width, and height, the distance from the content in the box to the border of the box is filled, the box itself has a border, and the outer border of the box and other joint ventures, the main style font width line-height color float margin clear padding displayhttp: // localhost: 8088/test. php border text-align background positioning attribute position is used to define whether an element is absolute relative static fixed top layer and its height from the left layer to the width layer. z-index determines the order of layers and the coverage relationship, an element with a high value will overwrite the display block of a relatively low element. It is displayed as a block and a line break is added after the element. Other elements are not hungry and can be displayed along with inline and inline, delete the line break after the element. Multiple elements can be displayed concurrently in one row. The display of the specified Element and Its sub-elements is disabled. The visible overflow block model margin -->