HTML+CSS basic learning notes

Content overview

CSS learning notes

  1. CSS: Cascading Style Sheets

  2. css document with suffix:. css

  3. The introduction of CSS is as follows: ① inter line style; ② page level CSS; ③ external CSS file.

    <!-- 1. Interline style -->
<p style="width: 30px;height: 30px;background-color: aqua;">Small square</p>

    <html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>CSS Learning notes</title>
		<!-- 2. Page level style -->
		<style>
	        p {
	            width: 30px;
	            height: 30px;
	            background-color: aqua;
	        }
		</style>
	</head>
	<body>
		<p>Small square</p>
	</body>
</html>

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Learning notes</title>
	<!-- 3. Introduce external CSS file -->
    <link rel="stylesheet" href="123.css">
</head>
<body>
    <p>Small square</p>
</body>
</html>

1, CSS selector

<div id="one" class="box">
    <h1 class="header">I'm the title</h1>
    <p class="content">content</p>
    <span>ending</span>
    <div>
	   	<span>123</span>
    </div>
</div>
<div id="two" class="square">Block 1</div>
<p class="square">Block 2</p>

There are several types of selectors that can be used to select the above elements (in HTML documents) and apply CSS styles:

  1. id selector (one-to-one, one-to-one relationship between tag and id name)
    /* Structure is: × + id name */
#one {
	width:30px; height:30px;
}
  2. Class selector (many to many, one-to-one correspondence between label and class name)
    /* The structure is:. + class name */
.square {
	width:30px; height:30px;
}
  3. tag chooser 
    /* Structure is: label name */
div {
	width:30px; height:30px;
}
  4. Wildcard selector (*)
    /* Structure: * (asterisk) */
* {
	color: #f40;
}
  5. attribute selectors 
    /* The structure is: [property name] or [property name = property value]*/
[id] { /* Style tags with id attribute]*/
	width:30px; height:30px;
}
[id="one"] { /* Style tags with id attribute and id value of one]*/
	backgound-color: #f40;
}
  6. Parent-child selector (also known as derived selector)
    /* The structure is: parent element + space + child element +*/
#one span {	/* That is: set the style for all span tags under the tag with id one */
	color: #f40;
}

    ★★ when the browser traverses the parent-child selector, the traversal order is: right to left!

  7. Direct child element selector
    /* Structure is: parent element + "greater than" symbol (>) + child element +*/
#one > span {	/* That is: set the style for the direct child element of the label with id one (that is, the span label with content "end" here) */
	color: #f40;
}
  8. Side by side selector (when the tag selector is side by side with other selectors, you should put the tag selector first!)
    /* The structure is: any selector (condition 1) + any selector (condition 2) (Note: there can be no space between two conditions) */
div.square {	/* That is: set the style for the div label with class name square */
	color: #f40;
}
  9. Group selector (can be used to simplify code)
    /* The structure is: different labels are separated by commas in English. It is better to write in the following format for easy maintenance */
#one .header,
#one .content,
p.square {	/* Namely: */
	color: #f40;
}
  10. Pseudo class selector
    /* The structure is: after the target element, add: ": hover", etc */
.box:hover {	/* That is, when the mouse moves over the element named box of the class, the font color on it changes to "Taobao red" */
	color: #f40;
}

2, CSS weight


★ priority ★:! Important > interline style > ID > class… /Property selector / pseudo class >Tag selector / pseudo element > wildcard selector (Note: class selector and attribute selector's priority are the same, who has the final say in the back!

★ the underlying principle of the above priority is shown in the table below (the browser will calculate whose priority is higher according to their respective weight values):

type Weight value
!important Infinity (positive infinity)
Interline style 1000
id 100
Class / attribute / pseudo class 10
Label / pseudo element 1
wildcard 0

1) CSS weight value is 256 base
2) The higher the weight value is, the higher the priority will be; the weight value is the same, the later one will cover the previous one.

3, Common CSS Styles

  1. typeface

    font-size: 12px;
<!-- be careful:① The default font size of the browser is: 16 px ; ② The font size of general web pages is: 12 px Or 14 px ; ③ Setting the font size actually sets the height of the font.-->
font-weight: bold;
<!--  be careful: font-weight The property values for are: lighter / normal / bold / bolder / 100,200,... ,900(Defines characters from thin to thick. 400 is equivalent to normal，And 700 is equivalent to bold. ) -->
font-style: italic;
<!--  be careful: italic Indicates italics. -->
font-family: arial;
<!--  be careful: font-family Various font styles can be defined. The most commonly used fonts on the front end are: arial(Jobs). -->
color: #f40;
<!--  Note: the setting method of color is:① Pure English words eg: red ；② Color code eg:  #f40 or #ff4400; ③ color function eg:rgb(255, 255, 255)  -->

  2. frame

    border: 1px solid #f40;
