2016 - 1 - 25 CSS初步

Posted 2020-06-09

 

1.The customising link

   We can change the link‘s style when we move our pointer on the link like that:

    1.1 The " text-decoration:none "means remove the underline !

a:hover{
    color: black;
    background-color: red;
    text-decoration: none;
}

   1.2 Why should we customise links?

     To emphasise to the user where the links are.

 

   1.3 What is the purpose of a CSS selector?

     It connects a set of CSS properties to things in the html document.

   

   1.4 a:hover is a CSS selector to select links that the user is hovering over and we can set a different set of style properties for the link when the user moves the mouse over it.

     

 

   

2.Layout Control

   U can set  classes on anything, and actually if u define the class u can use the class to a different tags .

   And we can set any bit text we want. Especially when we use the span class which allow us to cut in .

   like that :   

.indent {
    margin-left: 50px;
}
.gap_bellow{
    margin-bottom: 100px;
}
  <h1 class = "gap_bellow"><span class = "indent">This is my first page!</span>This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!</h1>

 

 

 

    

3.CSS Media Queries

  Responsiveness can be implemented in CSS with something called CSS Media Queries.

  1. The code means let the body‘s background color be green when brower‘s window has minimum width 1000px  

      And we call the " min-width : 1000px " test !

@media(min-width:1000px){
    body{
        background: green;
    }
}