advantage
1. Separation of content and performance
2. The web page structure is unified and can be reused
3. Very rich styles
4. It is recommended to use css files independent of html
5. Using SEO, it is easy to be included by search engines
Template
Flying ice, template home
grammar
Each declaration ends with a semicolon
Selector{
Statement 1;
Statement 2;
Statement 3;
}
Three ways to import css
- Linked
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css"> //address
</head>
-
Import type
-
@impot url("css/style.css")
Internal style
External style
Inline style
<h1 style="color: red">I'm the title</h1>
Priority of style
Priority: proximity principle (coverage principle), who is close to the label will be displayed
selector
Function: select an element or a type of element on the page
Basic selector
1. Label selector: select a type of label
2. Class selector: select all tags with the same class attribute and cross tags class
3.id selector: globally unique #id
tag chooser
<style>
/*The tag selector will select all the tag elements on the page*/
h1{
color: #f9f9fa;
background: #72163b;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
Class selector
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*The format of the class selector Name of class {}
Benefits: multiple tags can be classified. They are the same class and can be reused*/
.bt1{
color: red;
}
.bt2{
color: blue;
}
</style>
</head>
<body>
<h1 class="bt1">Title 1</h1>
<h1 class="bt2">Title 2</h1>
<h1>Title 3</h1>
</body>
id selector
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id Selector: id must be globally unique
#id Name {}
*/
#bt1{
color: red;
}
</style>
</head>
<h1 id="bt1">Title I</h1>
Selector priority
Fixed without following the principle of proximity
id selector > class selector > label selector
Hierarchy selector
1. Offspring selector:
Behind an element, Grandpa, Grandpa, Dad, you
<style>
/*Descendant Selectors */
body p{
background: red;
}
</style>
2. Sub selector
Generation, son
/*Child selectors */
body>p{
background: red;
}
3. Adjacent brother selector
/*Adjacent sibling selector: only one, adjacent (down)*/
.active + p{
color: red;
}
<p class="active">p7</p> <p>p8</p>
Only p8 discoloration
4. Universal selector
<style>
/*universal selector */
.active~p{
background: red;
}
</style>
<p>p1</p> <p class="active">p2</p> <p>p3</p> <p>p4</p>
All brothers with the selected label down will change color
Structure pseudo class selector
Pseudo class:
<style>
/*ul First child element of*/
ul li:first-child{
background: red;
}
/*ul Last child element of*/
ul li:last-child{
background: blue;
}
</style>
/*Select only 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
*/
p:nth-child(3){
background: green;
}
/*Select the second of the p element under the parent element*/
p:nth-of-type(2){
background: aqua;
}
Pseudo color change (color change when the mouse moves up)
a:hover{
background: red;
}
<a href="">32131</a>
Attribute selector (common)
id+class combination
/*Attribute name: attribute name = attribute value (regular)
Element with id attribute
= Is absolutely equal to
*= For include
^= With Start with
$= With ending
*/
a[id=first]{
background: yellow;
}
a[class*="links"]{
background: yellow;
}
/*Check the elements in the href that begin with http*/
a[href^=http]{
background: green;
}
/*Check the doc ending element in the href*/
a[href$=doc]{
background: red;
}
Beautify web page elements
Why beautify web pages?
1. Effective delivery of page information
2. Beautify the web page. Only when the page is beautiful can it attract users
3. Highlight the theme of the page
4. Improve user experience
span label
By convention: the key words should be highlighted and set up with span
<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>
Font style
!--
font-family:typeface
font-size:font size
font-weight: border Bold
font-style: oblique Italics
color:Font color
-->
<style>
body{
font-family: Regular script;
}
h1{
font-size: 50px;
}
.p1{
font-style: oblique;
}
</style>
</head>
<body>
<h1>Story introduction</h1>
<p class="p1">B The station features a real-time comment function suspended above the video, which enthusiasts call "barrage". This unique video experience enables the Internet-based barrage to transcend the limitations of time and space,</p>
<p>Build a wonderful synchronic relationship and form a virtual tribal film viewing atmosphere, so that B The station has become a cultural community with interactive sharing and secondary creation.</p>
<p>B Station is also one of the birthplaces of many popular online words.</p>
Text style
1. color
2. Text align = center
3. Indent the first line text indent: 2em
4. Line height
5. Text decoration
6. Align text and picture horizontally vertical align: middle
mouse
Font color size when mouse hovers
/*Mouse hover color*/
a:hover{
color: red;
font-size: 50px;
}
The state in which the mouse is not released
/*Press and hold the mouse in the unreleased state*/
a:active{
color: green;
}
list
#nav{
width: 300px;
background: cadetblue;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
/*ul li*/
/*
list-style:
none Remove the origin
circle Hollow circle
decimal number
square square
*/
/*ul{*/
/*background: cadetblue;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent:1em
}
a{
text-decoration: none;
font-size: 14px;
text-indent:1em
}
a:hover{
color: orange;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List style</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<h2 class=title>All commodity categories</h2>
<ul>
<li>
<a href="#"> books</a>
<a href="#"> audio visual</a>
<a href="#"> digital goods</a>
</li>
<li>
<a href="#"> household appliances</a>
<a href="#"> mobile phone</a>
<a href="#"> Digital</a>
</li>
<li>
<a href="#"> Computer</a>
<a href="#"> Office</a>
</li>
<li>
<a href="#"> furniture</a>
<a href="#"> home decoration</a>
<a href="#"> kitchenware</a>
</li>
<li>
<a href="#"> clothing, shoes and hats</a>
<a href="#"> personalized makeup</a>
</li>
<li>
<a href="#"> gift bags</a>
<a href="#"> clocks</a>
<a href="#"> Jewelry</a>
</li>
<li>
<a href="#"> food and beverage</a>
<a href="#"> health food</a>
</li>
<li>
<a href="#"> lottery</a>
<a href="#"> Travel</a>
<a href="#"> recharge</a>
<a href="#"> ticketing</a>
</li>
</ul>
</div>
</body>
</html>
background
background color
Background picture
Gradient website
Background border
border: 1px solid red;
Box model
What is a box
Margin: outer margin
padding: inner margin
border: border
frame
1. Thickness of border
2. Border style
3. Border color
solid border
solid
/*solid It's a solid line*/ border: 2px solid black;
Dashed border
dashed
/*dashed It's a dotted line*/ border: 2px dashed #000000;
Centering of outer margin
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;(Outer margin: upper and lower spacing (left and right spacing) requirements: block elements, block elements have a fixed width
}
How to calculate the box: how big is your element
margin+borded+padding + content width
Rounded border
<!-- Left top right top right bottom left bottom clockwise-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 50px 30px 20px 10px;
}
</style>
circle
<!--Circles: fillets=radius-->
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
Semicircle
<style>
div{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0px 0px;
}
</style>
Picture rounding
img{
border-radius: Picture radius;
}
<img src="images/skunk.jpg" alt="">
shadow
box-shadow
For example:
x offset y offset luminance
box-shadow:10px 10px 100px yellow;
float
Standard document flow (similar to mobile phone top-down)
display
<style>
div{
width: 100px;
height: 100px;
border:1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
/*display: block;Become a block element*/
display: inline-block;
}
</style>
Implement the arrangement of elements in the line, but we use float in many cases
float is similar to the second layer
Floating left and right
float:left/right
Block level element: exclusive row
h1~h6 p div list
Inline elements: do not monopolize a row
Inline elements can be included in block level elements, and vice versa
Clear float
clear
clear:reght;Floating elements are not allowed on the right clear:left; Floating elements are not allowed on the left clear:both; Floating elements are not allowed on both sides clear:none;
Collapse of parent border
Solution:
1. Add parent element
#father{
border:1px #000 solid;
height:800px
};
2. Add an empty div tag and clear the float
<div class="clear"><div>
.clear{
clear:both;
margin:0;
padding:0;
}
3.overflow
Add one to the parent element overflow:hidden;hide
4. Add a pseudo class to the parent class: after
#father:after{
content: '';
display:block;
clear:both;
}
Summary:
1. Add an empty div after the floating element
Simple, try to avoid empty div in the code
2. Set the height of the parent element
Simply, if the element has a fixed height, it will be limited
3.overflow
Simple, some drop-down scenarios are avoided
4. Add a pseudo class to the parent class: after (recommended)
The writing method is slightly complex, but there are no side effects. It is recommended
contrast
-
display
The direction cannot be controlled
-
float
If it floats, the standard document stream will fall off, so the problem of parent border collapse should be solved
location
Relative positioning
body{
padding: 20px;
}
div{
margin:10px;
padding: 5px;
font-size:12px;
line-height:25px;
}
#father{
border: 1px solid #666;
}
#first{
background: #081ee2;
border: 1px solid #e20808;
position: relative;/*Relative positioning: up, down, left and right*/
top: -20px;
left: 20px;
}
#second{
background: #e2a408;
border: 1px solid #a8e208;
position: relative;
bottom: -10px;
right: 20px;
}
#third{
background: aquamarine;
border: 1px solid #081ee2;
}
position:relative
If the specified offset is made relative to the original position, it will still be in the relative document stream, and the original position will be retained
top: -20px; left: 20px; bottom: -10px; right: 20px;
Absolute positioning
Positioning: positioning based on xxx, up, down, left and right
1. Positioning relative to the browser without parent element positioning
2. Assuming that the parent element has positioning, we usually offset it from the parent element
3. Move within the range of parent elements
The specified offset is made relative to the position of the parent or browser. If it is absolutely positioned, it will not be in the standard document stream, and the original position will not be retained
#first{
background: #081ee2;
border: 1px solid #e20808;
position: relative;/*Set parent element*/
top: -20px;
left: 20px;
}
#second{
background: #e2a408;
border: 1px solid #a8e208;
position: absolute;/*Absolute positioning relative to parent element*/
right: 30px;
top: 10px;
}
fixed positioning
div:nth-of-type(2){/*fixed,Fixed positioning*/
width: 50px;
height: 50px;
background: #e2a408;
position: fixed;
right: 0;0 from the right border
bottom: 0;0 from bottom
}
z-index
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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/skunk.jpg" alt="" width="300px" height="200px"></li>
<li class="tipText">Hello</li>
<li class="tipBg"></li>
<li>Time: 2099-01-01</li>
<li>Location: lunar base 1</li>
</ul>
</div>
</body>
</html>
transparency
opacity: 0.5; / Background transparency/
#content{
width: 300px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*Relative positioning of parent elements*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 300px;
height: 25px;
top: 180px;
}
.tipText{
z-index: 999;
color: #f9f9fa;
}
.tipBg{
background: #000;
opacity: 0.5; /*Background transparency*/
}