HTML learning - CSS

Text/Brother Little Tiger
Original link: http://www.jianshu.com/p/6a2d672debdb

Introduction to CSS

• CSS Cascading Style Sheets cascading style sheets.

• The main purpose of CSS is to add various expressions (formats, styles) to HTML tags. Such as such as: text style, background, text style, link style.

CSS Syntax Format

• A CSS rule consists of "selector" and "format declaration statement".

• "Selector": It is to select HTML tags, in other words: it is to add styles to which HTML tags.

• "Format declaration statement": It is composed of {}, and there are various format statements in {}.

• A format statement consisting of "attribute name:attribute value".

• Each format statement must end with a semicolon ";" in English.

• Attribute names are various attributes in CSS, and these attribute names are fixed.

• Attribute value, an attribute name can take different values, this value is not quoted.

• The numerical unit in CSS is px, and this px cannot be omitted.

CSS selector

1. Basic selector

(1) “*” selector: wildcard

• Description: will match all HTML tags, all tags will be changed.

• Syntax: *{ color:red; }

• Note: "*" should be used sparingly, because IE6 does not support it.

(2) Label selector

• Description: Will match the specified HTML tag.

• Syntax: h1{ color:red; }

• Note: CSS tag selectors have the same name as HTML tags, but angle brackets cannot be added.

(3) class selector (class selector) - the class selector is the most frequently used

• Description: Style a class of HTML tags. The "class" referred to here is: each HTML tag has a class attribute, and the value of class is the same. The class attribute is a public attribute, and every HTML tag has it.

• The name of the class selector must start with ".", followed by the value of the class attribute of the HTML tag.

• Syntax: such as .box{ color:red; }

• The value of the class attribute of an HTML tag cannot start with a number.

(4) id selector

• Description: Add a style to the element with the specified id.

• The name of the id selector, must start with "#" followed by HTML tags The value of the >id attribute.

• Syntax: such as #boxId{ color:red; }

• Notice:

• The value of the id attribute of an HTML tag in a web page must be unique.

• The id attribute is generally used for JS, not for you to add styles. The class attribute can only be used for CSS, not for JS.

2. Combined selector

(1) Multi-element selector
Description: Add the same style to multiple elements, and separate multiple selectors with commas ",".
Example: h1,p,div,body{color:red;}

(2) Descendant element selector (most commonly used)
Description: Add style to a certain descendant element of a certain tag. Selectors are separated by "space".
Example: div .title{ color:red;}

(3) Child Element Selector
Description: Add styles to the child elements of an element.
Example: div > h1.title{color:red;}

3. CSS pseudo-class selector: add styles to hyperlinks (add styles to different states of links)

A hyperlink has four states:
Normal state (:link): The style of the link before the mouse is placed.
Hold state (:hover): The style when the mouse is placed on the link.
Active state (:active): the style of pressing and holding the left mouse button, this state is very short-lived.
Visited state (:visited): press the left mouse button and pop it up, the style effect at this time.

