[Front-end Basics] CSS Selectors and CSS Properties

Preface: Introduction to CSS

1. CSS overview

   • CSS ( Cascading Style Sheet ) cascading style sheets are used to modify HTML to make the effect more diverse
   • CSS was introduced in HTML4.0. Generally, in the development process, a separate CSS file will be used for development, and then this independent CSS file will be introduced into the required HTML file.

2. Benefits of introducing CSS

   • To achieve the separation of structure and style, later maintenance is more convenient;
   • Better browser compatibility;
   • The code is more concise, a CSS file can be referenced by multiple html files;

3. Basic syntax of CSS

   • CSS rules are mainly composed of two parts: selectors and declarations (one or more)
   • syntax selector { attribute: attribute-value }

1. How to import CSS

• Inline style is embedded in the tag through the style attribute

• Embedded in the head tag via the style tag

• Links introduce external independent styles in the head tag through the link tag

• The import type is the same as the embedded type, the difference is that the external independent style is imported through @import in the style tag

CSS cascading embodiment: under the premise of the same matching element weight, when multiple import styles conflict, according to the principle of proximity, the import style closer to the element overrides the import style farther away from the element

Interview question: The difference between linking and importing

• link is an XHTML tag, in addition to loading CSS, it can also define other things such as RSS; while @import belongs to the category of CSS, it can only load CSS;
• When link refers to CSS, it is loaded at the same time when the page is loaded; while @import needs to be loaded after the page is fully loaded.
• link is an XHTML tag and has no compatibility issues; while @import was proposed in CSS2.1, browsers of lower versions do not support it.
• link supports using JavaScriptcontrol DOM to change styles; @import does not.
• @import can re-introduce other style sheets in the CSS file; link does not support it.

2. CSS selectors

2.1 Basic selectors

• global selector *

• label selectortagname

• class selector.classname

  • Multiple class names can be set for the same element, separated by spaces,
  • The same class name can be set to multiple elements

• id selector#idname

  • The id of each element is unique

2.2 Relationship selector

• Child selector E > F
• descendant selector EF
• Adjacent sibling selector E + F
• Universal sibling selector E ~ F
• union selector E,F,…,N
• intersection selectorelment#id.classname1,classname2,...,classnameN

2.3 Dynamic pseudo-class selectors

• :link initial state
• :visited state after visiting
• :hover mouse hover state
• :active activation status

2.4 Selector priority

• Weight Calculation Rules

  The weight represents the importance of a selector, the higher the weight, the higher the priority of the selector.

• Complex selector judgment priority

​ Select the element and judge the number of id, class, and element selectors respectively

​ Unselected elements, the principle of proximity, the same distance, judge according to the number of id, class, element selectors

Cascading embodiment: styles with high priority override styles with low priority

3. Text-related styles

1. font type font-family

   Note: Multiple fonts can be set, separated by commas; if the browser does not support the first font, it will try the next one.

2. font-size font-size: keyword | fixed value | percentage (based on parent element)

3. Font weight font-weight: keyword | an integer between 100-900

4. Font style font-style: normal | italic | oblique

   Note: both italic and oblique are right-slanted text, but the difference is that italic refers to italic text, while oblique is oblique text. For fonts without italics, the oblique attribute value should be used to achieve oblique text effects

5. font shorthand attribute

   That is, set all font properties in one declaration, and the order of setting properties is as follows:

   font:"font-style font-weight font-size/line-height font-family"
   

   Note: The values ​​of font-size and font-family are required; the line - height attribute sets the space between lines

6. CSS3 @font-face rule

   With CSS3 a web designer can use any font he/she likes, in the new @font-face rule you have to first define the name of the font (like myFirstFont) and then point to that font file. For details, see: https://www.runoob.com/css3/css3-fonts.html

   font definition

   @font-face{
       font-family: myFirstFont;
       src: url('Sansation_Light.ttf'),
            url('Sansation_Light.eot'); /* IE9 */
   }
   

   font usage

   div{
   	font-family: myFirstFont;
   }
   

   Note: Internet Explorer 9 only supports .eot type fonts, Firefox, Chrome, Safari, and Opera support both .ttf and .otf type fonts. Internet Explorer 8 and earlier IE versions do not support @font-face rules.

