HTML&CSS Day02 Introduction to CSS and selectors

1.CSS3

• What is CSS
• CSS (Cascading Style Sheets) is a language used to modify documents (which can be markup language HTML, XML or SVN), and can present documents to users in a more elegant form.
  - The relationship between HTML and CSS?
  HTML is the carrier of web content. The content is the information that the webpage maker puts on the page for users to browse, and can include text, pictures, videos, etc.
  CSS styles are performance. It's like the coat of a web page. For example, change the font and color of the title, or add background images and borders to the title. All these things that are used to change the appearance of the content are called presentations.
  HTML is like a person, and CSS is like clothes and cosmetics, which are used to decorate HTML.
  - Disadvantages of modifying styles through tags:
  need to remember which tags have which attributes, if the tag does not have this attribute, then setting it will have no effect.
  When the requirements change, we need to modify a lot of code to meet the existing requirements.
  The only role of HTML is to add semantics.
  - What is the advantage of modifying styles through CSS?
  No need to remember which attributes belong to which tags.
  When the requirements change, we don't need to modify a lot of code to meet the requirements.
  In front-end development, CSS has only one function, which is to modify the style.

2. Grammar

2.1. CSS declarations (CSS declarations)

The core function of the CSS language is to set specific values ​​for specific properties, and the CSS engine displays elements by calculating each property declared. CSS properties and values ​​are case sensitive. Attributes and values ​​are separated by ":". Not all values ​​apply to the same property, and different properties have a range of different values.

2.2. CSS declaration blocks (CSS declaration blocks)

Write multiple CSS declarations together, each CSS declaration is separated by ";", and the last CSS declaration does not need to be separated by ";". Use "{" "}" to enclose multiple CSS declarations, thus forming a CSS declaration block.

2.3. CSS rule sets

**Selector** The name of the HTML element at the beginning of the rule set. It selects one or more elements (in this case, the p element) that need to be styled. To add styles to different elements just change the selector.

**Declaration** A separate rule, such as color: red; is used to specify the attributes of the added style element.

**Properties** A way to change the style of an HTML element. (in this case color is

The attributes of the element. ) CSS, it is up to the writer to decide which property to modify to change the rules.

**Attribute value (Property value)** is on the right side of the attribute, after the colon is the value of the attribute, which selects a value from the many appearances of the specified attribute (we have many attribute values ​​​​besides red that can be used for color) .

**Note other important syntax:** Each rule set (except the selector part) should be enclosed in paired curly braces ({}). A colon (:) is used to separate the attribute from the attribute value in each declaration. Within each ruleset, separate declarations with semicolons (;).

2.4. CSS readability

- White space

Whitespace means actual spaces, tabs, and newlines, and whitespace can be added to make stylesheets more readable.

- Comments

/* CSS comments here */

- Shorthand (Shorthand)

Similar to font, background, padding, border, margin these are called shorthand properties.

These attributes allow writing multiple attribute values ​​on a single line. Shorthand properties save time and make code tidy.

For example:

border:1px solid red;

background-color:red;

padding: 10px 15px 15px 5px;等价于padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;

3. How to import CSS

- Inline styles (inline styles)

Disadvantage: Redundant style and structure

Pros: higher priority

The inline style sheet is to write the css code directly in the existing HTML tags. The specific usage method is as follows:

<div style="color:red">设置文字的颜色为红色</div>

Note here: the content of the style is written in the start tag of the element, and the css style code should be written in the style="" double quotes. If there are multiple css style code settings, they can be written together and separated by semicolons. The effect of writing multiple css styles together is as follows:

<div style="color:red;font-size:14px">
    设置字体颜色为红色，并且字体大小为14px
</div>

This style will only work on the current label. It can be used during testing, but the style cannot be reused. It is inconvenient for later maintenance and is not recommended.

- Internal style sheets

Disadvantages: low reuse rate of styles
Advantages: separation of styles and structures

Write the style sheet into the style tag in the head

<style type="text/css">    
  p{
      
              
    color:red;        
    background-color:yellow;    
  }
</style>

Use the internal style sheet to further separate the performance from the structure, and you can set styles for multiple elements at the same time, which is convenient for later maintenance
Note:
-style tags should be written between the start tag and the end tag of the head tag (that is, with the title tag is brotherhood)

​ The type attribute in the -style tag can actually be omitted, and the default is type="text/css"

​ -When setting the style, it must be set according to a fixed format. key: value; where: cannot be omitted, and the semicolon cannot be omitted in most cases

- external style sheet

Advantages: Separation and decoupling of style and structure; high reuse rate of style (framework: such as bootstrap), shared, defined css files can be applied to multiple pages.

1. Write the style sheet into an external CSS file, and then import the external file through the link tag

<link rel="stylesheet" type="text/css" href="文件的路径"/>

