CSS

CSS

Outline

What is CSS?
How to use CSS?
CSS selector
Beautify web pages (e.g., text, hyperlinks, lists, gradients)
box model
float
position
web animation

1.1 What is CSS?

CSS - cascading style sheet
CSS - appearance (beautify web pages)
font, color, position

Advantage:

Separation of content and presentation
Web page structure is unified and can be reused
Rich in style
Highly recommend using CSS and HTML independently
Using SEO, Web easy to be indexed by search engines

1.2 History of CSS

CSS 1.0
CSS 2.0 - DIV(block) + Propose the idea of separating HTML and CSS structure to make web pages simpler, SEO (Search Engine Optimization) - Use search engine rules to improve your website's organic ranking in relevant search engines
CSS 2.1 - float, position
CSS 3.0 - Rounded corners, shadows, animations, browser compatibility

1.3 Quick start

1.3.1 3 ways to import CSS


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3 ways to import CSS</title>
</head>
<!-- external style -->  
<link rel="stylesheet" href="css/style.css">
<!-- internal style -->
<style>
    h1{
        color: aqua;
    }
</style>
<body>
    <!-- inline style -->
    <!-- priority: The principle of proximity-->
    <h1 style="color: red;">ways of importing</h1>
</body>
</html>

<!-->
.css file 

h1{
    color: black;

}
<-->

2. Selector

Select a certain element or a certain category of elements

2.1 Basic selector

Tag selector --> tag{}
Class selector --> .class{}
ID selector: globally unique --> #id{}

Priority: id > class > tag


<style>
    h1{
        background-color: tomato;
        border-radius: 3px;
    }
    .h1label{
        background-color: grey;
        border-radius: 3px;
    }
    #h123{
        background-color: yellowgreen;
        border-radius: 3px;
    }
</style>
<body>
    <!-- tag selector -->
    <h1>MySQL - tag selector</h1>
    <!-- class selector -->
    <h1 class = "h1label">MySQL - class selector</h1>
    <!-- id selector -->
    <h1 id = "h123">MySQL - id selector</h1>
</body>

2.3 Level selector

descendant selector --> Selects all descendants after an element
child selector --> Select only descendants of the current element
adjacent sibling selector --> Select only one adjacent element of the same generation (start from current element )
general sibling selector --> Select all elements of the same generation (strat from current element)

VScode tips: shift + option + up to copy and paste current code


<style>
    /* descendant selector */
    /* body p {
        background: blue;
    } */

    /* child selector*/
    /* body>p{
        background: beige;
    } */

    /* adjacent sibling selector */
    /* .test1+p{
        background: yellow;
    } */

    /* general sibling selector */
    .test1~p{
        background: grey;
    } 
</style>
<body>
    <p class = "test1">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>

2.4 Structure pseudo-class selector


<style>
    /*the first element of ul tag*/
    ul li:first-child{
        background: yellow;
    }
    /* last element of ul tag */
    ul li:last-child{
        background: green;
    }
    /* select parent element -> */
    p:nth-child(1){
        background:grey;
    }
    p:nth-of-type(3){
        background: red;
    }
</style>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
    </ul>
</body>

2.5 Attribute selector

Syntax:
attribute[regular expression]
= --> absolutely eqaul to
*= --> includes
^= --> start with
$= --> end with


<style>
    .demo a{
        background:gray;
        text-decoration: none;
        display: block;
        width:50px;
        height: 50px;
        float:left;
        color:brown;
        text-align: center;
        margin-left: 5px;
        border-radius: 5px;
        font: bold 20px/50px Arial;
    }
    /* there are some examples to illustrate how we use attribute selector */

    /*select id is not null*/
    a[id]{
        background: yellow;
    }

    /* select id = class */
    a[id=class]{
        background: green;
    }

    /* select class includes links */
    a[class*=links]{
        background: yellow;
    }

    /* select target */
    a[target]{
        background:yellow;
    }

    /* select href start with http */
    a[href^=http]{
        background:yellow;
    }

    /* select class end with last */
    a[class$=last]{
        background:yellow;
    }
</style>
<body>
    <p class="demo">
    <a href="http://www.google.com" class="links item first" id="class">1</a>
    <a href="http://www.baidu.com" class="links item active" target="_blank" title="test">2</a>
    <a href="" class="links item active">3</a>
    <a href="" class="links item">4</a>
    <a href="" class="links item">5</a>
    <a href=".pdf" class="links item">6</a>
    <a href=".pdf" class="links item">7</a>
    <a href="" class="links item">8</a>
    <a href="" class="links item">9</a>
    <a href=""class="links item last">10</a>
</p>
</body>

3. Elements for beautifying Web pages

3.1 Purpose of beautifying web pages

Effectively deliver page information
Attract users
Highlight page information
Improve users experiences

3.2 Font style

font-size
font-family
font-weight
color
font: bold 20px/50px Arial;
font: oblique bolder 16px Arial


<style>
  
font-family: Arial;
font-size:20px;
font-weight: 50px;
color:#00ff00;
  
