Article directory
1. CSS
1. Introduction to CSS
HTML only pays attention to the semantics of the content and can make simple styles, but it may be ugly when done.
CSSyesCascading Style Sheetsabbreviation. CSS is also a markup language, mainly used to set the HTML pagetext content(font, size, alignment, etc.),Image shape(width and height, border style, margins, etc.) andThe layout and appearance of the layout。
CSS can beautify HTML, make HTML more beautiful, and make page layout simpler. HTML focuses on structural presentation, and styles are handed over to CSS, that is,Structure (HTML) and style (CSS) are separated.
2. CSS syntax specifications
CSS rules consist of two main parts: a selector and one or more declarations .
- The selector is an HTML tag used to specify CSS styles, and the curly brackets are the specific styles set for the object.
- Properties are style attributes set for the specified object, such as font size, text color, etc.
All styles are included in the <style> tag, indicating a style sheet. < style > is usually written above < head >。
<head>
<style>
h4 {
color: red;
font-size: 20px;
}
</style>
</head>
2. CSS basic selector
1. The role of selector
The selector selects different tags according to different needs.
2. Selector classification
- The selector is divided intoBasic selectorandcompound selectorTwo broad categories.
- Basic selectors are composed of a single selector.
- Basic selectors include: tag selector, class selector, id selector and wildcard selector
3. Basic selector
tag selector
Tag selector (element selector) refers to using HTML tag names as selectors, classifying them according to tag names, and specifying a unified CSS style for a certain type of tags in the page.
-grammar:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
The tag selector can quickly and uniformly set styles for tags of the same type on the page, but it cannot design differentiated styles and can only select all current tags.
class selector
If you want to differentially select different tags and select one or several tags individually, you can use the class selector.
-grammar:
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
The structure needs to use the class attribute to call the class class
For example: Set all red class HTML elements to red
.red {
color: red;
}
<div class='red'>设为红色</div>
The class selector is identified by ".", followed by the class name (named by yourself), which can be understood as giving the label a name, and the name needs to be meaningful.
-Multiple class names:
Multiple class names can be assigned to a label to achieve more selection purposes. These class names can select this label, which can be understood as a label having multiple names.
Using multiple class names can put the same styles of some tag elements into one class. These tags can call this common class and then call their own unique classes, thus saving code.
id selector
The id selector can specify a specific format for HTML elements marked with a specific id. HTML elements use the id attribute to set the id selector. In CSS, the id selector is defined with "#".
-grammar:
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
The id attribute can only be called once per HTML document
-The difference between id selector and class selector:
A tag can have multiple class names, and a class selector can also be used by multiple tags. The id selector is unique and must not be repeated. Class selectors are most commonly used in modifying styles, and id selectors are generally used for unique elements on the page.
wildcard selector
In CSS, the wildcard selector is defined with "*", which means to select all elements (tags) on the page.
-grammar:
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
3. Common CSS properties
1. Font attributes
CSS font properties are used to define font family, size, weight, and text style.
Font family
CSS usagefont-familyProperty defines the font family of the text.
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- A font consisting of multiple words separated by spaces and enclosed in quotation marks
- Various fonts must be separated by commas in English state.
- Several common fonts: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
font size
CSS usagefont-sizeProperty defines font size.
p {
font-size: 20px;
}
- px (pixel) size, a commonly used unit in web pages
- Different browsers may display different font sizes by default. Try to give a clear value.
Font weight
CSS usagefont-weightProperty sets the weight of the text font.
p {
font-weight: bold;
}
Several attribute values of font thickness:
| attribute value | describe |
|---|---|
| normal | Default value (not bold) |
| bold | Bold |
| 100 - 900 | 400 equals normal, 700 equals bold |
text style
CSS usagefont-styleProperty sets the style of the text.
p {
font-style: normal;
}
Several attribute values of text styles:
| attribute value | describe |
|---|---|
| normal | default value |
| italic | italics |
2. Text attributes
CSS text properties define the appearance of text, such as text color, aligned text, decorative text, text indentation, line spacing, etc.
text color
colorProperty used to define the color of the text.
div {
color: red;
}
Centralized representation of text color:
| Expression | attribute value |
|---|---|
| predefined color values | red、green、blue… |
| hexadecimal | #FF0000、#FF6600、#29D794 |
| RGB code | rgb(255,0,0) or rgb(100%,) |
Align text
text-alignProperty used to set the horizontal alignment of text content within an element.
div {
text-align: center;
}
Several attribute values for aligning text:
| attribute value | illustrate |
|---|---|
| left | left aligned (default) |
| right | Align right |
| center | center |
Decorative text
text-decorationProperties specify decorations added to the text. You can add underline, strikethrough, overline, etc. to text.
div {
text-decoration：underline；
}
Several attribute values for decorating text:
| attribute value | illustrate |
|---|---|
| none | Default, no decorative lines |
| underline | Underline |
| overline | Overline |
| line-through | strikethrough |
text indent
text-indentThe attribute is used to specify the indentation of the first line of text. By setting this attribute, the first line of all elements can be indented by a given length, and even the length can be a negative value.
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
emIt is a relative unit, which is the size of one text of the current element (font-size). If the current element does not set a size, it will be one text size of the parent element.
Line spacing
line-heightProperty is used to set the distance between rows (row height). You can control the distance between lines of text.
p {
line-height: 20px;
}
4. CSS introduction method
1. Inline style sheet (inline style)
Inline style sheets (inline style sheets) set CSS styles in the style attribute inside the element tag.
<div style="color: red; font-size: 12px;">行内样式表</div>
Suitable for modifying simple styles.
2. Internal style sheet (embedded)
Internal style sheets (embedded style sheets) are written inside the HTML page. All CSS codes are extracted and placed separately in a <style> tag.
<style>
div {
color: red;
font-size: 12px;
}
</style>
3. External style sheet (linked)
The styles are written separately into CSS files, and then the CSS files are introduced
into the HTML page for use.
<link rel="stylesheet" href="css文件路径">
| Attributes | effect |
|---|---|
| rel | Define the relationship between the current document and the linked document, which needs to be specified as "stylesheet", indicating that the linked document is a style sheet file |
| href | Defines the URL of the linked external style sheet file |