Write the style into an external style sheet, you can use the same style sheet in different pages, completely separate the performance and structure, and facilitate later maintenance, the recommended way

2. @import url(), you can also import CSS files through import

The @import import method will load html first, and then load css; when the network environment is poor, it will lead to poor page effects, so this method is not recommended;

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

- Priority of import methods

Inline Styles > Internal Styles/External Imports

Proximity principle: which setting method is closest to the element, and whose priority is higher;

- How to learn CSS?

The learning of CSS is divided into two parts, one is the selector of CSS, and the other is the property of CSS.

4. CSS selectors

- Tab selector

​ Function: According to the specified tag name, find all the tags with that name in the current interface, and then set the attribute
Format:
​ tag name{ ​ attribute: value;​ } Note points:​ 1. The selected tag selector is All the tags in the current interface, instead of selecting a single tag​ 2. The tag selector can be selected no matter how deep the tag is hidden​ 3. As long as it is a tag in HTML, it can be used as a tag selector (h/a/img /ul/ol/dl/input...)

- id selector

​ Function: Find the corresponding tag according to the specified id name, and then set the attribute
Format:
#id name{ Attribute: value; } Note points: 1. Every HTML tag has an attribute called id, also That is to say, each tag can set id​ 2. The name of id cannot be repeated in the same interface​ 3. When writing an id selector, be sure to add # in front of the id name​ 4. The name of id is There are certain specifications​ 4.1 The name of the id can only consist of letters/numbers/underscores, az 0-9 _​ 4.2 The name of the id cannot start with a number​ 4.3 The name of the id cannot be the name of an HTML tag, it cannot be a h1 img input … 5. In general, in enterprise development, if it is only for setting styles, we will not use id, because id is reserved for js

- class selector

​ Function: Find the corresponding label according to the specified class name, and then set the attribute
Format:
.class name{ Attribute: value; }

​ Points to note:
1. Each HTML tag has an attribute called class, which means that each tag can set a class name
2. The name of a class can be repeated in the same interface
3. When writing class selection
4. The naming convention of the class name is the same as that of the id name. 5.
The class name is specially used to set the style for CSS
. 6. Each tag in HTML can be used at the same time Bind multiple class names
Format:
<label name class="class name 1 class name 2 ...">
Wrong way of writing:

	   <p class="para1" class="para2">

7. What is the difference between id and class?
7.1 id is equivalent to a person's ID card and cannot be repeated.
Class is equivalent to a person's name and can be repeated.

7.2 An HTML tag can only be bound to one id name
An HTML tag can be bound to multiple class names

8. What is the difference between id selector and class selector?
The id selector starts with # and
the class selector starts with .

9. Do you use the id selector or the class selector in enterprise development?
id is generally used for js, so unless there are special circumstances, do not use id to set the style

10. In enterprise development, a developer's use of classes can show the developer's technical level.
Generally, in enterprise development, attention should be paid to the extraction of redundant codes. Some common codes can be extracted into a class selection In the device, then bind the label to this class selector

- descendant selector

​ Function: find all specific descendant tags of the specified tag, set attributes
Format:
​ tag name 1 tag name 2{ ​ attribute: value;​ } First find all the tags named "tag name 1", and then in Under this tag, find all the tags named "Tag Name 2", and then set the attributes. For example: div p{}

​ Points to note: 1. The descendant
selector must be separated by spaces Only label names can be used, and other selectors can also be used​ 4. Descendant selectors can continue through spaces

- child element selector

​ Function: Find all the specific direct sub-elements in the specified tag, and then set the attribute
Format:
​ tag name 1> tag name 2 { ​ attribute: value;​ }

​ Points to note:
1. Sub-element selectors will only find sons, not other nested tags.
2. Sub-element selectors need to be connected with > symbols, and there must be no spaces.
3. Sub-element selection The selector can not only use the label name, but also use other selectors
​ 4. The sub-element selector can continue through the > symbol

​ 5. What is the difference between a descendant selector and a child element selector?
-The descendant selector uses a space as a connection symbol
​ The child element selector uses > as a connection symbol
​ -The descendant selector will select all specific descendants in the specified tag Label, that is, the son/grandson will be selected..., as long as the specific label is placed in the specified label, it will be selected​ The
sub-element selector will only select the specified label, all specific direct labels, that is, only the specific label will be selected son of label

6. Common points between descendant selectors and sub-element selectors
- Both descendant selectors and sub-element selectors can use tag names/id names/class names as selectors
- Both descendant selectors and sub-element selectors can Continue through the respective connection symbols
​ Selector 1> Selector 2> Selector 3> Selector 4{}
​ 7. How to choose in enterprise development
If you want to select all specific tags in the specified tag, then Use a descendant selector
If you only want to select all specific child tags in a specified tag, then use a child element selector