</style>
<!--
or you can wrap those attributes like below:-->
<style>
font: oblique bolder 16px Arial 
</style>

3.3 Text style

color
text-indent
text-decoration
line-height (can achieve top and bottom centering)
vertical-align (center the text relative to the image )


<style>
    /* 
    3 ways to use color
    way 1: english words e.g., green
    way 2: hex #000000-->black #ffffff-->white #ff0000-->red #00ff00-->green
    */
    .text{
        /* color: rgb(0,255,255); */
        color: #0000ff;
        /*indentation*/
        text-indent: 2em;
        text-decoration: dotted;
        line-height: 30px;
        
    }
    .text img{ 
        /*relative centered*/
        vertical-align: middle;
        width: 60px;
    }
</style>
<body>
    <p class="title"> 
        MySQL HeatWave
    </p>
    <p class="text">
        <img src="img/1.png" alt="">  
        MySQL HeatWave is a fully managed service that enables customers to run OLTP, OLAP, and machine learning workloads directly from their MySQL Database. HeatWave boosts MySQL performance by 5400x.
    </p>
</body>

3.4 Hyper link pseudo-class

a:hover{}
a:link{}
a:visitied{}
5rta:active{}

3.5 Shadow

text-shadow: horizontal offset, vertical offset, color

3.6 List style

Delete dots of list


list-style-type:none;

Add img into list


background-image: url("../img/right.png");/*img src*/
background-repeat: no-repeat;/*tiling*/
background-position: 206px 9px;/*img position*/
/*or you can do like this way:*/
background:bisque url("../img/amazonlog.png") 200px -4px no-repeat;

3.7 Gradient


/*Set the width and height of a body to prevent it from having a grid*/
width: 2000px;
height: 2000px;
background: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);

https://www.grabient.com/

4. Box model

Margin, boarder, padding

5. Display and Float

Standard document flow: top down
Block element: h1-h6, p, div, list
Inline-block: span, img, stronger

5.1 Display

Inline elements can be contained within block-level elements, but not vice versa --> display can change this,e.g.,


<style>
    div{
        width: 50px;
        height: 50px;
        border: 1px solid red;
        /* change to inline element */
        display: inline;
    }
    span{
        width: 50px;
        height:50px;
        border: 1px solid red;
        /* change to inline-block element */
        display: inline-block;
    }
</style>

5.2 Float


/*float to left*/
float: left; 
/*clear float*/
clear: both;

5.3 Father element border collapses - The position of the floating element changes as the page size changes

Solution1: Increase the height of father elements
Solution2:
1. add a empty div after floating elements
2. clear floating

Solution3: overflow


#father{
  overflow:hidden;
}

Solution4: add a psuedo-class after father (most popular)


#father after{
  content:'';
  dispaly: block;
  clear:both;
}

5.4 display vs. float

Display: can not determine direction, but no collpase issues
Float: can determine direction, but there is collpase issue --> solutions(above 4)

6. Position

6.1 Relative positioning

Offeset from its original position
Still in the standard documentation flow


position:relative;
top:-20px;/*offset up*/

Practice


<style>
    .father{
        width: 300px;
        height: 300px;
        border:1px solid red;
        margin: 0 auto;
    }
    div[class^=p]{
        width: 100px;
        height: 100px;
        display: block;
        background-color: pink;
        text-align: center;
        line-height: 100px;
        /* border:1px solid red; */
    }
    div[class^=b]{
        width: 100px;
        height: 100px;
        display: block;
        background-color: blue;
        text-align: center;
        line-height: 100px;
        position: relative;
        top:-300px;
        left:100px;
    }
    /* .p1{position: relative;} */
    .p2{position: relative;left:200px;top:-100px;}
    /* .p3{} */
    .p4{position: relative;left:200px;top:-100px;}
    .father a:hover{
        color: yellow;
    }

6.3 Absolute positioning and Fixed positioning

Abosolute: offset relative to the browser or father element, out of standard document flow

Fixed: positioning in a fixed position

Example：


<style>
    body{
        height: 1000px;
    }
    div:nth-of-type(1){
        width: 100px;
        height: 100px;
        background-color: red;
        position:absolute;
        right: 0;
        bottom: 0;
    }
    div:nth-of-type(2){
        width: 50px;
        height: 50px;
        background-color: green;
        position: fixed;
        right: 0;
        bottom: 0;
    }
</style>

6.4 Z-index


x
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
    <div class="box">
    <img src="./img/a.jpeg" alt="">
    <ul>
        <li id="z">Z-Index</li>
        <li id="b"></li>
    </ul>
    </div>
</body>
</html>


xxxxxxxxxx
.box{
    width: 500px;
    height:194px;
    border:1px solid red;
}
ul{
    margin:0;
    padding: 0;
}
ul li{
    list-style: none;

}
#z{
    color: white;
    position: relative;
    top:-20px;
    z-index: 99;
}
#b{
    width: 500px;
    height:25px;
    background:blue;
    position:relative;
    top:-40px;
}

Search This Blog

Font-end development study notes

CSS - Fundamental