Detailed explanation of CSS in JavaWeb

Introduction to CSS

1. Overview and functions of CSS

　CSS (Cascading Style Sheets) is a cascading style sheet used to define the display effect of web pages. It can solve the duplication of style definitions in HTML code, improve the maintainability of later style code, and enhance the display effect of web pages.
　 Function: CSS separates web page content and display style, improving the display function.

2. Combination of CSS and HTML (*****) (four types)

　How to combine CSS and HTML

　1.style attribute method:

Use the style attribute in the tag to change the display style of each tag.

Example:

<span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">style</span><span style="color: #0000ff">="background-color:#FF0000; color:#FFFFFF"</span><span style="color: #0000ff">></span><span style="color: #000000">
        p标签段落内容。
</span><span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span></span>

　This method is more flexible, but it is more troublesome to define the same style for multiple identical tags, so it is suitable for local modification.

　2.Style tag method: (embedded method)

　Add the style tag to the head tag to make unified modifications to multiple tags. ​

<span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">=”text/css”</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        p </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">#FF0000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span>
    <span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span></span></span>

　This method can uniformly set the style of a single page, but it is not flexible enough for local areas.

　3. Import method: (commonly used method)

　The premise is that a defined CSS file already exists. If part of the style of the web page needs to be used, then use this method.

Example:

<span style="color: #0000ff"><span style="color: #800000">style </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
    @import url(css_3.css);
    div </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000"> color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">#FF0000</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #000000">}</span>
<span style="color: #0000ff"></span><span style="color: #800000">style</span><span style="color: #0000ff">></span>　　</span>

Define the end of an external CSS file (.css).
　@import url("css file address"); needs to be written inside the

Note: URL brackets must be ended with a semicolon. If the imported style overlaps with the style defined on this page, the style defined on this page shall prevail.

　4. Link method: (commonly used method)

　It is implemented through the link tag in the head tag. The premise is that there must be a predetermined CSS file first.

　Example:

<span style="color: #0000ff"><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="css_3.css"</span> <span style="color: #0000ff">/></span></span>

　 cannot be written inside the

Note: Multiple CSS files can be linked through multiple link tags. The repeated style is subject to the last linked CSS style.

3. CSS style priority and code specifications

　1.Priority of CSS

　(Generally) From top to bottom, from outside to inside, and from low to high priority.
Special case: tag name selector

2. CSS code specifications

　(1) Selector name {attribute name: attribute value; attribute name: attribute value;...}

　 (2) Separate attributes with semicolons
　 (3) Attributes and attribute values ​​are directly connected with colons

　 (3) If an attribute has multiple values, the values ​​should be separated directly by spaces
　 Example

div{border:值1 值2 值3}

4. CSS selector (*****)

　1. Selector:

　 Which tag does the CSS code you write act on.

　2. Basic selector:

　(1) Tag name selector

　Each tag defines a class attribute and an id attribute. Used to identify labels to facilitate label operations.
　In the definition, the class attribute value of multiple tags can be the same, and the id value must be unique, because it is often used in JavaScript.

　 (2) Class selector: (commonly used)
　 Define the class attribute in the tag and assign a value. Set the style of the tag through tag name.class value.
　Example:
　When setting different styles for the same label, use class to distinguish them.

<span style="color: #000000">p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}</span>

<span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”pclass_1”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”pclass_2”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span></span></span>

When different tags have the same settings, use class to define them uniformly.

<span style="color: #000000">.classname {color:#00FF00;}

</span><span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”classname”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">=”classname”</span><span style="color: #0000ff">></span>DIV标签样式<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span>

　 (3) id selector:
It is similar to the class selector, but the format is different. The name of the selector is: #id value.
Example:

<span style="color: #000000">#pid { color:#0000FF;}
</span><span style="color: #0000ff"><span style="color: #800000">p </span><span style="color: #ff0000">id</span><span style="color: #0000ff">=”pid”</span><span style="color: #0000ff">></span>P标签样式<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span></span>

　Note: Multiple tags can also define the same id value, but an error will occur when JavaScript retrieves the tag element. Therefore, forming a habit and ensuring the uniqueness of the id value is also very beneficial for future database design.

　Priority (special):
　Tag name selector

　3. Extended selector:

　　 (1) Association selector: There is a relationship between multiple tags.
　Separated by spaces
　(2) Combined selectors: Set the same style for multiple different selectors
　Separated by commas
　　(3) Pseudo-element selectors: Selectors defined by CSS
　If you use super The 4 states of the link, the order of use: L V H A

5. CSS layout (understanding)

* Box Model