CSS quick start

catalogue

CSS concept

Three common import methods of CSS

  selector

Basic selector

advanced selectors

Beautify web page elements

Box model

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)

  1. Block: block element
  2. Inline: inline element
  3. Inline block: it is a block element, but it can be inlined on one line
  4. 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:

  1. Adding empty div to floating elements is simple, and the code should avoid empty div as much as possible
  2. Setting the height of the parent element is simple. If the element does not have a fixed height, it will exceed
  3. overflow ---- is simple. Some drop-down scenarios should be 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

Comparison between display and float

  1. display: the direction cannot be controlled
  2. 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);
}

Tags: css3 html css

Posted on Sat, 30 Oct 2021 19:07:23 -0400 by danman252