PHP notes (CSS article)

HTML is often used to display content in a Web page, and of course, it can be a layout, but it is not convenient, so the introduction of CSS

CSS full name cascading style Sheets, Chinese name: Cascading style sheet

Help Document: Css.chm

Role: Layout and landscaping pages

Characteristics:

• Like HTML, is a markup language that can be executed directly by the browser
• Case insensitive
• The CSS file is a text file with a suffix called css
• Nesting is used in HTML

CSS Rules

• Grammar
  • CSS definitions consist of selectors (selector), attributes, and attribute values (value);
  • Format: Selector{property:value;}
  • Selectors include
    • Type selector:
      • Definition: HTML tags
      • Use: Use labels directly

　　　　　　　　

Define the use

• • • Class selector:
      • Definition: Tag name. class name or. Class Name
      • Use: class= "class name"
      • The tag name is the HTML tag, and the tag name. Class name indicates that the selector is used only if the label is used and the class value is the category name;
      • ". Class name" means that the selector is used whenever the class value is the name

　　　　　　　　

Define the use

• • • ID selector:
      • Definition: Tag name #id value or #id值
      • Using: id= "id value"
      • The tag name is an HTML tag, and the tag name #id value means that the selector is used when the tag is used and the ID is the value.
      • "#id值" means that the selector will be used whenever the ID is the value
      • The same page ID value is unique (yes, if the same page has two identical IDs, the style can be displayed, but this is illogical, and the future use of JS Call ID, there will be confusion)

　　　　　　　　　　　　　　　

Define the use

• • • Contains selectors:
      • A hierarchical combination of multiple selectors, separated by spaces, and left to right for each selector, containing the relationship
      • Definition: Combination of selector characters, separated by spaces
      • Use: Each selector is embedded using
      • The number of layers is not limited, but it is recommended not too much, affecting maintenance and SEO

　　　　　　　　　　　　

Define the use

• • • Group selector:
      • Define multiple selectors for the same attribute at the same time
      • Definition: Each selector combination, with "," separate open
      • Use: Use each separator directly

　　　　　　　　　　

Define the use

• • • Pseudo element selector:
      • A way to define different states of HTML elements
      • Definition: Tags: pseudo-elements
      • Use: The different states of the label use different attributes

　　　　　　　　

Define the use

• • Attributes are separated from attribute values by ":", with multiple attribute values ";" Separated

• Comments
  • Format:/*.......*/
• Length Units
  • Relative units (common)
    • PX: pixels
    • EM: Font size relative to the text within the current object
    • %: Percent
  • Absolute units (not commonly used)
    • PT: Dot
    • CM: cm
    • MM: MM
• Color units and URL values
  • Color:
    • #rrggbb
    • #rgb
    • RGB (X,X,X) (not used, browser incompatible)
    • RGB (x%,x%,x%) (not used, browser incompatible)
  • Url
    • Means: url (address)

How to use CSS in HTML

• Inline style sheet
  • Use directly in the label
  • Embed CSS key-value pairs using the Style property
  • Use flexibility, but lose the role of CSS

• Inline style sheet
  • In the
  • The CSS style that will be used is written in the <style> tab
  • <style type= "Text/css" >css</style> or <style>css</style>

• External link Style sheet
  • External link CSS file, input CSS content directly in file
  • Advantages:
    • Using the external CSS file, the browser with the cache function, do not download every time
    • Multiple file shares
  • Use <link> tags to introduce HTML in the format <link type= "Text/css" rel= "stylesheet" href= "*.css"/>

Priority in three formats, Proximity principle: inline > Inline > Outer-chain

Inline elements and block-level elements

• Inline elements
  • The contents of the label are all on the same line and are not wrapped automatically
  • Not set width and height
• Block-level elements
  • The contents of the tag are automatically wrapped.
  • can be set width and height

CSS Font Properties

• Multiple attributes are written on the same line, <FONT> with composite attributes, and the order must be [[<font-style> | | <font-variant> | | <font-weight>]? <font-size > [/<line-height>]? <font-family>],<font-size> and <font-family> are required options.
• Single-Attribute write-apart
  • <font-style> Properties: Sets whether the font is italic, the default value is normal;
  • <font-variant> Properties: Sets whether the font is a small uppercase letter and the default value is normal;
  • <font-weight> properties: Sets the font weight, the default value is normal;
  • <font-size> properties: Set the font size, the commonly used units are "px" or "%", the default value is normal;
  • <font-family> properties: Set the font, you can set a variety of fonts, separated by ",", the browser will sequentially retrieve the presence of the font to display, the font name is Chinese, to use single quotation marks. The default value is based on the browser selection.
  • <font-stretch> properties: Sets the font width, the default value is normal;

CSS Background Properties

• Multiple attributes are written on one line, using compound attribute <background>, property value is [Background-color] | | [Background-image] | | [Background-repeat] | | [Background-attachment] | | [Background-position], when other parameters are not filled in, the default unconditional override.
• Single-Attribute write-apart
  • <background-color>: Set background color, default is transparent;
  • <BACKGROUND-IMAGE>: Set the background image, use "url ()" To set the picture path;
  • <BACKGROUND-REPEAT>: Set background picture fill effect, default is repeat;
  • <background-position>: Sets the fill position of the background picture, the default value is "0% 0%", commonly used units "%" and "px".
    Tip: You can set the <weight> and