**In normal work, the following writing will be used to add different styles to links: a:link, a:visited{ color:#444; text-decoration:none; } will be "normal Status" and "Visited Status" combined into one.



a:hover{ color:#990000; text-decoration:underline; } "Mouse over" only one effect

CSS properties

• CSS size properties

  width: element width, must add px unit. height: The height of the element. 

• CSS font properties

  font-size: text size. Such as: font-size: 14px;font-family: font. Such as: font-family:Microsoft Yahei;font-style: italic, value: italic. Such as: font-style:italic; font-weight: bold, value: bold. Such as: font-weight:bold; 

• CSS Text Properties

  color: text color text-decoration: text decoration line, value: none (none), underline (underline), overline(overline), line-through(strikethrough) text-align: Text horizontal alignment, values: left, center, rightline-height: line height, you can use a fixed value or a percentage. Such as: line-height: 24px; line-height:150%;text-indent: first line indentation. Such as: text-indent: 28px;letter-spacing: word spacing. 

• CSS list properties

• list-style: list style, value: none. Remove any symbols preceding bullets or numbers.
  Format: ul,li{list-style:none;}/*Remove the previous symbols*/

• CSS border property: each element can add a border line

  border-left: Left border line. Format: border-left: thickness line type line color; line type: none (wireless), solid (solid line), dashed (dotted line), dotted (dotted line) Example: border-left: 5px dashed red; border-right: Right border line. border-top: upper border line. border-bottom: bottom border line. border: Add border lines to the four sides at the same time. 

• CSS padding attribute: the distance between the border line and the content
  Note: The width and height attributes we usually refer to refer to the width and height of the content, excluding inner and outer margins, border line.

  padding-left: the left inner padding distance, the distance between the left line and the content. padding-right: the right inner padding distance, the distance between the right line and the content. padding-top: the padding distance on top, the distance from the top line to the content. padding-bottom: The bottom padding distance, the distance between the bottom line and the content. Abbreviated padding:10px; //The inner padding of the four sides is 10pxpadding:10px 20px; // 10px up and down, 20px left and right padding:5px 10px 20< /span>px; //The top is 5px, the left and right are 10px, and the bottom is 20pxpadding:5px 10px 15px 20px; < span class='hljs-comment'>//The order must be "top right bottom left"

• CSS outer margin property: the distance from the edge to the outside

  margin-left: The distance from the left line to the outside. margin-right: the distance from the right line to the outside margin-top: the distance from the top line to the outside. margin-bottom: The distance from the bottom line to the outside. Shorthand margin:10px; //The four outer margins are 10pxmargin:10px 20px //The upper and lower margins are 10px, and the left and right margins are 20px< /span>margin:5px 10px 15 span>px; //top margin 5px, left and right margin 10px, bottom margin 15pxmargin:5px 10px 15px 20px ; //The order must be "top right bottom left"

We can regard each element in the webpage as a box,

The characteristics of the box: the width or height of the content, border lines, padding, and margins.

• CSS background property

  background-color: background color. background-image: URL of the background image. Such as: background-image:nonebackground-repeat: background tiling method, values: no-repeat (no tiling), repeat-x (horizontal direction), repeat-y (vertical direction) background-position: background positioning. Format: background-position: Horizontal positioning and vertical positioning; English word positioning: background-position: left|center|right top|center|bottom; Fixed value positioning: background-position: 50px 50px; //The background is 50px from the left of the container, and the top of the container is 50pxPercent positioning: background-position: 50% 50%; //Horizontally centered, vertically centered with mixed positioning: background-position: left 10px; / /Background is aligned to the left, 10px from the top of the containerShorthand background: background color background image tiling method positioning method; example: background:url(images/bg.gif) no-repeat center center; example: background: #ccc url(images/bg.gif) no-repeat left 10px;< /pre>

• CSS float and clear

  float: Let the element float, value: left (floating left), right (float right) clear: clear float, value: left (clear left float), right (clear right floating), both (clear left floating and right floating above at the same time)

1. CSS floating

• The floated element will be floated to the left or right, to the edge of the surrounding element, or to the edge of the previous floated element.

• Floating elements no longer take up space, and the level of floating elements is higher than ordinary elements.

• The floating element must be "block element". Regardless of what element it was originally.

• If the floated element does not specify a width, it will be narrowed as much as possible after floating. Therefore, floating elements generally have a fixed width and height.

• Multiple elements in a row should be floated together.

Floating function: It can realize the layout of multiple block elements side by side.

• How to make the surrounding elements wrap floating elements?
  

• It is necessary to use the clear floating operation below the floating element.
  

  
  

• CSS clear float

• Where there is floating, there must be clearing.

• If the height of the surrounding element is specified, then the clear function can not be used.

CSS inheritance

• CSS property inheritance: the style of the outer element will be inherited by the inner element. The styles of multiple outer elements will eventually be "superimposed" on the inner elements.

• What CSS properties can be inherited?

  CSS text attributes will be inherited: color, font-size, font-family, font -style, font-weighttext-align, text-decoration, text-indent, letter-spacing, line-height

  Tip: CSS properties in <body> will be inherited by all child elements

CSS Priority

• Priority of individual selectors

  Inline styles > id selectors > class selectors > label selectors

• Priority of multiple selectors
  Priority of multiple selectors, in general, the more accurate the pointer, the higher the priority.
  In special cases, we need to assume some values: the larger the result, the higher the priority

   tag selector priority is 1 class selector priority is 10Id selector Priority is 100Inline style Priority is 1000 

• Calculate the following priority

  .news h1{color:red;} Priority: 10 + 1 = 11.title{color:blue;} Priority: 10 span>div.news h1{color:red;} Priority: 1 + 10 + 1 = 12h1.title{color:blue;} Priority:  1 + 10 = 11

  Reminder: If a selector is operated at the same time, and the priority results are the same, then the order will be followed, and the latter will override the former

  Shangxuetang: Push IT new technology articles every day, follow us to expand your technical horizons.

Like it before leaving!

Focus on Shangxuetang immediately, send "request courses",

Free delivery of IT courses!