CSS Basics (Part 1)

Introduction to CSS

CSS: beautify web pages, layout pages.

CSS and HTML

Structure (HTML) is separated from style (CSS).

HTML

Only focus on content semantics –> ugly;
can do simple styles –> cumbersome.
HTML structure: display element content

CSS

Cascading style sheet (CSS style sheet, cascading style sheet);
CSS is also a markup language.
Greatest value: let HTML do the structure, and render the style by CSS.
Beautifying HTML with CSS: Layout Web Pages

CSS syntax specification

CSS style rules: selector plus one or more declarations.
example:

h1 {
    
    color: red;font-size: 25px;}

h1:selector
color:property
red:value
color:red:declaration
font-size:property
25px:value
font-size:25px:declaration

Selectors: HTML tags that specify CSS styles.
{ }: It contains specific style settings.

CSS code style

(non-mandatory specification)

style format writing

Urgent format:

h3 {
    
    color: deeppink;font-size: 20px;}

Expand format:

h3 {
    
    
	color: deeppink;
	font-size: 20px;
}

style case

Generally lowercase.

Whitespace specification

Before the attribute, after the colon;
between the selector and the curly braces { }. (both keep a space)

CSS Basic Selectors

The role of CSS selectors

Select different tags according to different needs (select tags).

selector class

base selector

(composed of a single selector)
1. Label selector
2. Class selector
3. ID selector
4. Wildcard selector

compound selector

1. Descendant selector
2. Child element selector
3. Union selector
4. Link pseudo-class selector
5.focus pseudo-class selector

label selector

标签名 {
    
    
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	...
}	

(element selector) Use the HTML tag name as a selector to sort by tag name.
Advantages: Specify a unified CSS style for a certain type of tag in the page.
Disadvantage: You cannot design differentiated styles, you can only select all current tags.

class selector

Different tags can be selected in a differentiated manner, and one or several tags can be selected individually.

.类名 {
    
    
	属性1:属性值1;
	...
}

Example: Turn all HTML elements with the red class into red.

.red {
    
    
	color: red;
}

Grammar:
The structure should use the class attribute to call the meaning of the class class.

<div class='red'>变红色</div>

In CSS, class selectors are represented by a dot ".".
The class selector is identified by "." (English dot), followed by the class name (custom).
Custom —> You cannot use
    long names or phrases in tag names, you can use horizontal lines to name selectors.
    Do not use pure numbers, Chinese and other names (English letters as much as possible).
    Pinyin is spelled in full.
    "Naming convention": Web front-end development specification manual.doc
Memory formula:
    style point definition, structure class call.
    One or more, most commonly used for development.
Multiple class names:

<div class="red font20">亚瑟</div>

Write multiple class names (separated by spaces) in the tag class attribute.
Usage scenario: put the same style in a class name, easy to modify.

id selector

HTML elements marked with a specific id specify a specific style.
HTML elements use the id attribute to set the id selector, which is defined by "#" in CSS.

#id名 {
    
    
	属性1: 属性值1;
	...
}

#nav {
    
    
	color: red;
}

The role of id selectors and class (class) selectors:
1. Class selectors can be used multiple times (such as names)
 id selectors are unique and cannot be repeated (such as ID numbers)
2. Class selectors are most used in modifying styles
 The id selector is generally used on the unique element of the page (often with JavaScript)
memory formula:
    the style "#" is defined, and the structure "id" is called.
    It can only be called once, and "others" must not use it.

wildcard selector

Defined with "*" to select all elements (labels) in the page.

* {
    
    
	属性1: 属性值1;
	...
}

Wildcard selectors do not need to be invoked, and automatically apply styles to all elements.
Only used in special cases (example: clearing the inner and outer margins of all element tags).

* {
    
    
	margin: 0;
	padding: 0;
}

Summarize

base selector	effect	features	Usage	usage
label selector	to select all the same tags	Can't choose differently	more	p {color: red};
class selector	1 or more tags can be selected	Can be selected on demand	Much	.nav {color: red;}
id selector	Only 1 tab can be selected at a time	Can only appear once	General (used with js)	#nav {color: red;}
wildcard selector	select all tabs	The selected part does not require	special use	*nav {color: red;}

CSS text property

The CSS Fonts (font) property is used to define the font family, size, weight and text style (such as italic).

font family

Define the font family of the text with the font-family attribute.

p {
    
    font-family:"微软雅黑";}
div {
    
    font-family:Arial,"Microsort Yahei","微软雅黑";}

1. Various fonts must be separated by commas in English.
2. Under normal circumstances, if there are multiple words separated by spaces, add quotation marks.
3. Try to use the system's default built-in fonts to ensure that they are used correctly in any browser.
Common fonts:

body {
    
    font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

font size

Define the font size with the font-size property.

p{
    
    
	font-size:20px;
}

1.px (pixel) size is the most commonly used unit for our web pages.
2. The default text size of Google Chrome is 16px.
3. Different browsers may display different font sizes by default (try to give a clear value, do not use the default).
4. You can specify the size of the entire page text for the body.
5. The title tag needs to specify the text size separately.

font weight

Use the font-weight property to set the weight of the text font.

p {
    
    
	font-weight: bold;
}

attribute value	describe
normal	default value (not bold)
bold	define bold
100-900	400 is equivalent to normal, 700 is equivalent to bold (no unit after the number)
bolder	IES+ extra bold
lighter	IES+ thin body

font style

Set the style of the text with the font-style property.

p {
    
    
	font-style: normal;
}

attribute value	effect
normal	By default, the browser will display the standard font stylefont-style: normal
italic	The browser will display the italic font style

I seldom add italics to fonts, but change italic tags (em, i) to non-slanted.

Font Composite Properties

(save code)

body {
    
    
	font: font-style font-weight font-size/line-height font-family;
}

1. When using fontattributes, the above order must be followed, and each attribute is separated by a space. 2. The properties that do not need to be set can be omitted (take the default value), and the and properties
must be kept , otherwise the properties will not work.font-sizefont-familyfont

Summary of Font Properties

Attributes	express	important point
font-size	font size	The commonly used unit is px (pixel), so be sure to keep up with the unit.
font-family	font	In actual work, write fonts according to the team's agreement.
font-weight	font weight	Bold: 700/bold; not bold: 400/normal (the number has no unit).
font-style	font style	Inclined: italic; not inclined: normal (usually normal).
font	Literal font	There is an order, and the position cannot be changed at will; the font size and font must appear at the same time.

The content of the article is to watch other people's video study notes, only personal study records