CSS Text Properties

• <letter-spacing>: Set character spacing, allow negative values, default to Normal
• <word-spacing>: Set word spacing, allow negative values, default to Normal
• <text-decoration>: Add adornments to text, underline underline, overline underline, Line-through strikethrough
• <TEXT-ALIGN>: Horizontal alignment, Centen Center, right-aligned, left-aligned
• <line-height>: Sets the row height of the object, and the text is centered vertically when the row height is the same as the area
• <text-indent>: Set text indent in units of EM (character), px (pixels),% (percent)
• <color>: Setting font Color

CSS Border Properties

• Multi-attribute merge write, using compound attribute <border>, attribute value order is [Border-width] | | [Border-style] | | [Border-color]
• <border-left>, <border-right>, <border-top>, <border-bottom>: Sets the properties of left, right, line, and downline, and the order of the property values is [ Border-width] | | [Border-style] | | [Border-color]
• Single-Attribute write-apart
  • <BORDER-STYLE>: Set border style, common dotted (dots), dashed (dashed), solid (solid line)
  • <border-width>: Set border width, do not allow negative,<border-style> property set to None, this property is out of effect
  • <border-color>: Set Border color

CSS List Properties

• <LIST-STYLE-TYPE>: Sets the mark of a list item as a preset tag
• <LIST-STYLE-IMAGE>: Set the tag of the list item to be an optional tag, and the URL () setting the address of the tag
• <list-style-position>: Sets the position of the table item in the text, outside indicates that the marker is placed outside the text, inside indicates that the marker is placed within the text

Div+css Page Layout

• Advantage:

1. Separation of content from layout
2. Simple code to improve page browsing speed
3. Easy to maintain and modify
4. Improve indexing efficiency of search engines for pages

• Div and Span
  • DIV: block-level elements, will wrap, can set the width of the high
  • Span: inline element, does not wrap, cannot set width height

Box model

• Maigin: Outer filler (extended margin of the four-sided box)
  • Maigin: 1~4 parameters can be used to set the size of the outer filler
  • Maigin-top, Maigin-right, Maigin-bottom, Maigin-left: Set the box, the right, the lower, the left outer filler size respectively
• Border: Border
  • Border: You can use 1~4 parameters to set the width of the border
  • Border-top, Border-right, Border-bottom, Border-left: Set box size on box, right, bottom, and left respectively
• padding: Inner filler (the distance between the contents of the box and the frame)
  • padding: You can use 1~4 parameters to set the size of the inner filler
  • Padding-top, Padding-right, Padding-bottom, Padding-left: Set the box, right, bottom, and left inner filler size respectively

div positioning

• Position: Set positioning mode, parameters are static, absolute, relative, fixed
  • Absolute: absolute positioning, Position relative to document flow, out of document flow
  • Relative: relative positioning, Position relative to its original position, not out of document flow
  • Fixed: fix positioning, Position relative to browser window
  • Binding mode: The parent layer is anchored using "relative", the child layer is positioned with "absolute", the child layer is "bound" to the parent layer, and the child layer's position is no longer relative to the document flow, but relative to the parent layer
  • Top: The distance between the box and the top
  • Right: The distance between the box and the
  • Bottom: The distance between the box and the bottom
  • Left: The distance between the box and the
  • Z-index: Sets the cascade order, starting at 0 by default and can be negative
• Text-align: horizontal alignment, Centen Center, right-aligned, left- aligned
• Line-height: Sets the row height of the object, when the row height is the same as the width of the area, the text is centered vertically
• Float: Sets the object as a floating effect
  • will only float horizontally and will not float vertically
  • is out of the document flow
  • When multiple objects are set to float at the same time, each object is displayed side-by
  • Left: Floating
  • Right: Floating
• Clear: Clear Floating
  • Right: Clear floating object cannot exist on the right side of object
  • Left: The floating object cannot exist on the left side of the object.
  • Both: Clear both sides floating, object cannot exist on both sides of floating object

The display of the DIV

• Display: Sets the way the element displays hair
  • Block: Displayed as blocks-level elements
  • Inline: inline element mode display
  • None: Hides the element, hides it, and does not occupy the location
• Visibility: Setting the display of nested relationships
  • Inherit: The display property is the same as the parent layer, the parent is explicit, the parent is hidden
  • Visible: The child layer remains visible regardless of whether the parent layer is displayed
  • Hidden: Child layers are hidden and occupy locations regardless of whether the parent layer is displayed
• Overflow: How content is displayed when it is out of bounds
  • Auto: Automatic processing, display scroll bar when out of bounds, not displayed
  • Scroll: Scroll bars are always displayed, whether or not exceeding
  • Visible: Beyond also direct display, do not do processing
  • Hidden: Out-of-section hidden, scroll bar not displayed

PHP notes (CSS article)