- intersection selector

​ Function: Set attributes for the intersecting part of the tags selected by all selectors
Format:
​ Selector 1 Selector 2{ Attribute: value; } Notes: 1. Between selectors and selectors There is no connection symbol between them​ 2. The selector can use the label name/id name/class name​ 3. The intersection selector is only for understanding, and it is not used much in enterprise development

- union selector

​ Role: Set attributes for all selector selected tags
Format:
​ Selector 1, Selector 2{ Attribute: value; } Note points: 1. The union selector must be connected with 2. The selector can use tag name/id name/class name

- Sibling selector

​ 1. Adjacent sibling selector CSS2
​ Function: Set attributes for the label selected by the selector immediately following the specified selector
Format:
​ Selector 1+Selector 2{ Attribute: value; } Note points :​ 1. Adjacent sibling selectors must be connected by + 2. Adjacent sibling selectors can only select the tag immediately following it, and cannot select separated tags

​ 2. Universal sibling selector CSS3
​ Function: Set attributes for all tags selected by all selectors behind the specified selector Format
:
​ Selector 1~Selector 2{ Attribute: value; } Notes:​ 1 .The universal sibling selector must be connected with ~​ 2. The universal sibling selector selects all the tags selected by a selector behind the specified selector, whether they are separated or not

- Pseudo-class selector

​ The pseudo-class starts with ":" and is used after the selector to indicate that the element can only be selected in a special state

- ordinal selectors (struct pseudo-class selectors)

​ The most representative of the new selectors in CSS3 is the order selector
​ 1. The number in the same level
​ :first-child selects the first label in the same level
​ :last-child selects the same level :
nth-child(n) Select the nth label in the same level
:nth-child(odd) Select all odd numbers in the same level
:nth-child(even) Select all in the same level Even
​ :nth-child(xn+y) x and y are user-defined, and n is a counter, incrementing from 0

​ For example (3n+1) corresponds to 1, 4, 7...
​ :nth-last-child(n) Select the last nth label in the same level
​ :only-child Select the only child element E of the parent element . It takes effect when there is only one child element
Note: No distinction between types
2.
The number of the same type at the same level
​ :first-of-type Select the first tag of the same type at the same level
​ :last-of -type Select the last tag of the same type in the same level
​ :nth-of-type(n) Select the nth tag of the same type in the same level
​ :nth-last-of-type(n) Select the same tag in the same level The penultimate nth label of the type
​ :only-of-type selects the only child element of a specific type of the parent element

- Dynamic pseudo-class selector

​ E:link (link pseudo-class selector): Select the matching E element, and the matching element is defined as a hyperlink and has not been visited. Commonly used on link description points
E:visited (link pseudo-class selector): Select the matching E element, and the matching element is defined with a hyperlink and has been visited. Commonly used on link description points
​ E: active (user behavior selector): Select the matching E element, and the matching element is activated. Often used on link points and buttons
​ E:hover (user behavior selector): Select the matching E element, and the user's mouse stays on the element E. IE6 and below browsers only support a:hover

- Pseudo-class selector for a tag

​1. Through our observations, we found that there is a certain state in the a label
​ 1.1 The default state, never visited
​ 1.2 The state of being visited
​ 1.3 The state of the mouse long press
​ 1.4 The state of the mouse hovering on the a label
​2 . Format
​ :link Modify the style in the state that has never been visited
​ :visited Modify the style in the state that has been visited
​ :hover Modify the style in the state where the mouse is hovering on the a tag
​ :active Modify the state in the state of long-pressing the mouse 3. Points
to note
​ 3.1 The pseudo-class selector of a tag can appear alone or together
3.2 If the pseudo-class selector of a tag appears together, there is a strict order requirement
Default state: link->be Visited state: visited->mouse hover state: hover->mouse long press state: active
​ The order of writing must follow the principle of love hate
​ 3.3 If the style of the default state is the same as the style of the visited state, then you can abbreviation

/* 简写格式 */
a{
    color: green;
}
/* link:和 :visited样式一样，可以写成以上的简写格式，代码量减少，开发效率提高*/
/*a:link{*/
    /*color: green;*/
/*}*/
/*a:visited{*/
    /*color: green;*/
/*}*/

- negated pseudo-classes

​ Role: Some elements can be removed from the selected elements
Syntax:
:not(selector)
For example:
p:not(.hello){ background-color: yellow;​ }

- Pseudo-element selector

​Use pseudo-elements to represent some special positions in the element.
::after
​ Indicates the last part of the element.
Generally, it needs to be used in combination with the style of content.
Through content, you can add some content to the position of after
::
before Represents the front part of an element.
Generally, it needs to be used in combination with the content style.
Through content, some content can be added to the before position.
::first-letter
Set a style for the first character.
::first-
line Set a style for the first row

