Asdsscss is a set of extended style standards formulated by W3C association to make up for the deficiency of HTML in display attribute setting. Its full name is Cascading Style Sheet. CSS standard redefines the original text display style in HTML and adds some new concepts, such as class and layer, which can overlap and locate text. Before CSS was introduced into page design, it was very troublesome for the traditional HTML language to beautify the page. For example, if you want to design the text style in the page, if you use the traditional HTML statement to design the page, you have to define the style on each text that needs to be designed. The emergence of CSS has changed this traditional pattern.
Asdsadsadasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdadasdassadasdas -- from getting started to mastering Java Web
CSS technology introduction
Ssdssscss 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.
CSS rules
ssdss includes three parts in CSS style sheet: selector, attribute and attribute value. The syntax format is as follows: {attribute: attribute value;}
ss2dss ① selector: also known as selector, it is a very important concept in CSS. All tags in HTML language are controlled through different CSS selectors.
ssd3ss ② attribute: it mainly includes font attribute, text attribute, background attribute, layout attribute, boundary attribute, list item attribute, table attribute, etc. Some of these inflexibility are only supported by some browsers, which makes the use of CSS properties more complex.
s4sdss ③ attribute value: it is a valid value of an attribute. Attributes and attribute values are separated by a ":". When there are multiple attributes, use ";" to separate them.
s4sdsseg: p{ color:red; font-size:30px;}
s4sdss note: generally, each line only describes one attribute. CSS comments: / * comment content*/
Combination of CSS and HTML
ssdss includes several ways of CSS styles in the page, including inline style, embedded style and linked style.
ssddsss inline style: a more direct style, which is directly defined in HTML tags and implemented through the style attribute.
ssddsss inline: use tags to include CSS styles in the page.
ssddsss linked: the most commonly used way to reference style sheets. Defining CSS styles in a separate file and then referencing them through tags in HTML pages is the most effective way to use CSS styles.
First:
ssdss sets "key: value;" on the style attribute of the label to modify the label style.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--Requirement 1: define two div,span Label, modify each 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> </html>
Disadvantages of ssdss: ① if there are too many labels. There are many styles. The amount of code is very large. ② , poor readability. ③ The Css code has no reusability.
Second:
ssdss uses the style tag in the head tag to define various css styles you need. The format is as follows: XXX {key: value;}
<!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 labels respectively, and 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>
Disadvantages of ssdss: ① code can only be reused in the same page, and css code cannot be reused in multiple pages. ② 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.
Third:
ssdss writes the CSS style into a separate CSS file, which can be reused by introducing the link tag.
ssdss uses the < link rel = "stylesheet" type = "text/css" href = ". / styles. CSS" / > tag of html to import CSS style files.
Content of ssdssscss file:
div{
border: 1px solid yellow;
}
span{
border: 1px solid red;
}
ssdsshtml 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>
CSS selector
Tag name selector
The format of ssdss tag name selector is: tag name {attribute: value;}. The tag name selector can determine which tags use this style passively.
s4ssseg: on all div tags, change the font color to blue and the font size to 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 a 5-pixel blue dotted line.
<!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 The font color on the label is changed to blue, and the font size is 30 pixels. The border is 1 pixel yellow solid line.
And modify all span The font color of the label is yellow and the font size is 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>
id selector
The format of ssdssid selector is: #id attribute value {attribute value;}. ID selector allows us to selectively use this style through the ID attribute.
s4ssseg: define two div Tags:
s432sss the first div tag defines the id as id001, then defines the css style according to the id attribute, and modifies the font color to blue and the font size to 30 pixels. The border is 1 pixel yellow solid line.
s432sss 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.
<!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>
<!--
Requirement 1: define two div label,
first div Label definition id by id001 ，Then according to id Attribute definition css Change the font color to blue,
Font size 30 pixels. The border is 1 pixel yellow solid line.
the second div Label definition id by id002 ，Then according to id Attribute definition css The font color modified by the style is red, and the font size is 20 pixels.
The border is a 5-pixel blue dotted line.
-->
<div id="id002">div Label 1</div>
<div id="id001">div Label 2</div>
</body>
</html>
Class selector (class selector)
The format of ssdssclass type selector is:. Class attribute value {attribute: value;}. The class type selector can effectively and selectively use this style through the class attribute.
s4ssseg:
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 a 1-pixel solid red line.
<!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>
<!--
Requirement 1: modify class The attribute value is class01 of span or div Label, the font color is blue, and the font size is 30 pixels. The border is 1 pixel yellow solid line.
Requirement 2: modify class The attribute value is class02 of div Label, the font color is gray, and the font size is 26 pixels. The border is a 1-pixel solid red line.
-->
<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>
Combination selector
The format of ssdss combined selector is: selector 1, selector 2, selector n {attribute: value;}. Combining selectors allows multiple selectors to share the same CSS style code.
s4ssseg: 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.
<!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>
<!--
Requirement 1: modify class="class01" of div Labels and id="id01" be-all span label,
The font color is blue and the font size is 20 pixels. The border is 1 pixel yellow solid line.
-->
<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>
Common styles:
ssdss font color: Color: red; Color can also write rgb value and hexadecimal value: for example, rgb(255,0,0), #00F6DE. If you write hexadecimal value, you must add #.
ssdss width:19px; Width can write pixel value: 19px; You can also write the percentage value: 20%;
ssdss height:20px; Height writable pixel value: 19px; You can also write the percentage value: 20%;
ssdss background color: #0f2d4c
ssdss font style: Color: #FF0000; Font color: red font size: 20px; font size
ssdss Red 1 pixel solid line border: 1px solid red;
ssdssDIV center margin left: Auto; margin-right: auto;
ssdss hyperlink de underline: text decoration: none;
ssdss table thin line:
S32sdssstable {ssdssborder: 1px solid black; / set border / ssdssborder collapse: collapse; / merge borders /}
ssds32std,th {ssdssborder: 1px solid black; / set border /}
ssdss list de embellishment: UL {list style: none;}
<!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>
