CSS base (1)

Development of 1.CSS

With the growth of HTML, HTML itself comes with some style function, which leads to more and more messy HTML, HTML pages more and more bloated, so CSS was born.

2.CSS Introduction

CSS(Cascading Style Sheets)

Commonly referred to as CSS CSS style sheets, or Cascading Style Sheets (Cascading Style Sheets), mainly for the text contents in the HTML page (font, size, alignment, etc.), image shape (width and height, border style, margin etc.), and layout style layout display appearance.

In short word, it is used to set the visual style of the HTML tags, so that our HTML page more colorful.

3.css writing position (focus)

Add style to write in a style tag inside the line

< Div style = "Color: Red; font-size: 130px;" > Today started learning CSS style structure </ div >

Embedded writing style page structure in a pair of style tags the same page head tag is relatively simple

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内嵌样式的写法</title>
  <style type="text/css">
    div {
      color:cyan;
      font-size: 80px;
    }
    /*Inline style of writing, is written in a style tag in the head with a page tag * / 
  </ style > 
</ head > 
< body > 
  < div > but do good deeds, Mowen future </ div > 
</ body >

The outer chain is written in a style separate them css file, and then using the link tag is introduced into the corresponding html files which, as a large project, structure and style promote complete separation.

4.chrome browser-based console

Right-page ---> Check ---> Click to see the corresponding tab, you can see the corresponding pattern on the right side, you can check the corresponding style and troubleshooting through the console.

5. Selector

To set the style corresponding to a page of labels, first of all we have to find the corresponding label,

In CSS, style rules perform this task portion is referred selector (selector).

Straightforward to say, the selector is a way to get the label.

The tag selector sets the current page all the tags are set on the same style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签选择器</title>
  <style>
    div {
      font-size: 60px;
      Color : Blue ; 
      Color : Red ; 
      / * when a property is set several times, it will default to the last main * / 
    } 
  </ style > 
</ head > 
< body > 
  < div > but good line, Mowen future </ div > 
  < the p- > People's Republic of China </ the p- > 
  < div > would like to years of quiet good, this life peacefully willing </ div > 
</ body > 
</ HTML >

Class selectors only to have a corresponding class name tag styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签选择器</title>
  <style>
    div {
      font-size: 60px;
      /*Color: Blue; 
      Color: Red; * / 
      / * when a property is set several times, it will default to the last main * / 
    } 
    .box { 
       Color : Blue ; 
    } 
    .demo { 
      Color : Red ; 
    } 
  </ style > 
</ head > 
< body > 
  < div class = "Box" > but good line, Mowen future </ div > 
  < P > People's Republic of China </ P > 
  < div class= "Demo" > would like to years of quiet good, this life peacefully willing </ div > 
</ body > 
</ HTML >

Class selector naming:

1. If the class name, or a plurality of relatively long words, it may be used in the scribing

2. Avoid using the underscore, underline the left js variable or use the id

3. Never use pure digital or digital to name begins with the class name, try to avoid using Chinese name, word or recommend the use of English alphabet to name

Multi-class name selector

That is, the styles from multiple classes simultaneously on the same label

id selector

Usage and class selectors is the same, the difference between:

Class selector is equivalent to the person's name, in a page, you can have multiple duplicate

id selector is equivalent to people's identity card number, a page can not appear in the same two ID name

id used for which js used

* Wildcard selector

* Refers to the wildcard selector, the page will label all the elements are selected, the efficiency is relatively low, with very little.

In the case of a page of writing small, they might be used, it is often used to clear out all of the default spacing inside and outside of the current page tags.

6. Font Settings

1.font-size font size

font-size px em

2.font-family font style

Family-font : "Arial, italics, italics, Xiaozhuan, Microsoft elegant black"

Microsoft elegant black or "microsoft yahei" use the most

3.font-weight font weight

To set the thickness of text, instead of b or strong

4.font-style font styles normal or tilt

Character set to the font style, or used in place of i em

5.font co-written font

font is a font attribute compound, by font-style, font-weight, font-size, font-family thereof.

If the abbreviated words, there are two essential, font-size, font-family is a must to write.

7. The link pseudo-classes

Page can be used to set some special effects

: link unvisited by default only works on a label

: visited state has visited only a label work

: Hover your mouse over effect hover above any tags work

: active state of the selected works with any tag

8. Conclusion

css style tags are used to set the style pages, so the page more colorful

Writing positions: embedded within the chain line

Learn to use chrome browser-based console for viewing html or css style skeleton

The basic selector

Tag selector

Class selector

Multi-class name selector

id selector

Wildcard selector

Link pseudo class selector

:hover link visited active

Font style settings

Font style, font-style normal or the inclination may be substituted i em