Detailed explanation of CSS in JavaWeb-HTML Tutorial-php.cn

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><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>

Copy after login

　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><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><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>

Copy after login

　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><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>

Copy after login

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