css introduction and selector notes

Posted by Chunk1978 on Sat, 25 Dec 2021 18:48:33 +0100

css: page beautification and layout control
I. concept: Cascading Style Sheets cascade style sheets. Multiple styles can act on an html element and take effect at the same time

II. Benefits
       1. Compared with html, tag attributes are more comprehensive and powerful
       2. Separating content presentation from style control
* reduce coupling
* make division of labor and cooperation easier
* improve development efficiency
III. use of css
       1. inline style
* use the style attribute within the tag to specify the css code
       2. Internal style
* define the style tag in the head tag. The content of the style tag body is the css code
       3. External style
* define css resource files
* define the link tag in the head tag and introduce the css resource file
Note: there are three methods. The scope is getting larger and larger. Inline is commonly used, and internal and external are commonly used

<!DOCTYPE html>
<html lang=ch>
<head>
<style type="text/css">
/* 2.Internal style: define the style tag in the head tag. The content of the style tag body is css code */
#nb {
	color: green;
}
</style>
<!-- 3.External style *definition css resource file  *stay head Definition in label link Labels, introducing css resource file -->
<link rel="stylesheet" href="css/style.css">

<title>css combination html.html</title>
</head>
<body>
	<div style="color: red">1.Inline styles are used within labels style Attribute assignment css code</div>

	<div id="nb">2.Internal style:stay head Definition in label style label, style The content of the label body is css code</div>
	
	<div id="wb">3.External style:stay head Definition in label link Labels, introducing css resource file</div>
</body>
</html>

style.css

#wb {
	color: blue
}

Basic css syntax
       1. format
Selector {
Attribute name 1: attribute value 1;
Attribute name 2: attribute value 2;
Attribute name 3: attribute value 3;
               . . .
           ｝
       2. Selectors: filter elements with similar characteristics
           2.1. Base selector
               2.1.1.id selector
* define the style of an element
* syntax: #id value {...}
               2.1. 2. Element selector
* define the style of the same element
* syntax: label name {...}
               2.1. 3. Class selector
* define styles for multiple elements
* syntax: class value {...}

Note: id selector weight > class selector weight > element selector weight

<!DOCTYPE html>
<html lang=ch>
<head>
<style type="text/css">
/* 2.Internal style: define the style tag in the head tag, and the content of the style tag body is the css code */
#div1 {
	color: red;
}

div {
	color: green;
}

.cla{
	color: blue;
}
</style>
<!-- 3.External style *definition css resource file  *stay head Definition in label link Labels, introducing css resource file -->
<link rel="stylesheet" href="css/style.css">

<title>css combination html.html</title>
</head>
<body>
	<!-- Elemental ID Only suggestion  -->
	<div id="div1" class="cla">id Selector:#id value {...} Define the style of an element < / div >
	
	<div id="div2" >Element selectors: label names{...}  Define styles for the same element</div>
	<div id="div3" >Element selectors: label names{...} Define styles for the same element</div>
	
	<div id="div4" class="cla">Class selector:.class value{...} Define styles for multiple elements</div>
	<div id="div5" class="cla">Class selector:.class value{...} Define styles for multiple elements</div>
</body>
</html>

           2.2. Extension selector
               2.2. 1. Union selector
* select multiple elements
* selector 1, selector 2 {...}
               2.2. 2. Sub selector
* select a child element of an element
* selector 1 selector 2 {...}
               2.2. 3. Parent selector
* the parent element for selecting an element is the selector 2 element of the first selector 1
* selector 1 > selector 2 {...}
               2.2. 4 attribute selector: element with element name [attribute name = attribute value]
Element name [attribute name = attribute value] {...}
               2.2. 5. Pseudo class selector
Select the state that some elements have
Element: status {...}
Status: link initialization status visited status active accessing status hover mouse hover status

<!DOCTYPE html>
<html lang=ch>
<head>
<title>css Extension selector</title>

<style type="text/css">

#div1, #div2, #div3 {/ * union selector selects the child elements of an element*/
	background-color: #a7d4a7; /* Background color*/
}

#div4 #div4_1 {/ * sub selector selects the sub element of an element*/
	color: red;
}

div > p {/* The parent selector selects an element whose parent element is the p element of the div */
	color: red;
}

/* attribute selectors  */
input[type="text"] {
	border-color: red;
}
/*Pseudo class selector  */
a:hover{
	font-size: 50px;
}
</style>
</head>
<body>
	<div id="div1">Selector 1, selector 2｛...｝ The union selector selects multiple elements</div>
	<div id="div2">Selector 1, selector 2｛...｝ The union selector selects multiple elements</div>
	<div id="div3">Selector 1, selector 2｛...｝ The union selector selects multiple elements</div>
	
	<div id="div4">
		Selector 1 selector 2｛...｝The child selector selects the child elements of an element
		<div id="div4_1">
			Selector 1 selector 2｛...｝The child selector selects the child elements of an element
		</div>
	</div>
	
	<div>
		father DIV
		<p>
			Selector 1>Selector 2{...} Select the parent element of an element div of p element
		</p>
	</div>
	
	<input type="text" placeholder="attribute selectors "><br/>
	
	<a href="#"> pseudo class selector</a>
</body>
</html>

Topics: html5 css

Programmer Think

css introduction and selector notes

Hot Topics