4. Text related styles

1. text color color: color name | hex | RGB | RGBA | HSL | HSLA

2. Text decoration text-decoration: underline | overline | line-through | none;

   /*关键值*/
   text-decoration: none;                     /*没有文本装饰*/
   text-decoration: underline red;            /*红色下划线*/
   text-decoration: underline wavy red;       /*红色波浪形下划线*/
   
   /*全局值*/
   text-decoration: inherit;
   text-decoration: initial;
   text-decoration: unset;
   
   /*虚线dotted 与 波浪线wavy 注意：在Edge/Internet 浏览器中没有效果*/
   text-decoration: underline overline dotted red; /*红色点状上划线和下划线*/
   text-decoration: underline overline wavy blue;  /*蓝色波浪形上划线和下划线*/
   

   Note: The text-decoration attribute is shorthand for the following three attributes

   • line typetext-decoration-line: none|underline|overline|line-through
   • line color text-decoration-color
   • Type of line text-decoration-style: solid|double|dotted|dashed|wavy (wave)

3. Text case text-transform: capitalize (the first letter of the word is capitalized) | uppercase (the letter is capitalized) | lowercase (the letter is lowercased)

4. Paragraph first line indent text-indent: fixed value | percentage

5. Text horizontal alignment text-align: left | center | right | justify (distributed alignment)

   Note: The attribute text-justify is used when text-align is set to justify to specify the method of scattered alignment, and the attribute values ​​are as follows

   value	describe
   auto	The browser determines the alignment algorithm.
   none	Parallel is disabled.
   inter-word	Increase/decrease space between words.
   inter-ideograph	Use ideographic text to align content.
   inter-cluster	Justify only content that does not contain inter-word gaps (such as Asian languages).
   distribute	Similar to a newspaper layout, except in East Asian languages ​​the last line is off-line.
   in cash	Aligns content by stretching characters.

6. Line height line-height: fixed (unit) value | percentage (%) | number (multiple)

7. word, word spacing

   letter-spacing sets the character spacing

   word-spacing sets the word spacing

8. (box) direction of the text / writing direction direction: ltr (default) | rtl

9. The vertical alignment of the element vertical-align: keyword | fixed value | percentage

   Note: This property defines the vertical alignment of the baseline of an inline element relative to the baseline of the line in which the element resides. Negative length and percentage values ​​are allowed. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell content within the cell box.

10. The value of the white-space attribute in the element is as follows

    value	describe
    normal	default. Whitespace is ignored by the browser.
    pre	White space is preserved by the browser. It behaves like the pre tag in HTML.
    nowrap	The text will not wrap, the text will continue on the same line until a br tag is encountered.
    pre-wrap	Whitespace sequences are preserved, but line breaks are performed normally.
    pre-line	Merge whitespace sequences, but preserve newlines.

11. Text-overflow elements handle text-overflow: clip (trim) | ellipsis (ellipsis instead of trimmed text) | other string instead of trimmed text

    Single-line text overflows... Alternative solutions

    p {
    	width:300px; /*容器的宽度*/
    	white-space:nowrap; /*强制不换行*/
    	text-overflow:ellipsis; /*省略号代替被修剪的文本*/
    	overflow:hidden;  /*内容溢出容器部分隐藏*/
    }
    

5. List-related styles

1. bullet type list-style-type

   Incomplete statistics of attribute values, see https://www.runoob.com/cssref/pr-list-style-type.html for details

2. Bullet position list-style-position: inside | outside

3. Image type bullet list-style-image:url('image path')

