CSS

CSS Overview

CSS is the abbreviation of Cascading Style Sheets, and its Chinese name is “Cascading Style Sheets.” CSS is used to control the appearance and layout of HTML elements, such as fonts, colors, borders, spacing, background, and element position.

HTML is responsible for organizing the page structure, and CSS is responsible for setting page styles. Separating structure from style improves the readability and reusability of your code.

Using CSS in HTML

There are three common uses of CSS.

inline style

Through elements style Attribute directly writes styles:

<input type="text" style="color: red;" />

In-line styles only work on the current element and are suitable for a small number of temporary style settings, which is not conducive to large-scale reuse.

Internal style sheet

In HTML pages <head> used in <style> Tag:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>内部样式表示例</title>
    <style>
        input {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" />
</body>
</html>

Internal style sheets usually only work on the current HTML page.

external style sheet

Save the CSS code in a separate file and then use the <link> Label introduction:

<link rel="stylesheet" type="text/css" href="css 文件地址" />

External style sheets can be reused by multiple pages and are the most common way in actual development.

Basic CSS syntax

CSS rules consist of selectors and declaration blocks:

选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

The selector is used to locate the element that needs to be styled, and the declaration block is used to describe the specific style. Multiple declarations are separated by semi-colons.

CSS selectors

tag selector

The label selector will select all labels with the same name on the page:

input {
    color: red;
}

ID selector

Each HTML element can be set id Attributes. ID Selector Use # Beginning:

#box {
    width: 300px;
    height: 300px;
}

on the same page id It should remain unique.

class selector

Class selectors pass the element’s class Attribute matching elements, using . Beginning:

.btn {
    width: 200px;
    height: 40px;
}

The same class can be applied to multiple elements, and one element can also use multiple classes simultaneously.

descendant selectors

The descendant selector is used to select qualified descendant elements within an element:

.box input {
    border-radius: 5px;
}

This style will select the class name of box all within the elements input Elements.

packet selector

When multiple selectors use the same style, you can use comma merge:

h1,
h2,
h3 {
    color: blue;
}

pseudo-class selector

Pseudoclasses are used to describe specific states of elements. Commonly used pseudo-classes for hyperlinks are as follows:

• :link: Links that have not yet been visited.

• :visited: Links that have been visited.

• :hover: Hover the mouse pointer over the element.

• :active: Element is activated, such as mouse pressed down but not yet released.

a:link {
    color: red;
}

a:visited {
    color: gray;
}

a:hover {
    color: green;
}

a:active {
    color: blue;
}

These writings are pseudo-class selectors, not pseudo-element selectors. Pseudo-elements are usually used ::before、::after and other forms.

Common style attributes

size and spacing

• width: Element width.

• height: Element height.

• margin: Outside distance.

• padding: Inner margins.

color and background

• color: Text color.

• background-color: Background color.

• background-image: Background picture.

• background-size: Background picture size.

• background-repeat: Whether the background picture is duplicate.

Font and text

• font-size: Font size.

• font-family: Font series.

• font-weight: Font thickness.

• text-align: Horizontal alignment of text.

Borders and effects

• border: Border.

• border-radius: Round corners.

• box-shadow: Shadow.

• cursor: Mouse pointer style.

Case 1: Button panel

CSS file

body {
    /* 设置页面背景图片 */
    background-image: url(img/fish.jpg);
    background-size: 1000px;
    background-repeat: no-repeat;
}

#box {
    width: 300px;
    height: 300px;
    margin: 50px auto;
    background-color: #cccccc80;
    border-radius: 10px;
    text-align: center;
}

.btn {
    width: 200px;
    height: 40px;
    margin-top: 20px;
    border: 0;
    border-radius: 5px;
    background-color: #cc33cc;
    color: white;
    font-family: 华文行楷;
    font-size: 30px;
    font-weight: bold;
}

.btn:hover {
    background-color: #cc66cc;
    cursor: pointer;
}

.btn:active {
    background-color: #cc99cc;
}

HTML file

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>按钮面板</title>
    <link rel="stylesheet" type="text/css" href="css2.css" />
</head>
<body>
    <div id="box">
        <img src="img/dog.png" width="100" height="150" alt="小狗" />
        <button class="btn">按钮1</button>
        <button class="btn">按钮2</button>
    </div>
</body>
</html>

Case 2: Login interface

CSS file

.box {
    width: 400px;
    height: 300px;
    margin: 100px auto;
    padding-top: 50px;
    border-radius: 10px;
    background-color: #6699ff;
    box-shadow: 3px 3px 10px #006666;
    text-align: center;
}

.title {
    color: #9900cc;
    font-size: 20px;
    font-weight: bold;
}

.inp {
    margin-top: 20px;
}

input {
    width: 300px;
    height: 35px;
    border: 0;
    border-radius: 5px;
}

.btn {
    margin-top: 20px;
    background-color: #cc99cc;
    color: white;
}

.btn:hover {
    background-color: #cc33cc;
    cursor: pointer;
}

.name {
    width: 250px;
    padding-left: 42px;
    background-image: url("img/name.jpg");
    background-size: 40px;
    background-repeat: no-repeat;
}

.pwd {
    width: 250px;
    padding-left: 42px;
    background-image: url("img/pwd.jpg");
    background-size: 40px;
    background-repeat: no-repeat;
}

HTML file

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="css3.css" />
</head>
<body>
    <div class="box">
        <div class="title">登&nbsp;&nbsp;录&nbsp;&nbsp;界&nbsp;&nbsp;面</div>
        <div class="inp">
            <input type="text" class="name" placeholder="请输入用户名" />
        </div>
        <div class="inp">
            <input type="password" class="pwd" placeholder="请输入密码" />
        </div>
        <div class="inp">
            <input type="submit" class="btn" value="提交" />
        </div>
    </div>
</body>
</html>