/* border-width: 1px;
border-style: solid;
border-color: #f40; */

border-left: 1px;
/* border-right: 2px;
border-top: 3px;
border-bottom: 4px; */

    ★ drawing triangle with border ★


  3. text
    Text align: Center; text alignment (center, left, right)
    Line height: 30px; line height of single line text (height of single line text = height of container ------ vertical center)
    Text indent: 2em; indent first line of text (unit: EM)

    ①[1em = 1 * font-size]
    eg: the line height of the text is 1.2 times the font height (line height: 1.2em;)
    ② Resolution: the number of vertical pixels per inch.
    (a pixel can only display one color unit, and the pixel is a relative unit)

    Text decoration: line through; (attribute values: line through, underline, none, outline)
    cursor: pointer; cursor setting (property values: pointer, help,...)

4, Classification of elements

  1. Row level elements (also known as inline styles) - Inline
    ★ features ★: 1) content determines the position of elements; 2) width and height cannot be changed through CSS.
    eg: span,strong,em,a,del
  2. Block level element block
    ★ features ★: 1) exclusive row; 2) width and height can be changed through CSS.
    eg: div,p,ol,ul,li,form,address
  3. Row level block element - inline block
    ★ features ★: 1) content determines the position of elements; 2) width and height can be changed through CSS.
    eg: img

[note] all elements with inline have character characteristics!!!

5, Development experience

  1. The following is a common development technique: (now define the function in CSS, and then select and match the function in HTML, so as to improve development efficiency and reduce code redundancy.)
  2. Tag selector, often used to initialize Tags:
  3. Wildcard selector, often used to initialize all tags:

6, CSS box model

  1. Inside margin style
    Setting method Meaning of property value
    padding: 6px 6px 6px 6px; Up right down left
    padding: 6px 6px 6px; Up left right down
    padding: 6px 6px; Up down - left and right
    padding: 6px; In all four directions
  2. Outside margin style
    Setting method Meaning of property value
    margin: 6px 6px 6px 6px; Up right down left
    margin: 6px 6px 6px; Up left right down
    margin: 6px 6px; Up down - left and right
    margin: 6px; In all four directions
  3. CSS box model
  4. Calculation of CSS box model
  5. Small example (draw a simple "far view")


    [supplement] < body > < body > has a default margin of 8 px

7, position

  1. Absolute (absolute positioning)
    ★ features ★: 1) positioning away from the original position; 2) positioning relative to the nearest positioned parent; if not, positioning relative to the document.
  2. relative
    ★ features ★: 1) keep the original position for positioning; 2) position relative to your original position.
  3. Fixed (fixed)
    ★ features ★: fix the DOM element in a certain position of the visual window, and its position does not change with the scrolling of the scroll bar.

z-index: this attribute only works in DOM elements with location. This attribute sets the position of a positioning element along the z axis, which is defined as the axis extending vertically to the display area. (a positive number is closer to the user, and a negative number is farther from the user.)

8, Demo (realization: Olympic five rings)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Olympic rings</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrapper {
            position: relative;
            margin: 30px auto;
            width: 340px;
        }
        .top {
            margin: 0 auto;
            width: 100%;
            height: 106px;
        }
        .bottom {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 224px;
            height: 106px;
            margin-left: -112px;
            margin-right: -53px;
        }

        .circle {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
        }
        .circle:first-child {
            margin-left: 0;
        }
        .blue {
            border-color: blue;
        }
        .black {
            border-color: black;
        }
        .red {
            border-color: red;
        }
        .orange {
            border-color: orange;
        }
        .green {
            border-color: green;
        }

    </style>
</head>
<body>
    
    <div class="wrapper">
        <div class="top">
            <div class="blue circle"></div>
            <div class="black circle"></div>
            <div class="red circle"></div>
        </div>
        <div class="bottom">
            <div class="orange circle"></div>
            <div class="green circle"></div>
        </div>
    </div>

</body>
</html>

Tags: Attribute Asterisk IE

Posted on Thu, 25 Jun 2020 07:29:14 -0400 by Eddyon

Hot Tags

©2023 Programmer Help