Web Front-end Development-CSS Cascading Style Sheet

Keywords: Attribute Python Java xml

Articles Catalogue

Introduction to CSS

CSS Cascading Style Sheets define how to display and control HTML elements to beautify HTML pages.

CSS Advantage: In order to enrich the style of web page elements and to separate the content and style of web pages, CSS came into being. With CSS, most of the labels of presentation styles in HTML are discarded. html is only responsible for the structure and content of documents, and the presentation forms are completely handed over to CSS. HTML documents become more concise.

Basic Grammar of CSS

Format: Selector (Attribute: Value; Attribute; Value; Attribute Value;...)

One method of introducing CSS pages is inlining, which uses the style attribute of the tag, and then writes the style directly on the tag.

CSS page introduction method 2: Embedded - through style tags, create embedded stylesheets on the page.

The third method of introducing CSS pages is to use the link tag to link the external style sheet to the page.

Common CSS styles:

Text settings:

  • Set the color of the text, such as: color:red
  • Font-size Sets the size of text, such as font-size: 12px
  • Font-family: font-family:'Microsoft Yahei'
  • Font-style: font-style: font-style:'normal'; font-style:'italic'set text tilt; font-style:'italic' set text tilt.
  • Font-weight Sets whether the text is bold, such as font-weight: bold; Sets bold. Font-weight: normal settings are not coarsened
  • font. Set several attributes of the text at the same time. There are compatibility problems in the order of writing. It is recommended that you write in the following order
  • Line-height sets the underline of the text, such as: line-height: 24px;
  • Text-decoration Sets the underline of the text: e.g. text-decoration: none: Remove the underline of the text
  • Set text-indent to indent the first line of text, such as text-indent:24px to indent the first line of text to 24px
  • Text-align Sets the text level alignment, such as text-align: center Sets the text level to be in the middle

css color representation: there are three main ways to represent css color values:

  1. The color name means, for example, red hongse, gold gold
  2. rgb denotes, for example, rgb (255, 0, 0) denotes red
  3. Hexadecimal numerals, such as ff0000 for red, can be abbreviated as f00

Basic selector

Label selector: This selector has a wide range of influence. It is recommended that it be used in hierarchical selector as far as possible. Give an example:


id selector: the id name of the element can not be repeated, so a style setting top can only correspond to one element on the page, can not be reused, the id name is generally used by the program, so it is not recommended to use id as a selector.

Class selector: Select elements by class name. A class can be applied to multiple elements, and an element can also use multiple classes. It is flexible and reusable. It is the most widely used selector in css. Give an example:

Hierarchical selector: It is mainly used to select the child element under the parent element, or the child element under the child element, which can be combined with the label element to reduce the naming, but also can prevent naming conflicts through the hierarchy. Give an example:


Group selector: Multiple selectors, if you have the same style settings, you can use group selector. Give an example:

Box model


Total width of box:
300 PX (wide)

  • 50px (left + right padding)

  • 50px (left + right border)

  • 50px (left + right margin)
    = 450px

      <style>
      div {
      background-color: lightgrey;
      width:300px;
      border:25px solid green;
      padding: 25px;
      margin: 25px;
      }
      </style>
    
Here is the actual contents of the box. There are 25px inner spacing, 25px outer spacing, 25px green border.

The width of the total element = width + left padding + right padding + left border
+ Right border + left margin + right margin
Total Element Height = Height + Top Fill + Bottom Fill + Top Border
+ Lower Margin + Upper Margin + Lower Margin
The width of the total element = width + left padding + right padding + left border
+ Right border + left margin + right margin
Total Element Height = Height + Top Fill + Bottom Fill + Top Border
+ Lower Margin + Upper Margin + Lower Margin

<style>
div.ex
{ 
width:220px;
padding:10px;
border:50px solid gray;
margin:0px;
}
</style>

<body>
<img src='250 * 250px.gif' width='250' height='250'/>
<div class='ex'>250 pictures above px Wide.
//The total width of this element is also 250px. </div>
</body>

CSS Floating

What is CSS floating?
Float of css moves left or right, and the elements around it are rearranged.
Float is often used for images, but it is also very useful in layout.





CSS refers to cascading style sheets, which define how HTML elements are displayed, just as font labels and color attributes in HTML do. Styles are usually saved in external CSS files. We only need to edit a simple CSS document to change the layout and appearance of all pages.

Application examples

