Front-end - CSS Basics

CSS Document

Introduction to CSS

Cascading Style Sheets (abbreviated as CSS) is a cascading style sheet style sheet Language, used to describe HTML or XML (including SVG,MathML,XHTML CSS describes how elements on screen, paper, audio and other media should be rendered.

CSS is mainly used in HTML pages:

  • Text content: font, size, alignment, etc.
  • The shape of the picture: width and height, border style, margin, etc.
  • Layout and appearance display style of the layout.

HTML is responsible for structure rendering and CSS for style.

CSS Syntax Specification

CSS rules consist of two main components: a selector and one or more declarations.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* selector: { key: value; ...} */
        p {
            color: red;
        }
        div {
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <p>
        Test CSS.
    </p>
    <div>
        Hello.
    </div>
</body>
</html>
  • CSS can be written in the <style>tag in <head>, with /* */ for in-block comments.
  • The selector specifies a CSS-style HTML tag with curly brackets that specify the specific style of the object.
  • Attributes and attribute values are expressed as key-value pairs, separated by, and ended by.

CSS Base Selector

CSS selectors can be divided into:

  • Basic selector: consists of a single tag.
    • tag chooser
    • Class selector
    • id selector
    • Wildcard Selector
  • compound selector

tag chooser

Select all the labels of a certain type and refer to the code above.

Class selector

Used to select one or more tags, indicated by.

<head>
    <style>
        /* selector: { key: value; ...} */
        .content {
            color: red;
        }
        .intro {
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <p class="content intro">
        Test CSS.
    </p>
    <div class="intro">
        Hello.
    </div>
</body>

Be careful:

  • Use-Split Between Class List Words
  • A tag can be multiple classes at the same time, with spaces separating the class names, such as class="video-desc report-wrap-module report-scroll-module"
  • Use plain English naming classes whenever possible

Use Class Selector to Draw Box

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        .red-box {
            background-color: red;
        }
        .green-box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red-box"> </div>
    <div class="box green-box"> </div>
    <div class="box red-box"> </div>
</body>

id selector

Used to select the only HTML element with a specific id, expressed in #

  • Class selectors are primarily used to select styles
  • The id selector is used to select the only element on the page and is often used with JS
<head>
    <style>
        #hello {
            font-size: xx-small;
            color: pink;
        }
    </style>
</head>
<body>
    <div id="hello"> Hello </div>
</body>

Wildcard Selector

CSS uses * to represent all elements in the selection page, including <html>, <body>, and so on.

For example, clear the inside and outside margins of all element labels:

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

CSS Set Font

CSS font properties can be used to define fonts, sizes, thickness, text styles (italics), and so on.

Typeface

The property font-family defines the font.Note:

  • Various fonts, separated
  • If the font has spaces, quotation marks are required
<style>
    p {
        font-family: Arial, Helvetica, sans-serif, 'Microsoft YaHei';
    }
</style>

font size

The property font-size defines the font size.Note:

  • PX (pixel) is the most common unit
  • Chrome default font size is 16px, different browsers may have different default font sizes, try to write the font size clearly
  • Declaring a body's font changes the size of the entire page's text
    • Title labels such as <h1> need to be set separately
<style>
    /* selector: { key: value; ...} */
    body {
        font-size: 20px;
    }
    h1 {
        /* body Font size settings in are not valid for <h>labels and need to be set separately */
        font-size: 20px;
    }
</style>

Font thickness

The property font-weight defines the size of the font. font-weight reference

<style>
    body {
        font-weight: 900;
    }
</style>

The default value is normal, no bold, bold bold. You can also use values from 100 to 900, where 400 equals normal and 700 equals bold.

Font Style (Italic)

The property font-style defines whether the font is skewed, normal is normal, italic is skewed.

  • italic is rarely used in actual development, and normal is more often used to change the text used to label <em>to not tilt.
<style>
    em {
        font-sytle: normal;
    }
    p {
        font-style: italic;
    }
</style>

Font Composite Properties

<style>
    p {
        /* font: font-style font-weight font-size/line-height font-family */
        font:italic 900 30px/10px Arial, Helvetica, sans-serif;
    }
</style>

Be careful:

  • Must be written in strict order, with spaces separating attributes
  • Some attributes can be omitted (default), but the font-size and font-family attributes must be preserved or the font attribute will not work

CSS Text Properties

text color

The attribute color defines the color of the text.

<style>
    div {
        color: red;
    }
</style>
Representation Attribute Value
Predefined color values color:red;
Hexadecimal color: #ff0000;
RGB color: rgb(255, 0, 0); Or color: rgb(100%, 0%, 0%);

align text

The attribute text-align sets the horizontal alignment of text within an element. Default left, right, center alignment.

<style>
    h1 {
        /* The essence is to center the text horizontally in the h1 box */
        /* h1 Label box or exclusive line */
        text-align: center;
    }
</style>

Decorative Text

<style>
    a {
        /* Ununderline <a>Label by default */
        text-decoration: none;
    }
</style>
Attribute Value describe
none By default, no decorative lines (most commonly used)
underline Underline, <a>Label with underline
overline Underline (not commonly used)
line-through Strikeout (not commonly used)

text-indent

Units can be either pixel px or relative size em, which is the size of a text in the current element.

<head>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>How are you</p>
    <div>How are you</div>
    <div>qweqwe</div>
</body>

Line spacing

A line of text is divided into upper spacing, text height, and lower spacing. If font-size and line-height are set as follows, the upper spacing is 5px, the text height is 16px, and the lower spacing is 5px.

  • If the font-size and line-height values are the same, the upper and lower spacing values are 0
  • To achieve the effect of vertically centering text, you can make the values of line spacing and height equal, that is, heights and line-height s equal
<style>
    div {
        font-size: 16px;
        line-height: 26px;
    }
</style>

Introduction of CSS

Inline style sheet (inline)

  • Writing CSS styles in sytle properties
  • The quotation marks should conform to the CSS specification, that is, key: value; Format of
<div style="font-size: xx-large; color: greenyellow;">How are you? How are you?</div>
<div>qweqwe</div>

The results are as follows:

How are you? How are you?
qweqwe

Internal stylesheet (embedded)

This is the way you've always used it before, putting your CSS code in a separate <style>tag and writing it inside your HTML file.

  • Ideally, it can be placed anywhere in an HTML document, but it is typically placed in the <head>tag

External Style Sheet

  1. Create a new.CSS and put all your CSS code in it (no <styel>tags are required)
  2. Introduce a.css file in an HTML page using the <link>tag.
<link href="style/style.css" rel="sytlesheet">

CSS Composite Selector

A composite selector is a combination of two or more basic selectors in different ways.

Descendant Selectors

  • Space Separated
  • The second element can be either a son or a descendant, for example, the <a>tag below is the grandchild of the <ol>tag, and still works
  • The last change is the style of the selected descendant element
  • Two elements can be any base selector
ol li {
    color: blue;
}

ol a {
    color: red;
}

<ol>
    <li>ol Of li</li>
    <li>ol Of li</li>
    <li><a href="#">test</a> ol's li</li>
</ol>

Child selectors

  • Only son elements can be selected
  • Use > Separate
.nav>a {
    text-decoration: none;
    color: red;
}

<div class="nav">
    <a href="#"> son </a>
    <p><a href="#"> grandson </a></p>
</div>

Only son is now red and not underlined.

Union selector

Select multiple sets of labels to define the same style.

  • Use, separate
  • Recommend writing vertically
  • You can use any form of selector
ul>li, 
div a {
    color: royalblue;
}

<ul>
    <li>ul Of li</li>
    <li>ul Of li</li>
    <li>ul Of li</li>
</ul>

<div class="nav">
    <a href="#"> son </a>
    <p><a href="#"> grandson </a></p>
</div>

Pseudo Class Selector

  • Use: to indicate

Linked pseudo class selector

Note to write in order:

/* Unvisited Links */
a:link {
    color: #333;
    text-decoration: none;
}

/* Links Visited */
a:visited {
    color: orange;
    text-decoration: underline;
}

/* Links hovered by mouse */
a:hover {
    color: red;
    text-decoration: underline;
}

/* Mouse is pressing links that are not loosened */
a:active {
    color: green;
    text-decoration: underline;
}

focus pseudo class selector

Select the form element that gets the focus (cursor). Generally speaking, <input>label gets the cursor.

input:focus {
    background-color: red;
    color: gray;
}

CSS Element Display Mode

HTML elements can be divided into block elements and in-line elements.

Block Element

<div>is the most typical block element, and the common ones are: <h1>~<h6>, <p>, <ul>, <ol>, <li>, etc.

  1. Exclusive Line
  2. Height, width, outside margin, inside margin can be controlled
  3. The default width is 100% of the container (parent width), for example <div>The default is the width of the entire page because it inherits from <body>
  4. Is a container and box that can contain block or inline elements

Be careful:

  • Elements of a text class cannot be placed at the block level
    • For example, block-level elements cannot be placed inside <p> and <h1>~<h6>.

In-line (inline) elements

<span> is the most typical inline element, and the common ones are <a>, <strong>, <b>, <em>, <ins>, etc. The main features are:

  1. A row can show multiple, with a gap in the middle, for example, between two
  2. Setting width and height directly is invalid
  3. The default width is the width of its own content
  4. Inline elements can only hold text or other inline elements

Be careful:

  • No more <a>labels can be placed inside <a>labels
  • Block-level elements can be placed inside <a>tags, but it is safer to switch to block-level mode for <a>tags

Special Elements

Some special elements, such as <img>, <input>, <td>, etc., have the characteristics of both block elements and in-line elements. Some data refer to them as in-line block elements. Its main features are:

  1. On the same line as the adjacent inline element (or inline block element) (inline element characteristics)
  2. The default width is the width of the content itself (in-line element characteristics)
  3. Height, row height, outer margin, and inner margin can be controlled (block level element characteristics)

Display Mode Conversion

Use scenarios: Increase the trigger range by, for example, converting <a> to block-level elements.

  • Convert to block element: display: block;
  • Convert to in-line element: display: inline;
  • Convert to an inline block element: display: inline-block;
<a href="https://Www.baidu.com "class=" search ">Baidu</a>

.search {
    background-color:skyblue; 
    text-decoration: none; 
    display: inline-block;  /* Convert to inline block element */
    height: 30px; 
    width: 100px;
}

The display effect is as follows:

Baidu

Background of CSS

background color

The default background-color value is transparent, which is transparent.

div {
    background-color: pink;
}

Background picture

Back-image is typically used for:

  • Decorative icon, logo, etc.
  • Larger Background Picture
div {
    height: 300px;
    width: 300px;
    background-image: url(images/logo.png);
}

Background picture tiling

Background pictures are tiled by default. You can set the value of background-repeat to no-repeat, repeat-x, repeat-y to make background pictures not tiled, tiled, tiled horizontally only, tiled vertically only.

Background Picture Location

Modify the position of the picture in the background:

div {
    height: 300px;
    width: 300px;
    background-image: url(images/logo.png);
    background-position: 10px 10px;
}

Parameter representations: x-coordinate and y-coordinate, which can use location nouns or exact units.

parameter values Explain
Location Noun Vertical with top
Precise units Floating Point Number + Unit Flag or Percentage

Location Noun

If it is a positional noun,

  • If there are two positional nouns, such as background-position: left top;, Then the order of the two values does not matter, and the effect is the same as top left
  • If there is only one positional noun, such as background-position: left;, Then the default second value is center

Precise units

If it is an exact unit,

  • If there are two numbers, it must be the first x-coordinate and the second y-coordinate
  • If there is only one number, it must be an x-coordinate with the y-axis vertically centered

Mixed Units

If it is a mixed unit, it must be the first x-axis and the second y-axis, for example background-position: center 10px; Refers to a horizontal center with a Y-axis offset of 10 pixels.

Background Image Fixing

Set the background-attachment value to scroll or fixed to scroll or fix the background image as the page scrolls.

background-attachment: fixed;

Compound Writing

The compound writing of background has no prescribed order. Generally speaking, it is written in the following order:

.logo {
    height: 300px;
    width: 300px;
    background: pink url(images/logo.png) no-repeat scroll center left;
}
  • Composite writing is more recommended in real-world development

CSS3 Background Color Translucent Effect

Only valid for background colors.

background: rgba(1, 1, 1, 0.3)

The last parameter is alpha transparency, with 1 indicating opacity.

Three features of CSS

Cascade

Conflicts occur when the same selector sets the same property, and the style that follows overrides the other styles. For example, in the code below, Test will show pink.

<div>Test</div>

div {
    color: skyblue;
}

div {
    color: pink;
}

Inheritance

Child tags inherit certain styles of parent tags:

  • Mainly text-related styles, such as (text-, font-, line-start properties, and color properties)

For example, the font style was previously set in the <body>tag, and the <body>style is inherited directly if the subtag has no associated style.

Inheritance of row height

  • Row heights can follow or not (in multiples)
  • When the row height representing the multiple is inherited, the row height of the child element is: font-size of the current child element multiplied by the row height multiple
<body>
    <p>I am p</p>
    <div>I am div</div>
    <ul>
        <li>I am li</li>
        <li>I am li</li>
        <li>I am li</li>
    </ul>
</body>

body {
    font: 14px/1.5 monospace;
}

div {
    font-size: 18px;
}

li {
    font-size: 20px;
}

The <p>label, <div>label, and <li>label all inherit the row height of the <body>label, while the <p>label row height is 14px*1.5=21px, <div>label row height is 27px, and <li>label row height is 30px.

priority

When an element is selected by multiple selectors, priority is generated.

  • Same selector, cascading
  • Different selectors, executed according to selector weight
selector weight
Inheritance or * (0, 0, 0, 0)
element selector (0, 0, 0, 1)
Class selector, pseudo class selector (0, 0, 1, 0)
id selector (0, 1, 0, 0)
Inline style="" (1, 0, 0, 0)
! important Infinity 
<body>
    <div>i am div</div>
    <p>I am p</p>
    <p class="test">I am p</p>
    <p class="test" id="demo">I am p</p>
    <p class="test" id="demo2" style="color: black;">I am p</p>
    <p class="test" id="demo3" style="color: black;">I am p</p>
</body>

body {
    color: red;
}

p {
    color: skyblue;
}

.test {
    color: yellow;
}

#demo3{
    color: pink!important;
}

#demo, #demo2, #demo3 {
    color: green;
}

Label colors from top to bottom are: red, blue, yellow, green, black, pink.

Priority considerations

  1. The 4-digit number of priority does not produce rounding, which is understood to mean that the class selector is always larger than the element selector
  2. Judge priority from left to right, and continue to judge next if the current number of digits is the same
  3. Child elements inherit weights of (0, 0, 0, 0), regardless of the parent element's weight.
  4. Since the browser has some default styles, such as <a>label blue, underlined style, <h1>label font and bold style, it is not possible to override the default style at this time because the inherited weight is (0, 0, 0, 0), and it must be a selector with weights above (0, 0, 0, 1)

Overlay of weights

Composite selectors produce overlays of weights, such as:

  • div ul li weights are (0, 0, 0, 1)
  • The.nav ul li weight is (0, 0, 1, 2)
  • a:hover weight is (0, 0, 1, 1)
  • The.nav a weight is (0, 0, 1, 1)

Tags: Front-end

Posted on Sat, 27 Nov 2021 12:19:16 -0500 by phparray

Hot Tags

©2022 Programmer Help