css-1

Objectives:
1. What is css?
2. What is the relationship between css and html?
3. Three forms of css?

  • Style sheet features
  • Priority algorithm and sorting

1. What is css?

1,English name: Cascading Style Sheets
	Chinese Name: cascading style sheet, also known as cascading style sheet, referred to as style sheet
2,be used for HTML Style definition of elements in the document

[Function:] realizes the separation of content and performance, and improves the reusability and maintainability of the code

2. The relationship between css and html

  • html is used to build the structure of web pages
  • css is used to build the style of html elements
  • html is the content composition of the page, and css is the performance of the page
  • The function of css is to make html pages beautiful

Principles for using html attributes and css styles:

W3C recommends using css style instead of html attribute as much as possible

  • Separation of content and presentation
  • If it is a property specific to html, the html property is used

3. Three forms of css

  1. inline style
    – use the style attribute, which is defined in the html tag

  2. Internal style sheet
    – use the < style > tag definition in the < head > of the html page

  3. External style sheet
    – define styles in an external css file (. css file)
    – style sheet files are introduced by html pages using < link > tags

#1. Inline style, also known as inline style
Syntax:

< label style = "attribute 1: value 1; attribute 2: value 2;..." > content, picture < / label >

For example:

<p style="color:red;font-size:20px;">Paragraph 1</p>

#2. Internal style
Syntax:

<style>
	selector{
			Attribute: value;
			Attribute: value;
			...
	}
</style>

Selector:

Tag selector: tagName {CSS code}
class selector: className{css code}
id selector: #idName{css code}
Group selector: (comma) means and
The descendant selector (space) indicates inclusion
Descendant selector: > found a son element
Wildcards:*

For example:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			color: red;
			font-size: 20px;
		}
		.kuai{
			color: green;
		}
		#biaoti{
			color: yellow;
		}
		/*> Looking for the son of grandfather, only looking for the son*/
		.grandfather>span{
			color: blue;
		}
		/*Space means include. You are looking for all the a tags contained in grandfather*/
		.grandfather a{
			color: red;
		}
		/*,Means and Both kuai and #biaoti execute*/
		.kuai,#biaoti{
			font-size: 50px;
		}
	</style>
</head>
<body>
	
	<p>paragraph</p>
	<div class="kuai">Block label div</div>
	<h1 id="biaoti">title</h1>
	<div class="grandfather">
		<p class="son">
			<span class="grandson">grandson span</span>

			<a href="" class="grandson">grandson a</a>
		</p>
		<span class="son">Son span</span>
		<a href="" class="son">Son a</a>
	</div>
</body>
</html>

[internal style, which can be reused on the current page]
#3. External style
1. Create a new file named * css
2. In the < head > tag of the page that needs to use the style sheet, use the < link > tag to import the css file
For example:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>
<body>
	<p>paragraph</p>
	<h1>Title 1</h1>
</body>
</html>

[Note:]

In the actual development process, external styles must be used

  • It can realize the separation of content and performance
  • Can be reused by multiple pages

css style sheet features:

  • Inheritance
    – most css style rules can be inherited
  • Lamination
    – multiple styles can be defined without sequence
    – when there is no conflict, the styles in multiple style sheets can be stacked into one
  • priority
    – when style definitions conflict, styles are applied according to the priority of different style rules

css priority algorithm and sorting:
Priority algorithm (/ weight):

Label selector: 1
class selector: 10
id selector: 100
Inline style: 1000
! important: with the highest priority

Sort:

! Important > inline style > ID > class > tag

With the same priority, the "proximity principle" shall be adopted:

Proximity principle: if the same style is defined repeatedly, the last one shall prevail!

For example:

ok, that's all for today. Thank you for reading and watching. I hope to communicate and make progress with you.

Tags: css

Posted by mr_armageddon on Sat, 07 May 2022 20:24:35 +0300