Implementation code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div.container{
            width:100px;
            border:1px solid gray;
            line-height:150%;
        }
        div.header,div.footer{
            padding:0.5em;
            color:white;
            background-color:gray;
            clear:left;
        }
        h1.header{
            padding:0;
            margin:0;
        }
        div.left{
            float:left;
            width:160px;
            margin:0;
            padding: 1em;
        }
        div.content{
            margin-left:190px;
            border-left: 1px solid gray;
            padding: 1em;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="header"><h1 class="header">Western Open Source Technology Center</h1></div>
    <div class="left">
        <ul>
            <li>Python</li>
            <li>JAVA</li>
            <li>C++</li>
            <li>Node.js</li>
        </ul>
    </div>
    <div class="content">
        <h2>Free Web Building Tutorials</h2>
        <p>At W3School.com.cn you will find all the Web-building tutorials you need,from basic HTML to advanced XML,XSL,Multimedia and WAP.</p>
        <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p>
    </div>

    <div class="footer">Copyright 2008 by westos Inverstment</div>
</div>


</body>
</html>

Typical layout cases:

Feature Layout 1: Page Turning (Necessary Knowledge Points: Box Model, Inline Elements)

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;

        }

        .container {
            width: 75%;
            margin: 0 auto;
        }

        .pagination > li {
            list-style: none;
            display: inline-block;
            width: 50px;
            font-size: 12px;
            text-align: center;
            padding: 5px 10px;
            background-color: gold;

        }

        .pagination > li > a {
            text-decoration: none;
            color: black;
        }

        .pagination > li:hover {
            font-size: 110%;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Paging display</h1>
    <ul class='pagination'>
        <li><a href="#">&lt;&lt</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>...</li>
        <li><a href="#">19</a></li>
        <li><a href="#">20</a></li>
        <li><a href="#">21</a></li>
        <li><a href="#">22</a></li>
        <li><a href="#">&gt;&gt</a></li>
    </ul>
</div>
</body>
</html>

Feature Layout 2: Navigation Bar (Necessary Knowledge Points: Box Model, Floating, Location, Font Alignment)

Code implementation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .header{
            width: 100%;
            height:40px;
            background-color: #55a8ea;
            overflow: hidden;
        }
        .header li{
            display: inline-block;
            width: 100px;
            height:40px;
            padding-top: 12px;
            text-align: center;
        }
        .header li:hover{
            background-color: #00619f;
        }
        .header li a{
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }
        .active{
            background-color: #00619f;
        }
    </style>
</head>
<body>
<div class="header">
    <ul>
        <li class="active"><a href="#">Home page</a></li>
        <li><a href="#">Website Construction</a></li>
        <li><a href="#"> Program Development</a></li>
        <li><a href="#">Network Marketing</a></li>
        <li><a href="#">Case presentation</a></li>
        <li><a href="#Contact us</a></li>
    </ul>
</div>
</body>
</html>

Feature Layout 3 Picture List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 470px;
            border: 1px gray solid;
            float: left;
            margin: 10px 10px 30px 10px;


        }

        .detail {
            font-size: 12px;
            height: 30px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="./movie2.jpg">
    <div class="detail">
        Tony Stark (Robert Downey Jr.) was born in a wealthy family in New York. He didn't know as much about hedonism as all the dandy boys. Naturally intelligent, Stark is a remarkable genius. At 17, he graduated from the Department of Electric Power Engineering at MIT and succeeded in finding his own social position with proud achievements - the new owner of his family business, Stark Arms.
        On the contrary, Tony's career was motivated by his parents'unfortunate death. At the age of 21, he began to control tens of billions of dollars of property and gradually established Stark's strong position as the first supplier of arms to the U.S. Army. But Tony's arrogant personality and unscrupulous ways to achieve his goals often cause him a lot of trouble.
        Fortunately, beside him, Virginia Potts (Gwyneth Paltrow), a shrewd, capable and sexy female assistant, always gives herself great care and help.
        But a kidnapping later completely changed Tony Stark's life. When Tony led a team of his men and military observers to test his latest development in a deserted area, he was attacked by terrorists.
        Eventually, Tony woke up in the middle of the chaos, hit by shrapnel, and found a strange device in his chest that sustained his life.
        Dr. Inson, who was the same hostage, used a car electromagnet to absorb the shrapnel inside him and saved Tony Stark's life. Of course, the terrorists who saved him asked Tony Stark to make more powerful weapons for them. A good man does not suffer at present, and a smart Stark will not wait to die.
        So, with the help of Inson, he used the rough equipment and raw materials provided by terrorists to build steel armor for himself in the dark underground base. In the battle with terrorists, Dr. Inson fought for time for Stark to escape and die unfortunately, but he changed Tony's system of control. The idea of building arms to save the world.
    </div>
</div>
<div class="box">
    <img src="./movie2.jpg">
    <div class="detail">
        Tony Stark (Robert Downey Jr.) was born in a wealthy family in New York. He didn't know as much about hedonism as all the dandy boys. Naturally intelligent, Stark is a remarkable genius. At 17, he graduated from the Department of Electric Power Engineering at MIT and succeeded in finding his own social position with proud achievements - the new owner of his family business, Stark Arms.
        On the contrary, Tony's career was motivated by his parents'unfortunate death. At the age of 21, he began to control tens of billions of dollars of property and gradually established Stark's strong position as the first supplier of arms to the U.S. Army. But Tony's arrogant personality and unscrupulous ways to achieve his goals often cause him a lot of trouble.
        Fortunately, beside him, Virginia Potts (Gwyneth Paltrow), a shrewd, capable and sexy female assistant, always gives herself great care and help.
        But a kidnapping later completely changed Tony Stark's life. When Tony led a team of his men and military observers to test his latest development in a deserted area, he was attacked by terrorists.
        Eventually, Tony woke up in the middle of the chaos, hit by shrapnel, and found a strange device in his chest that sustained his life.
        Dr. Inson, who was the same hostage, used a car electromagnet to absorb the shrapnel inside him and saved Tony Stark's life. Of course, the terrorists who saved him asked Tony Stark to make more powerful weapons for them. A good man does not suffer at present, and a smart Stark will not wait to die.
        So, with the help of Inson, he used the rough equipment and raw materials provided by terrorists to build steel armor for himself in the dark underground base. In the battle with terrorists, Dr. Inson fought for time for Stark to escape and die unfortunately, but he changed Tony's system of control. The idea of building arms to save the world.
    </div>
    <br/>
</div>
<div class="box">
    <img src="./movie2.jpg">
    <div class="detail">
        Tony Stark (Robert Downey Jr.) was born in a wealthy family in New York. He didn't know as much about hedonism as all the dandy boys. Naturally intelligent, Stark is a remarkable genius. At 17, he graduated from the Department of Electric Power Engineering at MIT and succeeded in finding his own social position with proud achievements - the new owner of his family business, Stark Arms.
        On the contrary, Tony's career was motivated by his parents'unfortunate death. At the age of 21, he began to control tens of billions of dollars of property and gradually established Stark's strong position as the first supplier of arms to the U.S. Army. But Tony's arrogant personality and unscrupulous ways to achieve his goals often cause him a lot of trouble.
        Fortunately, beside him, Virginia Potts (Gwyneth Paltrow), a shrewd, capable and sexy female assistant, always gives herself great care and help.
        But a kidnapping later completely changed Tony Stark's life. When Tony led a team of his men and military observers to test his latest development in a deserted area, he was attacked by terrorists.
        Eventually, Tony woke up in the middle of the chaos, hit by shrapnel, and found a strange device in his chest that sustained his life.
        Dr. Inson, who was the same hostage, used a car electromagnet to absorb the shrapnel inside him and saved Tony Stark's life. Of course, the terrorists who saved him asked Tony Stark to make more powerful weapons for them. A good man does not suffer at present, and a smart Stark will not wait to die.
        So, with the help of Inson, he used the rough equipment and raw materials provided by terrorists to build steel armor for himself in the dark underground base. In the battle with terrorists, Dr. Inson fought for time for Stark to escape and die unfortunately, but he changed Tony's system of control. The idea of building arms to save the world.
    </div>
</div>
<div class="box">
    <img src="./movie2.jpg">
    <div class="detail">
        Tony Stark (Robert Downey Jr.) was born in a wealthy family in New York. He didn't know as much about hedonism as all the dandy boys. Naturally intelligent, Stark is a remarkable genius. At 17, he graduated from the Department of Electric Power Engineering at MIT and succeeded in finding his own social position with proud achievements - the new owner of his family business, Stark Arms.
        On the contrary, Tony's career was motivated by his parents'unfortunate death. At the age of 21, he began to control tens of billions of dollars of property and gradually established Stark's strong position as the first supplier of arms to the U.S. Army. But Tony's arrogant personality and unscrupulous ways to achieve his goals often cause him a lot of trouble.
        Fortunately, beside him, Virginia Potts (Gwyneth Paltrow), a shrewd, capable and sexy female assistant, always gives herself great care and help.
        But a kidnapping later completely changed Tony Stark's life. When Tony led a team of his men and military observers to test his latest development in a deserted area, he was attacked by terrorists.
        Eventually, Tony woke up in the middle of the chaos, hit by shrapnel, and found a strange device in his chest that sustained his life.
        Dr. Inson, who was the same hostage, used a car electromagnet to absorb the shrapnel inside him and saved Tony Stark's life. Of course, the terrorists who saved him asked Tony Stark to make more powerful weapons for them. A good man does not suffer at present, and a smart Stark will not wait to die.
        So, with the help of Inson, he used the rough equipment and raw materials provided by terrorists to build steel armor for himself in the dark underground base. In the battle with terrorists, Dr. Inson fought for time for Stark to escape and die unfortunately, but he changed Tony's system of control. The idea of building arms to save the world.
    </div>


</div>


</body>
</html>

Design sketch:

Example - Simple Page Making:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 1px solid red;
            width: 500px;
            height: 345px;
        }
        .box2{

            width: 90px;
            height: 20px;
            text-align: left;
            font-size: 20px;
            font-weight:bold;
            /*float: left;*/
            margin: 10px 80px;
        }
        .box3{
            width: 212px;
            height: 239px;
            float: left;
            margin-bottom: 20px;
            margin-left: 20px;
        }
        .box4{
            width: 100px;
            height: 130px;
            float: left;
            margin-left: 15px;
            margin-bottom: 50px;
            font-size: 12px;
            font-weight:bold;
            text-align: center;
        }
        .box5{
            width: 100px;
            height: 130px;
            float: left;
            text-align: center;
            font-size: 12px;
            font-weight:bold;
            margin-left: 15px;
        }
        .box6{
            width: 211px;
            height: 107px;
            border: 1px dashed dodgerblue;
            float: left;
            text-align: center;
            font-weight: bolder;
            margin-left: 15px;

        }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        //Na Zha
    </div>
    <div class="box3">
        <img src="movie.jpg" style="width: 212px">
    </div>
    <div class="box4">
        <img src="movie1.jpg" style="width: 100px">
        //Na Zha
    </div>
    <div class="box5">
    <img src="movie1.jpg" style="width: 100px">
        //Na Zha
    </div>

    <div class="box6">
        <br/>
        //National Man Box Office Champion <br/>
        <br/>
        <hr/>
        //National Man Box Office Champion
    </div>
