Tip: after the article is written, the directory can be generated automatically. Please refer to the help document on the right for how to generate it
preface
Tip: Here you can add the general contents to be recorded in this article:
https://www.bilibili.com/video/BV14J4114768?p=61&spm_id_from=pageDriver
Tip: the following is the main content of this article. The following cases can be used for reference
1, CSS introduction
CSS sets the layout and appearance display style of text content (size, font, alignment, etc.) picture appearance (width, height, border margin) layout in HTML page
CSS rules consist of two parts: selectors (HTML tags) + one or more declarations
Write it in the head
To whom {what}
Attribute and attribute value are separated by:
Used after the attribute value is completed; end
It is recommended that style selector attribute names and attribute values use lowercase letters
: leave a space after
A space should also be left between h3 and {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>experience CSS grammatical norm</title>
<style>
/* Selector {style} */
/* Change the style for who {change what style} */
p {
color: red;
/* Changed the text size to 12 pixels */
font-size: 12px;
}
</style>
</head>
<body>
<p>I little interesting</p>
</body>
</html>
2, CSS basic selector
For selecting labels
It is divided into basic selector and compound selector
Base selector: a selector consisting of a single selector
Including label selector, class selector, id selector and wildcard selector
1. Label selector
The label name is used as a selector to modify the style of a large class
The code is as follows (example):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Label selector of base selector</title>
<style>
/* Tag selector: write superscript signature */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>schoolboy</p>
<p>schoolboy</p>
<p>schoolboy</p>
<div>girl student</div>
<div>girl student</div>
<div>girl student</div>
</body>
2. Class selector
Select one or more labels separately and use English
In style definition
class = "definition"“
.red {
color: red;
}
class="red"
The code is as follows (example):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Selectors such as base selectors</title>
<style>
/* Class selector formula: style point definition structure class calls one or more development classes, which are most commonly used*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
</style>
</head>
<body>
<ul>
<li class="red">Ice rain</li>
<li class="red">Love of the coming life</li>
<li>Li Xianglan</li>
<li class="memeda">Rare words</li>
<li class="star-sing">Jiangnan style</li>
</ul>
<div class="red">I also want to turn red</div>
</body>
A label can specify multiple class names, save code and modify them uniformly. It is also convenient to separate each class name with a space
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to use multiple class names</title>
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">Lau Andy</div>
</body>
3.id selector
The HTML element sets the id selector with the id attribute class. The id selector in CSS is defined with # to be called only once. Uniqueness is generally used with JS
#red {
color: red;
}
id="red"
The code is as follows (example):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic selector id selector</title>
<style>
/* id Pithy formula of selector: style # definition and structure id can only be called once, and others should not use it */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">Michael·Jackson</div>
<div>pink teacher</div>
</body>
4. Wildcard selector
Use * definition to select all elements (labels) in the page
No need to call, automatically format all labels
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wildcard selector of base selector</title>
<style>
* {
color: red;
}
/* * Here, the tags of HTML body div span Li and so on are changed to red */
</style>
</head>
<body>
<div>my</div>
<span>my</span>
<ul>
<li>It's still mine</li>
</ul>
</body>
5. Summary
3, CSS font properties
Size, thickness and style
1. Font family
body {
Font family: 'Microsoft YaHei';
}
font-family: ‘Times New Roman’, Times, serif; You can specify multiple fonts separated by commas. First see if the first one is available, and then push it back in turn
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Font family of font attributes</title>
<style>
h2 {
font-family: 'Microsoft YaHei ';
}
p {
/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>pink Secret of</h2>
<p>The most beautiful color in the crowd,</p>
<p>grace,Indifferent,And so clear in my heart.</p>
<p>The front end is always accompanied by difficulties and mistakes,</p>
<p>Meditation,calm,Conquer one after another.</p>
<p>We have to overcome it,</p>
<p>This is pink The secret is also the teacher's final entrustment.</p>
</body>
2. Size font size
body {
font-size: 16px;
}
px pixel
The title label is special, and the text size needs to be specified separately
Generally, one is assigned to the body
Font weight-3
body {
font-weight: bold;
}
normal (400) / bold (700) / border / lighter / number (100-900)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Font size of font attribute</title>
<style>
.bold {
/* font-weight: bold; */
/* This 700 should not be followed by the unit, which is equivalent to bold. It is a bold effect */
/* In actual development, we advocate using numbers to indicate bold or thin */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<p class="bold">We have to overcome it,</p>
<p>This is pink The secret is also the teacher's final entrustment.</p>
</body>
4. Text style font style
Italics / non italics
body {
font-style: italic;
}
Italic / normal
normal is generally used to em i change back to non tilt
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Text style of font attribute(style)</title>
<style>
p {
font-style: italic;
}
em {
/* Let the inclined font not tilt is to hurry back */
font-style: normal;
}
</style>
</head>
<body>
<p>classmate,You in class</p>
<em>You after class</em>
</body>
5. Composite attribute
Sequence font: font style font weight font size / line height font family;
Cannot replace sequential space separation
Unnecessary attributes can be omitted, but font size and font family must be retained
font: italic 700 16px 'Microsoft yahei';
4, CSS text properties
1. Color
Color defines the color of the text
Predefined color values
Hexadecimal
RGB
color: deeppink; color: #cc00ff; color: rgb(255, 0, 255);
2. Text alignment
Text align horizontal alignment
Align left align right align right align center center
<style>
h1 {
/* The essence is to align the text in the h1 box horizontally */
/* text-align: center;left */
text-align: right;
}
</style>
3. Decorative text
Text decoration underline
<style>
div {
/* Underline */
/* text-decoration: underline; */
/* Delete line */
text-decoration: line-through;
/* Upper scribe */
text-decoration: overline;
}
a {
/* Remove a default underline */
text-decoration: none;
color: #333;
}
</style>
4. Text indentation
Text indent first line indent effect
text-indent: 20px;
em the current text size. If the current element has no size set, it will be based on the text size of the parent element
<style>
p {
/* How far is the first line of text indented */
/* text-indent: 20px; */
/* If 2em is written at this time, it is the distance of indenting the current element by 2 text sizes */
text-indent: 2em;
}
</style>
5. Row spacing
line-height: 26px; Row spacing
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
5, CSS introduction method
According to the position of CSS style writing, it is divided into inline style sheet (inline), internal style sheet (embedded) and external style sheet (linked)
1. Internal style sheet (embedded)
Write inside the HTML page and put it in the style tag
It is usually placed in the head tag to control the whole page style, but it is not completely separated
2. Inline style sheet (inline)
Set the CSS style in the style attribute inside the element tag and modify the simple style
style is the label attribute, written in double quotation marks
<p style="color: pink; font-size: 20px;">Give me a pink memory</p>
3. External style sheet (linked)
The style is written separately in the CSS file, and the CSS file is introduced into the HTML page for use
1. The new suffix is css file
2. link rel = "stylesheet" href = "css file path"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>External style sheet</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Come on~Happy,There's plenty of time anyway...</div>
</body>
</html>
summary
CSS introduction
CSS basic selector
CSS font properties
CSS text properties
Introduction of CSS