3 lists
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
Remove bullet
* */
/*ul{
list-style: none;
}*/
</style>
</head>
<body>
<!--
The list is the same as the shopping list when you go to the supermarket,
You can also create lists in HTML. There are three kinds of lists in the web page:
1. Unordered list
2. Ordered list
3. Definition list
-->
<!--
Unordered list
-Use ul tags to create an unordered list
-Use li to create a list item by item in ul,
A li is a list item
The type attribute allows you to modify the bullets of an unordered list
Optional values:
disc, default, solid dot
Square, solid square
Circle, hollow circle
Note: we don't use the default bullets!!
If you need to set a bullet, you can set it by setting a background picture for li
ul and li are block elements
-->
<!--
The definition list is used to define some words or contents
Using dl to create a list of definitions
There are two child tags in dl
dt: defined content
dd: description of definition content
Similarly, dl and ul and ol can be nested with each other
-->
<dl>
< DT > Wusong < / dt >
< DD > Jingyanggang tiger fighting hero, combat effectiveness 99 < / DD >
After < DD > he killed XiMenqing and went to Liangshan
< DT > Wuhan University
< DD > famous catering entrepreneur, combat effectiveness 0 < / DD >
</dl>
<ul>
<li>Ximen senior official</li>
<li>Chai daguanren</li>
<li>Xu daguanren</li>
<li>Tang Monk senior official</li>
</ul>
<!--
An ordered list is similar to an unordered list, except that it uses ol instead of ul
Ordered lists use ordinal numbers as bullets
Type attribute, you can specify the type of sequence number
Optional values: 1, default, use Arabic numerals
a/A uses lowercase or capital letters as the serial number
i/I uses Roman numerals in lowercase or uppercase as the serial number
ol is also a block element
-->
<ol type="I">
<li>Structure</li>
<li>Performance</li>
<li>Behavior</li>
</ol>
<!--
Lists can be nested with each other. You can put a sequential list in an unordered list
You can also place an unordered list in a sequential list
-->
<p>Recipes</p>
<ul>
<li>
Yu-Shiang Shredded Pork
<ol>
<li> fish </li>
<li> fragrance </li>
<li>Shredded meat</li>
</ol>
</li>
<li>
Kung Pao Chicken
<ul>
<li>Gong Bao</li>
<li>Diced chicken</li>
</ul>
</li>
<li>Shredded pork with green pepper</li>
</ul>
</body>
</html>
Font length unit
<style type="text/css">
/*
* Length unit
* Pixel px
* - Pixels are the most commonly used unit in web pages,
* A pixel is a small dot on our screen,
* Our screen is actually made up of these pixels
* But these pixels are not directly visible.
* - Different displays have different sizes of one pixel,
* The better the display effect is, the smaller the pixel is, otherwise, the larger the pixel is.
*
* Percent%
* - You can also set the unit as a percentage,
* The browser will then calculate the value based on the style of its parent element
* - The advantage of using percentage is that when the attribute value of the parent element changes,
* Child elements also change proportionally
* - When we create an adaptive page, we often use percentages as units
*
* em
* - em Similar to percentages, it is calculated relative to the font size of the current element
* - 1em = 1font-size
* - When using em, when the font size changes, em will also change
* - em is often used when setting font related styles
*
*/
.box{
width: 300px;
height: 300px;
background-color: red;
}
.box1{
font-size: 20px;
width: 2em;
height: 50%;
background-color: yellow;
}
</style>
Font style and classification
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*Set the font color. Use color to set the text color*/
color: red;
/*
*Set the text size. The default text size in the browser is 16px
Font size is not the size of the text itself,
In a page, each text is in an invisible box
The font size we set is actually the height of the setting cell, not the font size
In general, the text is smaller than this lattice, and sometimes larger than the lattice,
Depending on the font, the display effect cannot be
* */
font-size: 30px;
/*
*Font family allows you to specify the font of text
*When using a font, use the font if supported by the browser,
*If the font is not supported, the default font is used
*This style can specify multiple fonts at the same time, which can be used separately
*When multiple fonts are used, the browser will give priority to the front font,
*If the front is not trying the next one
*/
/*Font family: Arial, Microsoft YaHei*/
/*
*The font used by the browser is the font in the computer by default,
*If there is one in the computer, use it. If not, do not use it
*
*In development, if the font is too strange and uses too little, try not to use it,
*It's possible that without a user's computer, the desired effect cannot be achieved.
*/
/*Font family: Chinese color cloud, arial, Microsoft YaHei*/
font-family: "curlz mt";
<!--
In web pages, fonts are divided into five categories:
Serif (serif)
Sans serif (sans serif)
Monospace (monospace)
Cursive (cursive)
fantasy (unreal font)
You can set the font to these large categories. When you set the font to large categories,
The browser automatically selects the specified font and applies the style
Generally, the large classification of font will be specified as the last font in font family
-->
}
</style>
</head>
<body>
<p class="p1">
I'm a p tag, ABCDEFGabcdefg
</p>
</body>
</html>
Other styles of fonts
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family: "Microsoft YaHei";
/*
* font-style Can be used to set the text in italics
* - Optional values:
* normal，Default value, normal text display
* italic Text appears in italics
* oblique The text will be displayed as a slant
* - Most browsers don't distinguish between italics and slants,
* That is to say, the effect of setting up italic s and oblique s is often the same
* - Generally, we only use italic s
*/
font-style: italic;
/*
* font-weight Can be used to set the BOLD effect of text:
* Optional values:
* normal，Default value, normal text display
* bold，Bold text
*
* The style can also specify 9 values between 100-900,
* But because the user's computer often does not have so many levels of fonts, so achieve the effect we want
* That is to say, 200 may be thicker than 100, 300 may be thicker than 200, but it may be the same
*/
font-weight: bold;
/*
* font-variant Can be used to set small capital letters
* Optional values:
* normal，Default value, normal text display
* small-caps Text in small caps
*
* Small capital letters:
* Show all letters in uppercase, but uppercase for lowercase,
* It's smaller than the size of a capital letter.
*/
font-variant: small-caps ;
}
.p2{
/*Set a text size*/
font-size: 50px;
/*Set a font*/
font-family: Hua Wencaiyun;
/*Set text italics*/
font-style: italic;
/*Set bold text*/
font-weight: bold;
/*Set a small capital letter*/
font-variant: small-caps;
}
.p3{
/*
* In CSS, we also provide a style called font,
* Use this style to set all styles related to fonts at the same time,
* You can write the font style values uniformly in the font style, and use spaces to separate different values
*
* When font is used to set font style, italics are bold, small and large letters, and there is no order requirement. You can even write without writing,
* If not, the default value is used, but the size and font of the text must be written, and the font must be the last style
* Size must be the penultimate style
*
* In fact, using the shorthand attribute will have a better performance
*/
font: small-caps bold italic 60px "Microsoft YaHei";
}
</style>
</head>
<body>
<p class="p3">I'm a text, ABCDEFGabcdefg</p>
<p class="p1">I'm a text, ABCDEFGabcdefg</p>
<p class="p2">I'm a text, ABCDEFGabcdefg</p>
</body>
</html>
Row height and row spacing
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* CSS does not provide us with a way to directly set the row spacing,
* We can only set the row spacing indirectly by setting the row height. The higher the row height, the greater the row spacing
* Use line height to set the row height
* Line height is similar to the single line book in our school. The single line book is line by line, and the distance between lines is line height,
* The text in the web page is actually written in an invisible line, and the text will be displayed vertically in the middle of the row by default
*
* Line spacing = line height - font size
*/
.p1{
font-size: 20px;
/*
* Line height can be set indirectly by setting line height,
* Acceptable values:
* 1.Just one size
* 2.If a percentage can be specified, the row height will be calculated relative to the font
* 3.If you can directly transfer a value, the line height will set the corresponding multiple of font size
*/
/*line-height: 200%;*/
line-height: 2;
}
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*
* For single line text, you can set the line height to be the same as the height of the parent element,
* This can be a single line of text centered vertically in the parent element
*/
line-height: 200px;
}
.p2{
/*
* You can also specify row height in font
* After the font size, you can add / line height to specify the line height, which is optional. If not specified, the default value will be used
*/
font: 30px "Microsoft YaHei";
line-height: 50px;
}
</style>
</head>
<body>
<p class="p2">
//In my backyard, you can see two trees outside the wall, one is jujube, and the other is jujube. The night sky above is strange and high. I have never seen such a strange and high sky in my life. He seemed to leave the world, so that people could no longer see him. But now it is very blue, shining with dozens of stars eyes, cold eyes. There was a smile on his quarrel, as if he thought he had a deep meaning and sprinkled the frost on the wild flowers in my garden. I don't know the names of those plants, what people call them. I remember that there was a very small pink flower, which is still in bloom, but it is even smaller. In the cold night air, she dreamed of the arrival of spring and autumn. The thin poet wiped her tears on the last petal and told her that although autumn came, winter came, and then spring, butterflies flew around, and bees sang the words of spring. She then smiled, though the color was red and miserable, still shivering. Jujube trees, they've lost all their leaves. Previously, there was one or two
</p>
<div class="box">
<a href="#"> I'm a hyperlink</a>
</div>
<p class="p1">
//In my backyard, you can see two trees outside the wall, one is jujube, and the other is jujube. The night sky above is strange and high. I have never seen such a strange and high sky in my life. He seemed to leave the world, so that people could no longer see him. But now it is very blue, shining with dozens of stars eyes, cold eyes. There was a smile on his quarrel, as if he thought he had a deep meaning and sprinkled the frost on the wild flowers in my garden. I don't know the names of those plants, what people call them. I remember that there was a very small pink flower, which is still in bloom, but it is even smaller. In the cold night air, she dreamed of the arrival of spring, the arrival of autumn, the thin poet wiped tears on her last petal, told her that although autumn came, winter came, and then spring, butterflies flying around, bees singing spring
</p>
</body>
</html>Text style
English case of text, text modification, alignment, first line indentation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1 {
/*
* text-transform Can be used to set the case of text
* Optional values:
* none Default value, display as you like without any processing
* capitalize Capitalize the first letter of a word. Use spaces to identify the word
* uppercase All letters are capitalized
* lowercase All letters are lowercase
*/
text-transform: lowercase;
}
.p2 {
/*
* text-decoration Can be used to set the decoration of text
* Optional values:
* none: Default value, no decoration, normal display
* underline Underline text
* overline Underline text
* line-through Add strikeout to text
*/
text-decoration: line-through;
}
a {
/*Hyperlink will be underlined by default, that is, the default value of text decoration of hyperlink is underline
If you need to remove the underline of the hyperlink, you need to set the style to none
* */
text-decoration: none;
}
.p3 {
/**
* letter-spacing Character spacing can be specified
*/
/*letter-spacing: 10px;*/
/*
* word-spacing You can set the distance between words
* In fact, it is to set the size of the space between words
*/
word-spacing: 120px;
}
.p4{
/*
* text-align Used to set alignment of text
* Optional values:
* left Default, text left justified
* right ， Align text right
* center ， Align text Center
* justify ， Alignment at both ends
* - By adjusting the size of the space between the text, we can achieve a goal of alignment
*/
text-align: justify ;
}
.p5{
font-size: 20px;
/*
* text-indent Used to set the first line indent
* When a positive value is assigned to it, the specified pixel is automatically indented to the right
* If you specify a negative value for it, the specified pixel is moved to the left,
* In this way, you can hide some text that you don't want to display
* This value generally uses em as the unit, because 1em = 1font size
*/
text-indent: -99999px;
}
</style>
</head>
<body>
<p class="p5">
//In my backyard, you can see two trees outside the wall, one is jujube, and the other is jujube. The night sky above is strange and high. I have never seen such a strange and high sky in my life. He seemed to leave the world, so that people could no longer see him. But now it is very blue, shining with dozens of stars eyes, cold eyes. A smile appeared on his lips, as if he thought he had deep meaning, and he sprinkled frost on me
</p>
<h1 class="p4">I am a h1</h1>
<p class="p4">
//In my backyard, you can see two trees outside the wall, one is jujube, and the other is jujube. The night sky above is strange and high. I have never seen such a strange and high sky in my life. He seemed to leave the world, so that people could no longer see him. But now it is very blue, shining with dozens of stars eyes, cold eyes. A smile appeared on his lips, as if he thought he had deep meaning, and he sprinkled frost on me
</p>
<p class="p4">
"We should start back," Gared urged as the woods began to grow dark around them. "The wildlings are dead." "Do the dead frighten you?" Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. "Dead is dead," he said. "We have no business
</p>
<p class="p3">
//In my backyard, you can see two trees outside the wall, one is jujube, and the other is jujube. The night sky above is strange and high. I have never seen such a strange and high sky in my life. He seemed to leave the world, so that people could no longer see him. But now it is very blue, shining with dozens of stars eyes, cold eyes. There was a smile on his quarrel, as if he thought he had a deep meaning and sprinkled the frost on the wild flowers in my garden. I don't know the names of those plants, what people call them. I remember a very small pink
</p>
<p class="p3">
"We should start back," Gared urged as the woods began to grow dark around them. "The wildlings are dead." "Do the dead frighten you?" Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. "Dead is dead," he said. "We have no business
</p>
<a href="#"> I'm a hyperlink</a>
<p class="p2">
"We should start back," Gared urged as the woods began to grow dark around them. "The wildlings are dead." "Do the dead frighten you?" Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. "Dead is dead," he said. "We have no business with the dead." "Are they dead?" Royce asked softly. "What proof have we?" "Will saw
</p>
<p class="p1">
"We should start back," Gared urged as the woods began to grow dark around them. "The wildlings are dead." "Do the dead frighten you?" Ser Waymar Royce asked with just the hint of a smile. Gared did not rise to the bait. He was an old man, past fifty, and he had seen the lordlings come and go. "Dead is dead," he said. "We have no business with the dead." "Are they dead?" Royce asked softly. "What proof have we?" "Will saw them," Gared said. "If he says they are dead, that's proof enough for me." Will had
</p>
</body>
</html>
