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
Write styles directly through the style attribute of the element:
<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
Use the <style> tag in <head> on the HTML page:
<!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 introduce it through the <link> tag:
<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
The id attribute can be set for each HTML element. The ID selector starts with #:
#box {
width: 300px;
height: 300px;
}id on the same page should remain unique.
class selector
The class selector matches the element through its class attribute, starting with .:
.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 selects all input elements within the element with the class name box.
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: Link not yet visited. -
:visited: Links that have been visited. -
:hover: Hover the mouse pointer over the element. -
:active: An element is activated, such as a 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 usually use ::before, ::after and other forms.
Common style attributes
size and spacing
-
width: Element width. -
height: Elemental height. -
margin: Outside margin. -
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 text alignment.
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">登 录 界 面</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>
If you enjoyed this, leave a comment~