Handling of CSS Styles

This article mainly introduces the processing of CSS style, has a certain reference value, now share to everyone, the need for friends can refer to

4/23/2018 8:23:35 AM

Css

Morning test:

1. The structure of a standard HTML file 2. Specify how color and resource locations are 3. Common tags    set all levels title:    Set Paragraph:    format text:    hyperlinks:    picture Tags: form    the basic form:    form Tags:    frame Tags:

Review

Today's overview

I. CSS Overview ii. CSS selector (cognition) iii. CSS Styles and properties (practice) Iv. reconstruction of the Mall home page P+css (layout) (focus) floating/change display mode

I. Overview of CSS

<1> concept

P, is an HTML element, block-level elements, often combined with CSS for page layout. CSS, cascading style sheets, enhanced display for HTML elements.

<2> role

Style defines how HTML elements are displayed, the layout of the page (beautify HTML effects)

<3> How to use

Inline style: Sets the Style property directly in the current element property, with poor applicability and can only be used for the current element. The Style    property is a common property style for HTML elements: in the head tag, the <style> tag is used to set the style, which is highly adaptable and can act on multiple elements of a page at the same time. External style: Create a. CSS style file that sets the style of the element in this file, using the <link> element introduction in the page that needs to be used. The most adaptable,            can be done by acting on multiple pages.

<4> Grammar

Selector {    Style declaration}1. Find elements that need to be styled  , selectors can be used to find elements 2. Set style  , property name: property value; Property Name: property value; 3. For example:    h1{        color: #ff0000;        font-size:25px;        ...:...;    }       Note: In the style declaration, if it is not the last attribute value, then the semicolon cannot be omitted.

<5> Features

Inheritance: Child elements can inherit the style layering of the parent element: the same element can use more than one style, and if it does not conflict, the effect overlays precedence: The default style---external style  ---inner style---  inline style (from low to high, nearest principle)

Second, selector

<1> element Selector

Syntax Format: element name {            style declaration;          }       Features: style settings for the same element

<2> class Selector

Syntax format:. class Property Value {          Class attribute: Property value            style declaration;         } features: style settings for different elements    such as: Find the H1 element through the class selector        

<3>id Selector

Syntax format: #id属性值 {            style declaration;        } features: style settings for a specific element for example: find a specific H1 tag with the ID selector        

<4> Selector Group

Syntax format: selector 1, selector 2, ... {            style declaration;        } features: You can reuse styles in several different selectors such as:    #idvalue, H1,. classvalue,p, #idvalue2,. classvalue2{        Background-color:yellow;    }
<5> derived class Selector

Syntax Format 1: parent element name > child element name {                style declaration;          } feature: child element selector, only for the element syntax format for the specified son generation 2: Parent element name   child element name {                style declaration;          } features: Background selector, All descendants that act on a specified element such as:    <p>        <p>                <p>                    <p></p>                </p>        </p >        <p></p>        
<6> Property Selector

Syntax format: element name [property = attribute value]]{            style declaration;        } For example: <input type= "text"/>     input[type= "text"]{        Background-color : orange;     }
<7> pseudo-Class selectors

Change the style syntax of an element when the state of an element changes:    : Link applies to hyperlinks:    visited  for hyperlinks: Active is typically applied   to buttons        : Focus    typically applies to input boxes    : Hover  mouse hovers over elements such as:    <a hred= "#" id= "A1" > Please click on my 1 </a>    <a hred= "#" id= "" > Please click on my 2 </a>    <a hred= "#" id= "" > Please click on my 3 </a>    #a1: link{        style declaration;    }    #a1: visited{        style declaration;    }
Iii. Styles and attributes

<1> style of the background

Background-color: Color value, set background color background-image: The URL of the picture, set the background picture background-repeat: Arrange the way, set the arrangement of the background picture                repeat;                Repeat-x;                repeat-y;                No-repeat;background-attachment: The way to set whether the background picture follows the contents of the move                scroll;                Fixed
<2> borders

Border: Width   style   color  border: Style value, (Style four border)       Border-left/right/top/bottom: Style value  (sets the style of each border)
<3> floating settings and cancellations (emphasis)

When you leave an element out of the normal flow of the document, you can float left or right until his border stops when it encounters its parent border or other floating element's border. add element: <p id= "Clearp" ></p>         #clearp {            clear:both;              }
<4> box Model (emphasis)

margin: Margin    margin-left/right/top/bottom: distance;    margin: distance;    Margin:auto;    Center effect padding: padding    padding-left/right/top/bottom: distance;    padding: distance;
<5> Text Styles

Color: font-size: Font size font-fimaily: Font font-weight: Bold
<6> Table Properties

border: Border border-collapse:collapse; remove spacing between cells
<7> List Properties

List-style-type: style, Style     list-style-image:url ("Picture Resource Location"), List display style
<8> Mouse Styles

    Cursor:help;          wait;          default;          pointer;          ... ...
<9> display Mode

Display properties, changing the way elements are displayed: block, the display of elements in the    row into the display of block-level elements, (upper and lower display)    inline, the block-level elements are displayed in the way the display of elements, (left and right display, cannot set width height)    Inline-block, convert elements into inner block elements, (left and right display, set wide height) <p></p><p></p><p></p>p{    Display:inline;}
Homework:

 use p+ CSS to construct a simple mall home page