1, What is CSS?
- CSS refers to cascading style sheets, also known as cascading style sheets.
- Advantages of css:
Separation of content (HTML) and presentation (CSS);
The structure of web pages is unified and can be reused;
The style is very rich;
html independent css files are recommended.
2, Three ways to import CSS
- Inline style
- Internal style
- External style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Internal style-->
<style>
h1{
color:green;
}
</style>
<!--External style-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--Priority:(Proximity principle)-->
<!--Inline style: in the label element, write a style Property, just write the style-->
<h1 style="color: cornflowerblue;">I'm the title</h1>
</body>
</html>
3, Selector
3.1 function
Select an element or a class of elements on the page.
3.2 basic selector
- Label selector: select a type of label {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*The tag selector will select all the elements of this tag on the page*/
h1{
color:blue;
background-color: antiquewhite;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>study Java</h1>
<h1>Learning front end</h1>
</body>
</html>
- Class selector: select all tags with the same class attribute, across tags Class name {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*The format of the class selector. Name of class {}
The advantage is that multiple tags can be classified. They are the same class and can be reused
*/
.c1{
color:red;
}
.c2{
color:cornflowerblue;
}
</style>
</head>
<body>
<h1 class="c1">Title 1</h1>
<h1 class="c2">Title 2</h1>
<h1>Title 3</h1>
<p class="c1">p label</p>
</body>
</html>
- id selector: globally unique# id name {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id selector
#id Name {}
Priority:
Fixed without following the principle of proximity
id Selector > class selector > label selector
*/
#d1{
color:blue;
}
</style>
</head>
<body>
<h1 id="d1">Title 1</h1>
<h1>Title 2</h1>
<h1>Title 3</h1>
<h1>Title 4</h1>
<h1>Title 5</h1>
</body>
</html>
- Priority: ID > class > tag
3.3 hierarchy selector
- Descendant selector: after an element
/*Descendant Selectors */
body p{
background-color: cornflowerblue;
}
- Son generation, son
/*Child selectors */
body>p{
background-color: antiquewhite;
}
- Neighbor sibling
/*Adjacent sibling selector: only one, adjacent (down)*/
.active + p{
background-color: green;
}
- Universal selector: Universal sibling selector, which refers to all sibling elements downward of the currently selected element
/*Universal sibling selector, all sibling elements down from the currently selected element*/
.active~p{
background-color: blueviolet;
}
- Total code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*Descendant Selectors */
body p{
background-color: cornflowerblue;
}
/*Child selectors */
body>p{
background-color: antiquewhite;
}
/*Adjacent sibling selector: only one, adjacent (down)*/
.active+p{
background-color: green;
}
/*Universal sibling selector, all sibling elements down from the currently selected element*/
.active~p{
background-color: blueviolet;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
3.4 structure pseudo class selector
/*ul First child element of*/
ul li:first-child{
background-color: blueviolet;
}
/*ul Last child element of*/
ul li:last-child{
background-color: red;
}
- Total code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul First child element of*/
ul li:first-child{
background-color: blueviolet;
}
/*ul Last child element of*/
ul li:last-child{
background-color: red;
}
/*Check p1: navigate to the parent element and select the current first element
Select the parent element of the current p element, select the first parent element, and it will take effect only if it is the current element! order
*/
p:nth-child(1){
background-color: #85e9ff;
}
/*Select the parent element and the second type of the p element under it*/
p:nth-of-type(2){
background-color: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
- Result diagram
3.5 attribute selector (common)
=Absolutely equal to
*=Include this element
^=Start with this
$= ends with this
- Code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float:left;
display: block;
height: 50px;
width: 50px;
border-radius:10px;
background: #85e9ff;
text-align: center;
color:black;
margin: 2px;
text-decoration: none;
font:bold 20px/50px Arial;
}
/*Attribute name, attribute name = attribute value (regular)
= Absolutely equal to
*= Include this element
^= Start with this
$= End with this
*/
/*Element a[]{} with id attribute*/
/*a[id]{*/
/* background: blueviolet;*/
/*}*/
/*id=first Element of */
/* a[id=first]{*/
/* background: #8ae22b;*/
/* }*/
/*class Link element in*/
/* a[class*="links"]{*/
/* background: yellow;*/
/* }*/
/*Check the elements in the href that begin with http*/
/* a[href^=http]{*/
/* background: green;*/
/* }*/
a[href$=jpg]{
background: antiquewhite;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="text">2</a>
<a href="images/1.html" class="links item">3</a>
<a href="images/1.png" class="links item">4</a>
<a href="images/1.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/b.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="def.doc" class="links item">10</a>
</p>
</body>
</html>
- Result display
4, Beautify web page elements
4.1 why beautify web pages
- Effective delivery of page information
- Beautify the web page and make it beautiful in order to attract users
- Highlight page theme
- Improve user experience
Span label: key words to be highlighted shall be enclosed by span label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
Welcome to study<span id="title1">Java</span>
</body>
</html>
4.2 font style
<!--
font-family:typeface
font-size:font size
font-weight:Font weight
color:Font color
-->
<style>
body{
font-family: Chinese block letters;
color: #85e9ff;
}
h1{
font-size: 50px;
}
.p1{
font-weight:bold;
}
</style>
4.3 text style
- color rgb rgba
- Text align = center
- First line indent text indent: 2em
- Line height: single line text is centered up and down
- Text decoration:
- Text picture horizontal alignment: vertical align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
Color:
word
RGB:0-f;
RGBA: A:0-1
text-align:Typesetting, centering
text-indent: 2em;
text-indent: 2em; Paragraph first line indent
height: 20px;
line-height: 20px;
If the row height is consistent with the height of the block, it can be centered up and down
-->
<style>
h1{
color:rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #85e9ff;
height: 20px;
line-height: 20px;
}
/*Underline*/
.c1{
text-decoration: underline;
}
/*strikethrough */
.c2{
text-decoration: line-through;
}
/*Underline*/
.c3{
text-decoration: overline;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p class="c1">123456</p>
<p class="c2">123456</p>
<p class="c3">123456</p>
<h1>Story introduction</h1>
<p class="p1">The spirit of heaven and earth gave birth to a Hunyuan bead with great energy. The Heavenly Master of the beginning of the Yuan Dynasty refined the Hunyuan bead into spirit beads and magic pills. The spirit beads were reincarnated as human beings and could be used to help Zhou conquer Zhou;</p>
<p>The magic pill will give birth to the demon king, which will bring disaster to the world. At the beginning of the Yuan Dynasty, Tianzun started the heaven robbery spell. In three years, Tianlei will come and destroy the magic pill.</p>
<p class="p3">Taiyi was ordered to bear Lingzhu on Nezha, the son of Li Jing's family in Chentang pass.</p>
<p>However, Lingzhu and magic pill were swapped. Nezha, who was supposed to be a pearl hero, became a mixed world demon king. This naughty and naughty Nezha only had a heart to be a hero.</p>
<p>However, in the face of people's misunderstanding of Nezha and the coming thunder, is Nezha destined to become a devil, and where will he go</p>
<p>
<img src="../../resource/image/1.jpg" height="100px" width="200px">
<span>Nezha's demon child came into the world</span>
</p>
</body>
</html>
- Result chart display
4.4 shadows
/*text-shadow:Horizontal offset, vertical offset, shadow radius, shadow color*/
#price{
text-shadow: 10px 10px 2px grey;
}
4.5 hyperlink pseudo class
/* Unreached links */
a:link {
color: #85e9ff;
}
/* Visited links */
a:visited {
color: #00FF00;
}
/* Mouse over link */
a:hover {
color: #FF00FF;
}
/* Selected links */
a:active {
color: #0000FF;
}
4.6 list
/*ul li*/
/*
list-style:
none Remove the origin
circle Hollow circle
decimal number
square square
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
4.7 background
- Background color
- Background image
<style>
div{
width: 1000px;
height: 700px;
border:1px solid black;
background-image: url("images/1.jpg") ;
/*The default is all tiles*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
4.8 gradient
Recommend a website: Grabient
background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
5, Box model
5.1 what is a box model
- Margin: outer margin
W3School outer margin - padding: inner margin
W3School inner margin - border: border
W3School - border - How to calculate the box: how big is your element?
margin+border+padding + content width
5.2 border
- The thickness of the border
- Border style
- Border color
W3school CSS border color
5.3 rounded border
<title>Title</title>
<!--
Upper left, upper right, lower right, lower left,Clockwise
-->
<!--
Circles: fillets=radius
-->
<style>
div{
width: 100px;
height: 100px;
border:1px solid black;
border-radius: 100px;
}
</style>
5.4 shadows
6, Float
Block level element: exclusive row
h1~h6 p div list
Inline elements: do not monopolize a row
span a img strong...
Inline elements can be included in block level elements, and vice versa.
- display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block Block element
inline Inline element
inline-block Is a block element, but it can be inlined on one line
none
-->
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
display: none;
}
span{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div>div Block element</div>
<span>span Inline element</span>
</body>
</html>
-
Float
float attribute
The float attribute is used to locate and format content, such as floating an image to the left to the text in the container. -
The float property can be set to one of the following values:
left - The element floats to the left of its container right - The element floats to the right of its container none - The element does not float (it will appear where it just appeared in the text). Default value. inherit - Element inherits from its parent float value
Collapse of parent border
-
clear
none - Floating elements are allowed on both sides. Default value left - Floating elements are not allowed on the left right- Floating elements are not allowed on the right both - Floating elements are not allowed on the left or right inherit - Element inherits from its parent clear value
-
Solution:
1. Increase the height of the parent element (simply, if the element has a fixed height, it will be limited)
2. Add an empty div tag after the floating element to clear the floating (simple, try to avoid empty div in the code)
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
3. overflow (simple, some drop-down scenarios should be avoided)
Add an overflow: hidden in the parent element;
4. Add a pseudo class to the parent class: after (recommended)
#father:after{
content:'';
display:block;
clear:both;
}
7, Positioning
7.1 relative positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Relative positioning
Offset from your original position-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid black;
padding: 0;
}
#first{
background: #4158D0;
border: 1px dashed #60b041;
position:relative ; /*Relative positioning: up, down, left and right*/
top:-20px;
}
#second{
background: #85e9ff;
border: 1px dashed #85e9ff;
}
#third{
background: pink;
border: 1px dashed #e13ed4;
position: relative;
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">First box</div>
<div id="second">Second box</div>
<div id="third">Third box</div>
</div>
</body>
</html>
Relative positioning: position:relative;
Makes the specified offset from the original position
If it is relatively positioned, it will still be in the standard document stream, and its original position will be retained
top:-20px;
left:20px;
bottom:-10px;
right:20px;
7.2 absolute positioning
Positioning: positioning based on something, up, down, left and right,
- Relative to browser positioning without parent element positioning
- Assuming that the parent element has positioning, we usually offset it from the parent element
- Move within parent elements
Makes the specified offset relative to the position of the parent or browser
If it is absolutely located, its original position will not be retained in the standard document stream
7.3 fixed positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height:10000px;
}
div:nth-of-type(1){ /*Absolute positioning: relative to browser*/
width: 100px;
height: 100px;
background: #4158D0;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*fixed,Fixed positioning*/
width:50px;
height: 50px;
background: red;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
7.4 z-index
Equivalent to a layer
z-index: the default is 0, and the maximum is infinite ~ 999
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#text{
position: absolute;
top: 30px;
left: 40px;
z-index: 1;
}
#bg{
position: absolute;
top: 30px;
background: white;
width: 200px;
height: 20px;
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="../resource/image/1.jpg" width="200px" height="100px"></li>
<li id="text">Nezha's demon child came into the world</li>
<li id="bg"></li>
</ul>
</div>
</body>
</html>
- Result chart display
