What is CSS
1, concept
Note: When we deal with text styles, we follow the principle of proximity; for example, when we set styles in style style and in <h1>, the computer will give preference to those close to the text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<style>
h1{
color: black;
}
</style>
</head>
<body>
<h1 style="color: dodgerblue">this is text</h1>
</body>
</html>
Note that this is the proximity principle.
2. Three ways of introducing css
Intra-line introduction (style="xxxx" is introduced in the label) Internal introduction (style tag in head tag introduces Vry) External introduction (separate the css style into a dedicated file)
II. Element selector
The most common CSS selector is the element selector. In other words, the elements of a document are the most basic selectors.
If HTML is styled, the selector will usually be an HTML element, such as p, h1, em, a, or even HTML itself.
"Type selector matches the name of the document language element type. The type selector matches each instance of the element type in the document tree."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_CSS Style Use Cases</title>
<!--css The First Method of Style Separation: Written on the page head Inside the label-->
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: bisque;
text-align: center;
}
span {
font-size: 20px;
color: blueviolet;
}
h1{
color: dodgerblue;
}
p{
font-size: x-large;
color: greenyellow;
}
</style>
</head>
<body>
<h1>this is text</h1>
<div>
hello python
</div>
<div>
hello python
</div>
<div>
hello python
</div>
<span>
hello java
</span>
<p>hello baozi</p>
<span>
hello C++
</span>
</body>
</html>
Class selector
1, concept
Class selectors allow you to specify styles in a way that is independent of document elements. The selector can be used alone or in combination with other elements.
Tip: These selectors can only be used when documents are properly marked, so using these two selectors usually requires some ideas and plans. The most common way to apply styles without considering specific design elements is to use class selectors.
When we introduce it, we start with "..." to introduce style.
2, example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<style>
h1{
color: black;
}
.aaa{
background-color: greenyellow;
}
.bbb{
background-color: dodgerblue;
font-size: x-large;
}
.ccc{
width: 40%;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<h1 style="color: dodgerblue">this is text</h1>
<h1 class="aaa">this is text 2</h1>
<p class="bbb">
hello python
</p>
<a class="ccc">
hello world
</a>
</body>
</html>
IV. ID selector
1, conceptThe id selector can specify a specific style for HTML elements marked with a specific id.
The id selector is defined as "#".
2, example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01</title>
<style>
#h1{
color: black;
}
#aaa{
background-color: greenyellow;
}
#bbb{
color: dodgerblue;
font-size: x-large;
}
#ccc{
width: 40%;
height: 50px;
color: aqua;
font-size: x-large;
}
</style>
</head>
<body>
<h1 style="color: dodgerblue">this is text</h1>
<h1 id="h1">this is text 2</h1>
<p id="aaa">
hello python
</p>
<a id="bbb">
I thought I would forget you, like a star on a summer night. I thought I would hate you and swear not to mention you anymore, but it's all self-deception.
Once because of you and fell in love with this network, the oath of heaven and earth invite each other. In the end, you refuse to come into my life. Every time, it's amazing and the world evaporates.
After three years of this cycle, I finally made a solemn pledge in front of the Buddha that I will never see you again in this life.
</a>
<br>
<br>
<br>
<span id="ccc">
The purple mud, suddenly look back. How many spring flowers, autumn months, how many lost water, how many vows, such as the scenery flowers along the way blossom and fade.
The sentiment of the world touches how many silent feelings, the wind of shallow sentiment scatters how many gather and disperse. Flowers are affectionate, but flowers are unintentional.
Those who come meet by chance and those who go by forget each other. I saw you in the crowd. When fate dies, you disappear in the crowd.
</span>
</body>
</html>
5. Hierarchical selector
The IDE will look down layer by layer until it finds the bottom label; for example, we will look for the < img > label under < Table > and change its format.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_CSS Hierarchical selectors for other selectors</title>
<style>
table img{
width: 202px;
height: 160px;
}
</style>
</head>
<body>
<div>
<p>hello</p>
<img class="out_img" id="out_img1" src="img/01_logo.png">
</div>
<!--A table with two rows and two columns-->
<table width="80%" cellpadding="8px" border="1px">
<caption>Table information</caption>
<tr>
<td>host name</td>
<td>IP address</td>
</tr>
<tr>
<td><p>www.baidu.com</p></td>
<td><img src="img/01_logo.png"></td>
</tr>
</table>
</body>
</html>
6. Attribute selector
Style HTML elements with specified attributes.
You can style HTML elements with specified attributes, not just class and id attributes.
Note: Only when DOCTYPE is specified, IE7 and IE8 support attribute selectors. In IE6 and lower versions, attribute selection is not supported.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_CSS attribute selectors</title>
<style>
/*<!--Property selector - >*/
input[type="text"]{
width: 300px;
background-color: #E0E0E0;
}
input[name="passwd"]{
width: 350px;
background-color: aliceblue;
}
input[type="submit"]{
background-color: darkseagreen;
}
div[class="hello"]{
/*border: 1px solid red;*/
margin: auto;
aligin: center;
}
</style>
</head>
<body>
<div style="width: 80%" class="hello" id="he">
<h3>User login</h3>
<form action="#" method="get">
//User name: <input type="text" name="username"><br/><br/>
//Password: <input type="password" name="passwd"><br/><br/>
<input type="submit" value="Land">
</form>
</div>
</body>
</html>