catalogue
Three common import methods of CSS
CSS concept
What is CSS
Cascading Style Sheet
CSS: presentation (beautify web pages)
Font, color, margin, height, width, background picture, web page positioning, web page floating
cSS1.0
CSS2.0: div (block) + CSS, the idea of separating HTML and CSS structure, web pages become simple, SEO
CSS2.1: floating, positioning
cSS3.0: fillet, shadow, animation... Browser compatibility~
quick get start
Exercise format:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--standard,<style>Can write CSS Code, each declaration is best“;"ending
Syntax:
selector{
Statement 1;
Statement 2;
Statement 3;
} -->
<style>
h1{
color: crimson;
}
</style>
</head>
<body>
<h1>CSS test</h1>
</body>
</html>
The following specification is recommended
Advantages of CSS:
1. Separation of content and performance;
2. The structure of web pages is unified and can be reused
3. The style is very rich
4. html independent css files are recommended
5. Using SEO, it is easy to be included by search engines!
Three common import methods of CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style><!--Internal style-->
h1{
color: green;
}
</style>
<!--External style-->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!--Priority: in line style > Internal style > External style-->
<!--Inline style: in the label element, write a style Property, just write the style-->
<h1 style="color: red">This is the label</h1>
</body>
</html>
Expansion: two methods of external style
Link html
<!--External style--> <link rel="stylesheet" href="css/style.css" />
Import type
@Import is a cSS2.1 specific import style, which needs to be placed in the < style > tab
<!--Import type-->
<style>
@import url("css/style.css");
</style>
selector
Function: select a certain type of element on the page
Basic selector
1. Label selector
Select a type of label
Format: label {}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: orange;
background: blue;
border-radius: 10px;
}
h3{
color: orange;
background: blue;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>tag chooser </h1>
<p>Long di</p>
<h3>JAVA Novice Xiaobai</h3>
</body>
2. Class selector class
Select the same label for all class es, across labels
Format:. Class name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*Format of class selector. Name of class {}
Benefits: multiple tags can be classified. It is the same class, which can be reused and cross tags
*/
.demo1{
color: blue;
}
.demo2{
color: red;
}
.demo3{
color: aqua;
}
</style>
</head>
<body>
<h1 class = "demo1">Class selector: demo1</h1>
<h1 class="demo2">Class selector: demo2</h1>
<h1 class="demo3">Class selector: demo3</h1>
<p class="demo3">paragraph</p>
</body>
</html>
3. id selector
Globally unique
Format: #id name
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id Selector: id must be globally unique
#id Name {}
If the principle of proximity is not followed, the priority is fixed
id Selector > class selector > label selector
*/
#demo1{
color: red;
}
.demo2{
color: green;
}
#demo2{
color: orange;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="demo1" class="demo2">id Selector: demo1</h1>
<h1 class="demo2" id = "demo2">id Selector: demo2</h1>
<h1 class="demo2">id Selector: demo3</h1>
<h1 >id Selector: demo4</h1>
<h1>id Selector: demo5</h1>
</body>
Priority: ID > class > label
advanced selectors
Hierarchy selector
1. Descendant selector: after an element
/*Descendant Selectors */
<style>
body p{
background:red;
}
</style>
2. Sub selector, generation
/*Child selectors */
<style>
body>p{
background:orange;
}
</style>
3. Adjacent siblings
/*Adjacent brother selector: select only one, adjacent (down)*/
<style>
.active+p{
background: red
}
</style>
<body>
<p class="active">p1<p>
<p>p2</p>
</body>
4. Universal selector
p means that the p tag is valid, and a means that the a tag is valid
<style>
/*Universal sibling selector, all sibling elements down from the currently selected element*/
.active~p{
background:red;
}
</style>
<body>
<p class="active">p1<p>
<p>p2</p>
</body>
Structure pseudo class selector
Pseudo class
<style>
ul li:first-child{/*ul First child element of*/
background: aqua;
}
ul li:last-child{/*ul Last child element of*/
background: blue;
}
/*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!*/
p:nth-child(1){
background: orange;
}
p:nth-of-type(2){/*Select the second p element under the parent element*/
background: red;
}
/*characteristic*/
a:hover{
color: green;
}
</style>
</head>
<body>
<a href="">123</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h3>h3</h3>
<ul>
<li>1li1</li>
<li>1li2</li>
<li>1li3</li>
</ul>
<ul>
<li>2li1</li>
<li>2li2</li>
<li>2li3</li>
</ul>
<a href="www.baidu.com">Baidu</a>
</body>
Attribute selector (common)
id+class combination
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
/*line-height:50px;*/
font: bold 20px/50px Arial;
}
/*Attribute name, attribute name = attribute value (regular)
= Means absolute equal to
*= Indicates inclusion
^= Means to begin with
$= Means to end with
Element with id attribute
a[]{}
*/
a[id]{
background: yellow;
}
a[id=first]{/*id=first Element of*/
background: green;
}
a[class*="links"]{/*class Link element in*/
background: bisque;
}
a[href^=http]{/*Check the elements in the href that begin with http*/
background: aquamarine;
}
a[href$=pdf]{/*Check the elements in the href that begin with http*/
background: aquamarine;
}
</style>
</head>
<body>
<p class="demo">
<a href="http:www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank " title="test">2</a>
<a href="images/123.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="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
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 customers
3. Highlight the theme of the page
4. Improve user experience
Span label: use the span label to cover the key words
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
Learning language<span id="title1">JAVA</span>
</body>
Font style
Font family: font
Font size: font size
Font weight: font weight
Color: font color
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family:"Arial Black",Regular script;
color: red;
}
h1{
font-size: 60px;
}
.p1{
font-weight: 500;
color: blue;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>halo</p>
<p class="p1">Long di</p>
<p>i love study java</p>
</body>Common writing method: [font style]
font-weight:bolder;/*You can also fill in px, but not more than 900, which is equivalent to blogger*/ /*Common writing:*/ font:oblique bloder 12px "Regular script" oblique:Italics
Text style
1. Color - > Color: AGB / RGBA ()
2. Text alignment - > text align: Center
3. First line Indent - > text indent: 2em
4. Row height - > line height: 300px;
5. Underline > text decoration
text-decoration:underline/*Underline*/ text-decoration:line-through/*strikethrough */ text-decoration:overline/*Upper scribe*/ text-decoration:none/*Underline hyperlinks*/
Horizontal alignment of pictures and text
img,span{vetical-align:middle}
Text, shadow and hyperlink pseudo classes
<style>
a{/*Hyperlinks have default colors*/
text-decoration:none;
color:#000000;
}
a:hover{/*State of mouse hover*/
color:orange;
}
a:active{/*The state in which the mouse is not released*/
color:green
}
a:visited{/*Status after clicking*/
color:red
}
a:link{
background: bisque;
}
</style>
Shadows:
/* The first parameter: indicates the horizontal offset The second parameter: indicates the vertical offset The third parameter: represents the blur radius The fourth parameter: represents the color */ text-shadow:5px 5px 5px colour
List ul li
Homepage index.html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/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="#"> Home</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>
css code:
#nav{
width: 300px;
background: antiquewhite;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;/*indent*/
line-height: 35px;
background: red;
}
/*ul li*/
/*
list-style:
non Remove the solid circle
circle Hollow circle
square square
*/
/*ul{!*nav Replacement effect *!
background: antiquewhite;
}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: burlywood;
text-decoration: underline;
}
3.7 background
1. background color:
2. Background picture
background-image:url("");/*The default is all tiles*/
background-repeat:repeat-x/*tile horizontally*/
background-repeat:repeat-y/*Tile Vertically */
background-repeat:no-repeat/*no-repeat */
Gradual change
Gradient background URL: Grabient
Radial gradient, circular gradient
Box model
What is a box model
1. margin: outer margin
2.padding: inner margin
3. border: Border
frame:
border: thickness, style, color
1. Thickness of border
2. Border style
3. Border color
Outer margin ---- Magic: Center
Margin left / right / top / bottom - > indicates four sides, which can be set separately or simultaneously as follows
margin:0 0 0 0/*It indicates up, right, down and left respectively; clockwise from top*/ /*Example 1: Centering*/ margin:0 auto /*auto Left and right automatic*/ /*Example 2:*/ margin:4px/*Indicates that the top, right, bottom and left are 4px*/ /*Example 3*/ margin:10px 20px 30px/*It means 10px for the top, 20px for the left and right, and 30px for the bottom*/
Calculation method of box:
margin+border+padding + content size
Summary:
body always has a default outer margin margin margin:0
Common operations: initialization
Rounded border ---- border radius
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*A border radius is only 1 / 4 of a circle*/
border-radius: 50px 20px 20px 30px;/*Upper left, upper right, lower right, lower left, clockwise*/
}
</style>
Box shadow
box-shadow: 10px 10px 1px black;
float:
Standard document flow
Block level elements: exclusive row h1~h6, p, div, list
Inline element: does not monopolize a row span, a, img, strong
Note: inline elements can be included in block level elements, otherwise they cannot
display (important)
- Block: block element
- Inline: inline element
- Inline block: it is a block element, but it can be inlined on one line
- none: disappear
<!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
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div Block element</div>
<span>span Inline element</span>
</body>
</html>
float: left/right
clear: both
overflow and parent border collapse
/*
clear: right；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；
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
clear: left;
}
Solution to collapse:
Scheme 1: increase the height of parent elements;
Scheme 2: add an empty div tag and clear the float
<div class = "clear"></div>
<style>
.clear{
clear:both;
margin:0;
padding:0;
}
</style>
Scheme 3: add an overflow attribute in the parent element
overflow:hidden/*Hide excess*/ overflow: scoll/*roll*/
Scheme 4: add a pseudo class to the parent class: after
#father:after{
content:'';
display:block;
clear:both;
}
Summary:
- Adding empty div to floating elements is simple, and the code should avoid empty div as much as possible
- Setting the height of the parent element is simple. If the element does not have a fixed height, it will exceed
- overflow ---- is simple. Some drop-down scenarios should be avoided
- 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
Comparison between display and float
- display: the direction cannot be controlled
- float: if it floats, it will break away from the standard document flow, so the problem of parent border collapse should be solved.
location
Relative positioning
Relative positioning: position: relative;
If the specified offset is made relative to the original position, it will still be in the standard document stream! The original position will be retained
top:-20px;/*Up offset 20px*/ left:20px;/*Offset right 20px*/ bottom:10px;/*Up offset 10px*/ right:20px;/*Offset left 20px*/
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Relative positioning</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: #ffa538 1px solid;
padding: 0;
}
#first{
border: #b3ff38 1px solid;
background-color: #ffa538;
position: relative;/*Relative positioning: up, down, left and right*/
top: -20px;/*Up offset 20px*/
left: 20px;/*Offset right 20px*/
}
#second{
border: #427b11 1px solid;
background-color: #66c77f;
}
#third{
background-color: #b3ff38;
border: #38d7ff 1px solid;
position: relative;
bottom: 10px;/*Up offset 10px*/
}
</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>
Implementation code
<style>
#box{
height: 300px;
width: 300px;
border: 2px red solid;
padding: 10px;
}
a{
height: 100px;
width: 100px;
background-color: #ee73b7;
color: white;
text-align: center;
text-decoration: none;
line-height: 100px;/*Set line spacing 100px*/
display: block;/*Setting block*/
}
a:hover{
background: #4158D0;
}
.a2{
position: relative;
left: 200px;
top: -100px;
}
.a4{
position: relative;
left: 200px;
top: -100px;
}
.a5{
position: relative;
left: 100px;
top: -300px;
}
</style>
</head>
<body>
<div id="box">
<div class="a1"><a href="" >Connection 1</a></div>
<div class="a2"><a href="" >Connection 2</a></div>
<div class="a3"><a href="" >Connection 3</a></div>
<div class="a4"><a href="" >Connection 4</a></div>
<div class="a5"><a href="" >Connection 5</a></div>
</div>
</body>
Effect display:
absolute positioning and fixed positioning
Positioning: positioning based on xxx, up, down, left and right~
1. Relative to browser positioning without parent element positioning
2. Assuming that the parent element has positioning, we usually offset it from the parent element
3. Move within parent elements
Summary: if the specified offset is made relative to the position of a parent or browser, it will not be in the standard document stream and the original position will not be retained
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute;/*absolute Absolute positioning*/
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color: #b3ff38;
position: fixed;/*fixed Fixed positioning*/
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
z-index
Layer-z-index: the default is 0, and the maximum is infinite ~ 999
index.html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style></style>
</head>
<body>
<div id="content">
<ul>
<li><img src="images/2020.jpg" alt=""/></li>
<li class="tipText">Hello</li>
<li class="tipBg"></li>
<li>Time: 2030-01-01</li>
<li>Location: Northeast China</li>
</ul>
</div>
</body>
</html>
css code
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid yellow;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*Relative positioning of parent elements*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top:216px
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: orange;
opacity: 0.5;/*Background transparency*/
filter: alpha(opacity=50);
}