</div>
</body>
</html>

Design sketch:
Example 2: Simple Landing Interface Making
Implementation code:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<form>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .login{
            border:1px solid deepskyblue;
            width : 368px;
            height: 420px;
            background-color: white;
            float: right;
            margin: 100px 58px

        }
        .login li{
            display: inline-block;
            text-align: center;
            margin: 40px 60px;
            overflow: hidden;

        }
        .login li a{
            text-decoration: none;
            font-size: 16px;
        }
        .other li{
            display: inline-block;
            text-align: center;
            margin: 30px 69px;
            overflow: hidden;

        }
        .other li a{
            text-decoration: none;
            font-size: 10px;
        }
        tr{
            color: deepskyblue;
        }
        .input{
            border: 1px solid deepskyblue;
            width: 248px;
            height: 35px;
            margin: 10px 68px;


        }
        .check{
            height: 15px;
            margin: 5px 75px;
            text-align: left;


        }
        .input[type=submit]{
            text-align: center;
            background-color: deepskyblue;
            width: 218px;
            font-size: 12px;
            margin: 30px 75px;
        }
    </style>
</form>
</head>
<body>
<div class="login">
<ul>
    <li><a href="#"> Wechat Login</a></li>
    <li><a href="#">QQ login</a></li>
</ul>
    <form action="#" method="get">
    <input type="text" name="username" placeholder="Support QQ Number/mailbox/Mobile number login" class="input"><br/>
    <input type="password" name="password" placeholder="QQ Password" class="input"><br/>
    <input type="checkbox" name="auto" class="check">Keep passwords in mind<br/>
    <input type="submit" value="Sign in" class="input">
    </form>
<div class="other">
<ul>
    <li><a href="#"Class=" other "> Forget the password</a></li>
    <li><a href="#"Class=" other "> registration</a></li>
</ul>
</div>
</div>
</body>
</html>

Achievement effect diagram:

Posted by potato on Fri, 02 Aug 2019 02:14:43 -0700