TITLE: CSS learning notes (updating)
For beginners: CSS Express
What is CSS
Cascading style sheets
<p> Lorem ipsum dolor sit amet </p>
P{
color:red;
}
Selector{Property:Value;}
Selector {property: value;}
There are three ways to add CSS
External style sheet
css is saved in css file
Using references in html
Internal style sheet
Do not use external CSS files
Put CSS in HTML
inline style
Affect only one element
Add in the style attribute of the html element
//Generally not used
selector
<p class="paragraph" id="para1">
Lorem
</p>
/*Method 1*/
p{
color:red
}
/*The second method - > through class*/
.paragraph{
color:red
}
/*Method 3 - > pass id*/
#para1{
color:red
}
colour
key word
RGB
Hexadecimal value
typeface
Font family is used to specify the font
font-family : Arial, Helvetica, san-serif
The font in front will be preferred
The font name contains spaces and needs to be enclosed in quotation marks
Arial - font family name
Helvetica -- Font Name
San serif -- sans serif
Serif -- serif
monospace -- constant width font
Box model
margin
p{
margin-top:5px;
margin-bottom:6px;
margin-right:7px;
margin-left:8px;
}
p{
margin:5px 7px 6px 8px;
} /*Specified order: up, down, left and right*/
p{
margin:5px
}
--------------------------------
p{
margin-top:5px;
margin-bottom:6px;
margin-right:10px;
margin-left:10px;
}
p{
margin:5px 10px;
}
p{
margin:5px 10px 5px;
}
/*The upper and lower margins are different, and the left and right margins are the same*/
padding is the same as border
list
list
url
Button / hyperlink
Button
button{
}
The float should be cleared after it is used up
Position in CSS
Static static positioning
Default positioning method
Relative relative positioning
Absolute absolute positioning
Generally, relative is used as a reference
Fixed fixed positioning
sticky
CSS Crash Course Demo
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is a Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box1">
<h1>Hello World</h1>
<p>
Mao Zedong thought is the product of the combination of the basic principles of Marxism Leninism and the specific reality of the Chinese revolution, and the crystallization of the collective wisdom of the Chinese Communists. It is a political, military and development theory advocated by Mao Zedong and widely practiced in the 20th century Chinese revolution. It is generally considered as the development of Marxism Leninism in China. The CPC's recognition of Mao Zedong thought is an important theory for it to win the new democratic revolution, the war of resistance against Japan, the civil war between the Kuomintang and the Communist Party, and the establishment of the people's Republic of China.
</p>
</div>
<div class="box2">
<h1>Hello World</h1>
<p>
Mao Zedong thought is the product of the combination of the basic principles of Marxism Leninism and the specific reality of the Chinese revolution, and the crystallization of the collective wisdom of the Chinese Communists. It is a political, military and development theory advocated by Mao Zedong and widely practiced in the 20th century Chinese revolution. It is generally considered as the development of Marxism Leninism in China. The CPC's recognition of Mao Zedong thought is an important theory for it to win the new democratic revolution, the war of resistance against Japan, the civil war between the Kuomintang and the Communist Party, and the establishment of the people's Republic of China.
</p>
<button>button</button>
</div>
<div class="list1" >
<ul>
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
</div>
<div class="block",id="block1">
<p>
It's like the moon covered by light clouds, and the snow covered by flowing wind.
</p>
</div>
<div class="block",id="block2">
<p>
It's like the moon covered by light clouds, and the snow covered by flowing wind.
</p>
</div>
<div class="block",id="block3">
<p>
It's like the moon covered by light clouds, and the snow covered by flowing wind.
</p>
</div>
<div class="clearfix"></div>
<div id="main-block">
<P>It's like the moon covered by light clouds, and the snow covered by flowing wind.</P>
</div>
<div class="clearfix"></div>
<div id="sidebar">
<P>It's like the moon covered by light clouds, and the snow covered by flowing wind.</P>
</div>
<div class="clearfix"></div>
<div class="list2" >
<ul>
<li><a href="#">List 1 item</a></li>
<li><a href="#">List 2 item</a></li>
<li><a href="#">List 3 item</a></li>
<li><a href="#">List 4 item</a></li>
<li><a href="#">List 5 item</a></li>
<li><a href="#">List 1 item</a></li>
<li><a href="#">List 2 item</a></li>
<li><a href="#">List 3 item</a></li>
<li><a href="#">List 4 item</a></li>
<li><a href="#">List 5 item</a></li>
</ul>
</div>
</div>
</body>
</html>
style.css
body{
background-color: white;
color:#555555;
font-size: 20px;
font-weight: bold;
line-height:2em;
}
h1{
color:deepskyblue;
}
.box1{
padding:20px;
background-color:antiquewhite ;
color: royalblue;
border:5px blue;
border-right:5px floralwhite solid;
}
.container{
width:88%;
margin:auto;
}
.box1 h1 {
font-family: "Times New Roman";
font-weight: 800;
font-style: italic;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 0.1em;
word-spacing: 1em;
}
.box2{
border:5px dotted #cccccc;
padding:20px;
margin:20px 0px;
position:relative;
}
/*I want to change the pattern*/
.list1 li {
background-color: white;
/*list-style-image: url(blackco01.jpg);*/
list-style: square;
}
button{
background-color: gray;
color: white;
padding:10px;
}
button:hover{
background-color: black;
}
a{
text-decoration:none;
color: #555555;
}
a:visited{
color: #cccccc;
}
a:hover{
color:black;
}
.block{
float:left;
width:33.3%;
border:1px solid #cccccc;
box-sizing:border-box;
}
#main-block{
float:left;
width: 70%;
box-sizing: border-box;
}
#sizebar{
float:right;
width:30%;
box-sizing: border-box;
}
.clearfix{
clear:both;
}
.list2 li:nth-child(odd){
background-color: floralwhite;
}
.list2 li:nth-child(even){
background-color: beige;
}
.list2 li:first-child{
background-color: grey;
}
.list2 li:last-child{
background-color:grey;
}
.list2 li:nth-child(3){
background-color: white;
}
CSS Basics
1, CSS introduction
What is CSS
Cascading style sheets
Defines how html elements are displayed
Writing standard
CSS rules consist of two main parts, selectors and one or more declarations
Selectors are usually html elements that you need to change the style
Each declaration consists of a property and a value
Basic grammar
Selector {property: value; property: value...}
Use curly braces {} to enclose the declaration
If the value is several words, use quotation marks for the value
Use semicolons between multiple declarations; separate
CSS is not case sensitive, and class and id names are case sensitive when used with hmtl documents
2, CSS inline usage
Inline mode (inline mode)
Embed CSS styles into html tags, similar to the usage of attributes
<div style='color:bule;font-size:50px'>
This is my html page.
</div>
3, CSS internal usage
Internal mode
In the head tag, use the style tag to introduce css
<style type="text/css"> //Tell the browser to use css parser to parse
div{color:red;font-size:50px}
</style>
01 use a style label first
02 using selector
4, CSS external mode and import mode
The CSS style is extracted into a separate file, which can be directly referenced by the user
Create a separate file: div，css Content example: div{color:green;font-size:50px}Reference statements are written in head Inside label<link rel='stylesheet' type='text/css' href='div.css'></link>
5, Basic and attribute selectors
Basic selector
Element selector: use style tag introduction in head to declare element selector: html tag (attribute: attribute value)
ID selector: add an ID attribute identifier to the html element of the style to be modified. Use the style tag in the head to declare the ID selector: #id value {attribute: attribute value}
Class selector: add a class attribute identifier to the html element of the style that needs to be modified, and use the style tag in the head