- Attribute selector

​ Function: Find the corresponding label according to the specified attribute name, and then set the attribute
Format:
​ [attribute]

​ [attribute=value]
​ Function: find the tag with the specified attribute, and the value of the attribute is equal to value, and then set the attribute
The most common application scenario is to distinguish the input attribute

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

​ - What does the value of the attribute start with?
[attribute|=value] CSS2
​ [attribute^=value] CSS3

<input type="text" name="user-name" id="">
<input type="password" name="username" id="">

​ The difference between the two:
In CSS2, only the beginning of value can be found, and the value is separated by - from other content In
CSS3, as long as it starts with value, it can be found, whether it is separated by - or not

​ -What does the value of the attribute end with?
[attribute$=value] CSS3

​ -Whether the value of the attribute contains a specific value
​ [attribute~=value] CSS2
​ [attribute*=value] CSS3
​ The difference between the two:
​ Only independent words can be found in CSS2, that is Contains value, and value is separated by spaces
​ CSS3 can be found as long as it contains value

- wildcard selector

​ Function: Set properties for all labels on the current interface
Format:
*{ Attribute: value; } Notes : Since the wildcard selector is the property of setting all labels on the interface, it will be traversed before setting For all tags, if there are more tags on the current interface, the performance will be poor, so wildcard selectors are generally not used in enterprise development

- Combo selector

​ Multiple selectors are used in combination. For example, "div.one" means a div element with a class of one

5. Three major features of CSS

- Inheritance

​ Role: Set some attributes for the parent element, and the child elements can also use it. This is called inheritance.
Note :
1. Not all attributes can be inherited, only color/font-/text-/ Attributes at the beginning of line- can be inherited
​ 2. In CSS inheritance, not only sons can inherit, but all descendants can inherit
​ 3. Particularity in inheritance
​ 3.1 The text color and underline of a tag cannot be inherited Yes, as a child element
​ 3.2 The text size of the h tag cannot be inherited, and it is used as a child element

<div>
  <a href="https://www.baidu.com">百度一下</a>
  <p>我是p标签</p>
  <h1>我是h1标签</h1>
</div>

​ Application scenarios:
​ Generally used to set some common information on web pages, such as text color, font, text size, etc.

- Cascading

​ Function: Cascading is a kind of ability of CSS to deal with conflicts
Note:
Cascading will only occur when multiple selectors select the "same label" and then set the "same attribute"

- priority

​ Role: When multiple selectors select the same label and set the same attribute for the same label, how to stack is determined by the priority

- Three methods of priority judgment

​ -Indirect selection refers to inheritance
​ If it is an indirect selection, then whoever is closer to the target label will listen to it

​ -Same selector (direct selection)
​ If they are all directly selected, and they are all the same type of selector, then whoever writes it later will listen to whoever it is

​ -Different selectors (direct selection)
If they are all directly selected and not the same type of selector, then they will be stacked according to the priority of the selector
​ id>class>label>wildcard>inheritance>browser default

-Priority!important

​ Function: It is used to increase the priority of a certain attribute in the selector of a directly selected label, and the priority of the specified attribute can be raised to the highest

​ Points to note:
1. !important can only be used for direct selection, not indirect selection
2. The tag selected by the wildcard selector is also directly selected
3. !important can only increase the priority of the specified attribute, The priority of other attributes will not be raised
​ 4.!important must be written after the attribute value, before the semicolon
​ 5. The exclamation mark in front of!important cannot be omitted
​ 6. However, it is generally recommended not to use "!important", because It changes how the cascade works, making debugging difficult.

- priority weight

​ Role: When multiple selectors are mixed together, we can determine who has the highest priority by calculating the weight

​ -Calculation rules for weight
​ Inline styles, such as: style="...", the weight is 1000.
​ID selector, such as: #content, the weight is 0100.
​ Classes, pseudo-classes, and attribute selectors, such as .content, have a weight of 0010.
​ Label selectors, pseudo-element selectors, such as div p, have a weight of 0001.
​ Wildcards, compound selectors (+, >, ~, etc.), negative pseudo-classes (:not) have no effect, and the weight is 0000.
​ Inherited styles have no weight

- First calculate how many ids there are in the selector, the selector with more ids has the highest priority
- If the number of ids is the same, then look at the number of class names, the one with more class names
has the highest -If the number of class names is the same, then look at the number of tag names, the one with more tag names has the highest priority
​ -If the number of ids is the same, the number of class names is the same, and the number of tag names is also the same , then the calculation will not continue, so at this time whoever writes in the back listens to whom

​ That is to say, if the priority is the same, whoever writes later listens to whom

​ Points to note:
1. Only the selector that directly selects the label needs to calculate the weight, otherwise it will definitely listen to the directly selected selector