About front-end learning css

After learning the video of CSS Div, I feel that the explanation is very clear. I don’t know it until I watch it. I was shocked when I saw it. It turns out that CSS can add a lot of color to a web page!

1. Overview

1. Format:

2. css attributes

1. Text attributes

(1) font-style: italic (italic) normal (normal);

(2) font-weight: bold/bolder/lighter (thickness), you can also use numbers (100-900);

(3) font-size : 20px, be sure to bring the unit px;

(4) font-family: "楷体"; use quotation marks when writing Chinese;

• Backup font font-family: "Kaiti", "Microsoft Yahei";

• Set fonts in Chinese and English respectively font-family: "Arial", "Kaiti" (English font in front, Chinese fonts in the back, Chinese fonts here refer to fonts that can handle Chinese)

(5) Abbreviation of text attributes: font: style weight size family

• style and weight can exchange positions, size and family can exchange positions, but size and family must be at the end;

• style and Weight can be omitted, but size and family cannot be omitted;

2. Text attributes

(1) Text decoration: text-decoration : underline | overline | line-through | none;

(2) Horizontal alignment: text-align: center;

(3) Text indent : text-indent: 2em;

3. Color control attribute (color)

(1) English: limited expression, used for debugging;

(2 ) RGB (red, green, blue): the value is 0 to 255; the three values ​​are all gray;

(3) RGBA: the front is the same as rgb, the last one is transparency, the value is 0 to 1;

(4) Hexadecimal: The principle is rgb; two digits of hexadecimal to one digit of rgb;

(5) Hexadecimal abbreviation:

      It must be in this form to be abbreviated

3. css selector

1. Tag selector

• 
  

  ## All tags selected

  
  

2, id selector

• 
  ## The id is unique;

  
  

• 
  It is composed of letters, underscores and numbers, and does not start with numbers;

  
  

3. Class selector

• ##class="class name class name" ( Multi-category)
  

  
  

  Multi-category application: classification combination

• 4, descendant selector

Format: tag tag｛｝；

• The above tag can be a tag, id and class selector;

• Can be developed infinitely;

• Descendants include children and grandchildren;

• 5. Child element selector

Format: tag>tag｛｝

• No spaces

• 6.Intersection selector (*)

Format: tagtag｛｝

• No symbols for both

• 7. Union selection Device

Format: tag, tag｛｝

• ##8, sibling selector

Neighboring brothers: connection; only the one after the adjacent sibling can be selected and cannot be separated in the middle

• General brothers:~ connection; the back of the specified label of the same level, regardless of whether it is separated

• 9. Order selector

Related recommendations:

css style --- CSS hack

css div summary【css div】_html/css_WEB-ITnose

The above is the detailed content of About front-end learning css. For more information, please follow other related articles on the PHP Chinese website!