Java web learning diary: II. CSS Technology
1. CSS technology introduction
CSS is a cascading style form. Is a markup language used to (enhance) control web page style and allow the separation of style information from web page content.
2. CSS syntax rules
p{
color:red;
font-size:30px;
/*Note Content */ CSS notes:
}
- Selector: the browser determines the HTML elements (tags) affected by CSS styles according to the "selector".
- Property is the name of the style you want to change, and each property has a value. The attribute and value are separated by colons and surrounded by curly braces, thus forming a complete style declaration, for example: p{color: blue}
- Multiple declarations: if you want to define more than one declaration, you need to separate each declaration with a semicolon. Although the last declaration can be made without a semicolon (try to add a semicolon at the end of each declaration)
Note: generally, each line only describes one attribute
3. Combination of CSS and HTML
3.1 type I
Set "key: value;" on the style attribute of the tag, Modify the label style.
<body> <!--Requirement 1: define two div,span label, Modify each separately div The label style is: border 1 pixel, solid line, red.--> <div style="border: 1px solid red;">div Label 1</div> <div style="border: 1px solid red;">div Label 2</div> <span style="border: 1px solid red;">span Label 1</span> <span style="border: 1px solid red;">span Label 2</span> </body>
Question: what are the disadvantages of this approach?
1. If there are too many labels. There are many styles. The amount of code is very large.
2. Very poor readability.
3.Css code has no reusability.
3.2 second
In the head tag, use the style tag to define various css styles you need.
The format is as follows:
xxx {
Key : value value;
}
Requirement 1: define two div and span labels respectively, and modify the style of each div label as: 1 pixel border, solid line and red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style Labels are specifically used to define css Style code-->
<style type="text/css">
/* Requirement 1: define two div and span tags respectively,
Modify the style of each div label as: 1 pixel border, solid line and red.*/
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div Label 1</div>
<div>div Label 2</div>
<span>span Label 1</span>
<span>span Label 2</span>
</body>
</html>
Problem: the disadvantages of this approach.
1. Code can only be reused in the same page, and css code cannot be reused in multiple pages.
2. It is inconvenient to maintain. There will be thousands of pages in the actual project, which need to be modified in each page. The workload is too heavy.
3.3 third
The css style is written into a separate css file, which can be reused by introducing the link tag. Use the < link rel = "stylesheet" type = "text / css" href = ". / styles. css" / > tag of html to import css style files.
1. css file content:
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
2. html file code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--link Labels are designed to introduce css Style code--> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <div>div Label 1</div> <div>div Label 2</div> <span>span Label 1</span> <span>span Label 2</span> </body> </html>
4. CSS selector
4.1 tag name selector
The format of the tag name selector is:
Tag name{
Attributes: Values;
}
The tag name selector can determine which tags use this style passively.
<div>div Label 1</div> <div>div Label 2</div> <span>span Label 1</span> <span>span Label 2</span
Requirement 1: modify the font color to blue on all div labels, and the font size is 30 pixels. The border is 1 pixel yellow solid line. And modify the font color of all span labels to yellow and the font size to 20 pixels. The border is 5 pixels blue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS selector</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!-- Requirement 1: in all div Change the font color on the label to blue,
Font size 30 pixels. The border is 1 pixel yellow solid line.
And modify all span The font color of the label is yellow,
Font size 20 pixels. The border is a 5-pixel blue dotted line.
-->
<div>div Label 1</div>
<div>div Label 2</div>
<span>span Label 1</span>
<span>span Label 2</span>
</body>
</html>
4.2 id selector
The format of the id selector is:
#id attribute value{
Attributes: Values;
}
id selector allows us to selectively use this style through the id attribute.
Requirement 1: define two div tags respectively. The first div tag defines the id as id001, and then defines the css style according to the id attribute. Modify the font color to blue and the font size to 30 pixels. The border is 1 pixel yellow solid line. The second div tag defines the id as id002, and then defines the css style according to the id attribute. The modified font color is red and the font size is 20 pixels. The border is a 5-pixel blue dotted line.
<div id="id001">div Label 1</div> <div id="id002">div Label 2</div>
Sample code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID selector</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>
</head>
<body>
<div id="id002">div Label 1</div>
<div id="id001">div Label 2</div>
</body>
</html>
4.3 class selector
The format of the class type selector is:
.class Attribute value{
Attributes: Values;
}
The class type selector can effectively and selectively use this style through the class attribute.
Requirement 1: modify the span or div label whose class attribute value is class01, the font color is blue, and the font size is 30 pixels. The border is 1 pixel yellow solid line.
Requirement 2: modify the div tag whose class attribute value is class02, the font color is gray, and the font size is 26 pixels. The border is 1 pixel solid red line.
<div class="class01">div label class01</div> <div class="class02">div label</div> <span class="class01">span label class01</span> <span>span Label 2</span>
Sample code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class Type Selectors </title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="class02">div label class01</div>
<div class="class02">div label</div>
<span class="class02">span label class01</span>
<span>span Label 2</span>
</body>
</html>
4.4 combined selector
The format of the combination selector is:
Selector 1, selector 2, selector n{
Attributes: Values;
}
Combining selectors allows multiple selectors to share the same css style code.
<div class="class01">div label class01</div> <br /> <span id="id01">span label</span> <br /> <div>div label</div> <br /> <div>div label id01</div> <br />
Requirement: modify div tags of class = "class01" and all span tags of id = "id01". The font color is blue and the font size is 20 pixels. The border is 1 pixel yellow solid line
Sample code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class Type Selectors </title>
<style type="text/css">
.class01 , #id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div id="id01">div label class01</div> <br />
<span >span label</span> <br />
<div>div label</div> <br />
<div>div label id01</div> <br />
</body>
</html>
5. Common styles
5.1 font color
color: red；
Color names can be written, such as black, blue, red, green, etc
Color can also write rgb value and hexadecimal value: for example, rgb(255,0,0), #00F6DE. If you write hexadecimal value, you must add#
5.2 width
width:19px
Width can write pixel value: 19px;
You can also write the percentage value: 20%;
5.3 height
height:20px;
Height writable pixel value: 19px;
You can also write the percentage value: 20%;
5.4 background color
background-color:#0F2D4C
5.5 font style
color: #FF0000； Font color red
font-size: 20px； font size
5.6. Red 1-pixel solid line border
border: 1px solid red
5.7. DIV centering
margin-left: auto;
margin-right: auto;
5.8. Text centered
text-align: center;
5.9. De underline hyperlinks
text-decoration: none
5.10 table thin line
table {
border: 1px solid black; /*Set border*/
border-collapse: collapse; /*Merge borders*/
}
td,th {
border: 1px solid black; /*Set border*/
}
5.11 list removal modification
ul {
list-style: none;
}
5.12 example code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-css Common styles.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px red solid;
border-collapse: collapse;
}
td{
border: 1px red solid;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="http://www.baidu. Com "> Baidu</a>
<div>I am div label</div>
</body>
</html>
This note is for learning reference only.