4. List attribute shorthand list-style: list-style-type, list-style-position, list-style-image.

   Note: You can not set one of the values, such as "list-style: circle inside;", the unset attribute will use its default value.

6. Form related styles

The border-collapse attribute sets whether the borders of the table are merged into a single border, and the attribute values ​​are as follows

value	illustrate
collapse	Borders are merged into a single border when possible. The border-spacing and empty-cells properties are ignored
separate	Defaults. Borders will be separated. The border-spacing and empty-cells properties are not ignored

7. Background related styles

1. background-color background-color: color value | transparent ( transparent )

   Legal color values: https://www.runoob.com/cssref/css-colors-legal.html

2. The background image background-image attribute value is as follows

   value	illustrate
   url(‘URL’)	image URL
   none	No image background will be displayed. this is the default
   linear-gradient()	Create an "image" with a linear gradient (top to bottom)
   radial-gradient()	Create an "image" with a radial gradient. (center to edges)

   Note: 1. The background of an element is the total size of the element, including padding and borders (but not margins)

   ​ 2. Multiple background images, please separate them with commas

3. Background image tiling method background-repeat: repeat (default) | repeat-x | repeat-y | no-repeat

4. Background image start position setting background-position: keyword () | percentage < x% y% > | fixed (unit) value < xpos ypos >

   Note: 1. The keywords are left top, left, left bottom, right top, right, right bottom, top, center, bottom

   ​ 2. The first value in the percentage and fixed value is the horizontal position value, and the second value is the vertical position value

5. Background image size background-size: fixed value (unit) | percentage (relative to the background positioning area) | cover | contain

   Note: 1. Fixed value and percentage, the first value is width, the second value is height. If there is only one value, the second value is auto (auto)

   2. cover maintains the image aspect ratio and scales the image to the smallest size that will completely cover the background positioning area

   3. contain maintains the aspect ratio of the image and scales the image to the largest size that will fit the background positioning area

6. Whether the background image scrolls with the content of the object. The value of the background-attachment attribute is as follows

   value	describe
   scroll	The background image scrolls with the scrolling of the page, which is the default.
   fixed	The background image doesn't scroll as the page is scrolled.
   local	The background image scrolls along with the content of the element.

7. Background (color, image) clipping display area background-clip: border-box|padding-box|content-box

8. background-origin: padding-box|border-box|content-box

9. Background shorthand background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment

10. Sprite map introduction and application

    • What is a sprite map?

      Sprite image, also called CSS sprite, is a CSS image synthesis technology, which is to combine many small icons on a picture with a transparent background, and use background-position and background-size to control the display area of ​​the picture

    • Why use sprite maps?

      90% of website development will use small icons. Calling and displaying multiple small icons is a common problem in front-end development. If each small icon calls a picture separately, it means that the display of each small icon will generate an HTTP request; Each request requires a certain performance overhead, mainly in the request and response phases. In order to reduce the number of http requests and speed up the display of web page content, many websites use CSS sprite sprite images instead of labels for navigation bar icons and login box pictures.

    • Pros and Cons of Using Sprite Maps

      advantage:

      • By combining multiple images into one, HTTP requests can be effectively reduced and page loading performance improved
      • Combining multiple images into one image can reduce the total size of the image
      • It is more convenient to organize, and the pictures of different states of the same button do not need to be cut out one by one and named individually
      • Only need to modify the color or style of one or less pictures to change the style of the entire web page
      • You only need to name a set of pictures, instead of naming each small picture, which improves the efficiency of web page production

      shortcoming:

      • It is troublesome to synthesize
      • Poor adaptability
      • poor maintainability
      • Small icons may be distorted on high-definition screens, and frequent use of positioning will take up more CPU

    • Application Scenario

      • Static picture, does not change with the change of user information
      • Small picture, picture capacity is relatively small
      • The number of loads is relatively large

    • Basic use of PS or PW tools (be able to cut images by yourself)