CSS basic syntax: selector, common element attributes, box model, flexible layout

1, What is CSS

  • HTML only describes the skeleton structure and content of the page. CSS can describe the style of the page and further beautify the page

  • Cascading style sheets
    CSS can accurately control the layout of the element position in the web page at the pixel level, realize the effect of beautifying the page, and separate the style and structure of the page

  • Specifically, it describes the elements of any web page, size / position / font / color / background / border
    The introduction of CSS can make a page look good. CSS is more "art" than technology

2, CSS syntax

1. CSS basic syntax specification

Each CSS statement consists of two parts: selector + applied properties

  • The selector determines who to modify
  • The declaration decides what to modify
  • Inside {} is the key value pair structure, which represents various properties in CSS
    • The declared attribute is a key value pair, which is used; Distinguish key value pairs, using: distinguish keys and values
    • It is customary to have one line for each key value pair, and it is customary to add a space after the colon
    • Each key value pair corresponds to a CSS attribute
  • Use / * / ctrl as quick comment (not supported)//
<style>
	p {
		/* Set font color */
		color: red;
		/* Set font size */
		font-size: 30px;
	}
</style>

<p>hello</p>

p is the selector, which means to select all p tags in the page

CSS code can be placed in HTML files (usually in style tags), and style tags can be placed anywhere in HTML

2. Introduction of CSS

2.1. Internal style sheet

It is written in the style tag and embedded inside the html
In theory, style can be put anywhere in html, but it is usually put in the head tag

Advantage: this can separate the style from the page structure
Disadvantages: the separation is not complete enough, especially when there are many css contents

The code written above mainly uses this method, which is not commonly used in actual development
PS: Sogou search still retains this way of writing

2.2. Inline style sheet / inline style

  • Use the style attribute to specify the style of a label

  • It is only suitable for writing simple styles and only works for a label
    Disadvantages: you can't write too complex styles, which will be very messy

  • This inline style belongs to a special usage (usually used with JS). The inline style is only effective for the current element

    (you don't need to write selector or {}, just write CSS attribute and value directly)

<p style="color: red;">test</p>
<p>test</p> <!-- Will not be affected --> 

This writing method has higher priority and will overwrite other styles

red color is overwritten:

<style>
	div {
		color: red;
	}
</style>

<div style="color:green">Want to live, You always have to have a little green on your head</div>

2.3 external style

The most commonly used method in actual development

  1. The css code is extracted separately and put into one css file
  2. Then, in the html code, the CSS file is introduced through the link tag

In this way, multiple HTML can reuse the same style
For example, if you write a website, there may be many pages in the website, and these page styles are similar

Note: don't forget to call CSS with the link tag, otherwise it won't take effect
This writing method is similar to defining a method in Java, which not only needs to be defined, but also needs to be called

1. Create style css:

p {
    color : rgb(8, 147, 240);
}

2. Introduce css with link tag:

<link rel="stylesheet" href="style.css"> <!-- stay head in -->

This kind of link tag is usually put into the head tag of html. This tag can exist in multiple copies (different css can be introduced through multiple links)

At the same time, the developer tool will also remind us which css this style is introduced from, and 2 is the line number

  • Advantage: style and structure are completely separated
  • Disadvantages: affected by the browser cache, the modification may not take effect immediately
  • About caching:
    • This is a common technical means to improve the performance of computers
    • The resources that web pages depend on (images / CSS / JS, etc.) are usually obtained from the server. If you visit the website frequently, these external resources do not need to be obtained from the server repeatedly. You can use the cache to save them first (that is, they are stored on the local disk), so as to improve the access efficiency
    • You can use ctrl + F5 to force the page to refresh and force the browser to retrieve the css file

The most commonly used style in work is the external style. We mainly study here in the form of internal style label, because style is relatively simple

3. Code style

  • Compact style
  • Deployment style (recommended)

There are more line breaks. Although it is friendly to the program ape, the overall CSS file will become larger, because CSS files are transmitted to the browser through the network and then parsed by the browser
If the CSS file becomes larger, it will eat more network bandwidth, which will affect efficiency
Therefore, when we look at other websites through developer tools, their CSS is generally in this compact style. We actually use a loose line feed style in the stage of code development,
In fact, it is automatically replaced by third-party tools (front-end packaging tools)

Not only CSS, but also JS is even more crazy (JS will not only kill indents and line breaks, but also replace long variable names with short names such as a, B, C, d)

4. Style case

HTML and CSS are case insensitive. It is customary to use lowercase when writing code~~

Because lowercase is used uniformly, there is no "Hump nomenclature" in CSS“
The word "spine" - is usually used to name the spine

Spinal nomenclature is not common in daily development. In most programming languages, variable names are not allowed to use - Symbols (to prevent confusion with minus / symbols),
But CSS can't perform operations or represent logic... So - it's equivalent to empty out

Space specification:

  • Colon followed by space
  • There is also a space between the selector and {

3, Selector

Functions of selector:

  • Select the label element specified in the page

Select the element before setting the attribute of the element
For example, in games like SC2 and War3, you need to select a unit first and then command the unit to act

CSS selector reference manual

CSS selector reference manual

Type of selector:

  • The following content is only the selector supported in CSS2 standard, and some supplements have been made in CSS3, which we will talk about later

1. Base selector: a single selector

  • tag chooser
  • Class selector
  • id selector
  • Wildcard selector

2. Compound selector: comprehensive application of various basic selectors

  • Descendant Selectors
  • Child selectors
  • Union selector
  • Pseudo class selector

There are many kinds of selectors in CSS

1. Base selector

1.1 label selector

characteristic:

  • It can quickly select the same type of labels, but it cannot be differentiated

It will take effect for all p

<style>
	div {
		color: red;
	}
</style>  

1.2 class selector

characteristic:

  • Differentiation represents different labels
    You can use the same label for multiple labels

Syntax details:

  • Class names are used initial
  • The tag below uses the class attribute to call
  • A class can be used by multiple tags, and a tag can also use multiple classes (multiple class names should be separated by spaces, which can make the code more reusable)
  • If it is a long class name, you can use - split
  • Do not use pure numbers, or Chinese, and tag names to name class names

Through the class selector, you can choose any desired element at will (theoretically, as long as there is such a selector is enough)

Code example: first, you need to create a class name in the CSS code
In the corresponding html element, the class name is referenced through the class attribute. At this time, the elements with the class name will apply the relevant CSS attributes

<body>
    <style>
        /* . The beginning is the class name in CSS */
        .green {
            color: green;
            font-size: 20px;
        }
    </style>

    <!-- use class When the attribute is imported, it does not need to be written . -->
    <p class="green">hello C</p>
    <p class="green">hello Java</p>
    <p>hello C++</p>
    <p>Python</p>
</body>

Code example: using multiple class names

<body>
    <style>
        .box {
        width: 200px;
        height: 150px;
        }
        .red {
        background-color: red;
        }
        .green {
        background-color: green;
        }
    </style>
    
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

Although class selectors can be done all by themselves, many other selectors have been introduced to make the code easier to write
This is similar to having a CPU and a GPU

1.3 id selector

  • Use # beginning in CSS to indicate id selector
  • First, set an id attribute for the selected element. The value of the id selector is the same as that of an element in html
  • The element id of html does not have to be#
  • id is unique and cannot be used by multiple tags. id selector can only select one element, not multiple (the biggest difference between id selector and class selector)
	<style>
        #cpp {
            color: red;
        }
    </style>

    <p>hello C</p>
    <p>hello Java</p>
    <p id="cpp">hello C++</p>
    <p>Python</p>

1.4 wildcard selector

Use the definition of * to select all tags on the page without being called by the page structure

* {
	color: black;
}

The biggest use is to cancel the default style of the browser. The default style is different for different browsers

Browser default style:

The default font size in the chrome: p tag is 14px, with 16px up and down margins by default, which is not necessarily true for other browsers

Therefore, in front-end development, our pages are required not to rely on the default style

Common writing methods:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

Summary of basic selector:

effectcharacteristic
tag chooser All the same labels can be selectedNon differentiated choice
Class selector One or more labels can be selectedAccording to the demand, it is the most flexible and commonly used
id selectorCan you choose a labelThe same id can only appear once in an HTML
Wildcard selectorSelect all labelsUse under special circumstances

2. Compound selector

2.1 offspring selector

It is also called inclusion selector. Through the combination of multiple selectors, you can select the child / grandchild element (descendant element) in an element

Element 1 is the parent and element 2 is the child. Only element 2 is selected without affecting element 1

Selector 1 selector 2 {style declaration}

1) There must be a space in the middle

  • There are spaces ul Name: look in the ul tag to see if there is an element with class name
    No spaces ul Name: find the element with ul class name at the same time

2) Selectors 1 and 2 can all be tag Selectors / class Selectors / id selectors

Code example: change the color of li in ul without affecting ol

	<style>
        ul li {
            color: red;
        }
    </style>

    <ul>
        <li>test</li> <!-- in the light of ul-->
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ol>
	<style>
        ul .name {
            color: red; /* The first li of ul */
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Code example: element 2 is not necessarily a son, but also a grandson

	<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>
		ul li a {
            color: red;
        }
        perhaps
        ul a {
            color: red;
        }

Code example: it can be any combination of basic selectors (including class selector and id selector)

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>	
.one li a {
	color: green;
}

2.2. Sub selector

  • It is similar to the descendant selector, but only child tags can be selected, only parent sons, not grandchildren
  • Split with greater than sign,

Selector 1 > selector 2 {style declaration}

Example 1: for the first li in ul, it is the same as the descendant selector

	<style>
        ul>.name {
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Example 2: difference between and descendant selector

Descendant: links 1 and 2 can be selected

	<style>
        ul a {
            color: red;
        }
    </style>

    <div class="two">
		<a href="#"> link 1</a>
		<p><a href="#"> link 2</a></p>
	</div>

Sub selector: if it is changed to UL > A, only link 1 is selected, because the sub selector cannot select grandchildren

	<style>
        ul>a {
            color: red;
        }
    </style>

practice:

1. Change the "kitten" in the following code to red

<div class="cat">
	<ul>
		<li><a href="#"> kitten</a></li>
		<li><a href="#"> kitten</a></li>
		<li><a href="#"> kitten</a></li>
	</ul>
</div>

CSS:

.cat ul li a {
	color: red;
}

2. Change the "kitten" in the following code to red

<div class="cat">
	<a href="#"> kitten</a>
	<ul>
		<li><a href="#"> puppy</a></li>
		<li><a href="#"> puppy</a></li>
	</ul>
</div>

Use Emmet shortcut to generate the above html code: cat>a+ul>li*2>a

CSS:

.cat>a {
	color: red;
}

2.3 union selector

  • Write multiple selectors side by side, separated by commas
  • The union selector here can write simple selectors or compound selectors
  • The union selector is recommended to be written vertically, and each selector occupies one line (the last selector cannot be added with a comma)

Element 1, element 2 {style declaration} indicates that both element 1 and element 2 are selected

Example: select ul and ol, but do not include the a tag

	<style>
        ul>li,
        ol>li>a {
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ol>

2.4. Pseudo class selector

1) , link pseudo class selector

  • a: Linkselect a link that has not been visited
  • a:visited select the links that have been visited
  • a:hover select the link over which the mouse pointer hovers
  • a:active selects the active link (the mouse is pressed but does not pop up)

Demonstrate hover and active:

	<style>
        div {
            color: red;
        }

        /* Apply this style when hovering: */
        div:hover {
            color: gold;
        }

        /* Apply this style when the mouse is pressed: */
        div:active {
            color: green;
            font-size: 20px;
        }
    </style>

    <div>This is a div</div>

Demo link and visited:

How to restore a link that has been visited to an unreached state?
Just clear the browser history ctrl + shift + delete

		a:link {
            color: black;
            /* Underline the a label */
            text-decoration: none;
        } 
        a:visited {
            color: green;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: blue;
        }

		<a href="#"> kitten</a>

matters needing attention:

  • Writing in the order of LVHA, such as taking active to the front, will lead to active failure Memory rule "greening"
  • Browser a tags have default styles, which need to be developed separately
  • The actual development mainly makes a style for the link, and then makes a style for hover Link, visited and active are not used much
a {
	color: black;
} 
a:hover {
	color: red;
}

2) , force pseudo class selector

Select the input form element that gets the focus

<div class="three">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>
.three>input:focus {
	color: red;
}

The font of the selected form will turn red

Summary of composite selector:

selectoreffectmatters needing attention
Descendant Selectors Select descendant elementIt can be a grandson element
Child selectors Select child elementYou can only choose your own son, not your grandson
Union selectorSelect elements of the same styleBetter code reuse
Link pseudo class selectorSelect links in different statesFocus on mastering the writing method of a:hover
: focus pseudo class selectorSelect the selected elementFocus on input:focus

4, Common element attributes

Reference documents:

CSS selector reference manual

MDN document

  1. Font family
  2. Font size -
  3. Font weight
  4. Font style font style text is tilted. It is mainly used to cancel the tilt

1. Font properties

1.1. Set font:

  • Multiple fonts are separated by commas (find the font from left to right, and use the default font if none is found)
  • If there are spaces in the font name, use quotation marks to wrap it
  • It is recommended to use common fonts, otherwise the compatibility is not good
	<style>
        .one {
            font-family: "Microsoft YaHei";
        }

        .two {
            font-family: "Song style";
        }
    </style>

    <div class="one">
        it is well
    </div>
    <div class="two">
        it is well
    </div>

When setting the font, you need to ensure that the font you set exists on the other party's machine. The system has some fonts by default. There may also be some additional third-party fonts. If you want to use this third-party font, you have to make sure it is on the other party's machine

You can also load font files from the network through the link attribute in html

1.2. Size:

  • The default font size of different browsers is different. It's best to give an explicit value (the default value of chrome is 16px)
  • You can use font size for the body tag
  • Pay attention to the unit px and don't forget
  • The size of the title label needs to be specified separately
  • Note: in fact, it sets the height of the character box in the font; The actual character glyph may be higher or lower than these boxes
p {
	font-size: 20px;
}

1.3. Thickness:

  • You can use numbers or words to indicate thickness
  • 700 == bold, 400 is constant thickness, = = normal
  • The value range is 100 - > 900
p {
	font-weight: bold;
	font-weight: 700;
}

1.4 text style:

/* Set tilt */
font-style: italic;
/* Cancel tilt */
font-style: normal;

Rarely tilt a text, but often change the em / i label to not tilt

2. Text properties

2.1 text color:

RGB:

  • Our monitor is composed of many "pixels". Each pixel is regarded as a point, which can reflect a specific color,

  • We use R (red), G (green) and B (blue) to represent the color * * (three primary colors of color and light * *), and the three colors can be mixed in different proportions to produce various colorful effects

  • In the computer, the three components R, G and B are represented by one byte respectively (8 bits, representing the range of 0-255 and hexadecimal representing 00-FF),

  • The larger the value, the thicker the color of the component, and 255, 255 and 255 represent white; 0, 0, 0 means black

Set text color:

Hover over the color of vscode and a color selector will appear. You can adjust the color manually

  • color: red;

  • color: #ff0000;

    • The hexadecimal form represents the color. If two are the same, one can be used to represent #ff00ff = > #f0f
  • color: rgb(255, 0, 0);

    • Take QQ screenshot with its own color finder to check the RGB value of each color
  • rgba has multiple components, and alpha represents transparency

2.2 text alignment:

  • Controls the horizontal alignment of text
  • It can not only control the text alignment, but also control the center or right of elements such as pictures
  • Text align: [value];
    • Center: center alignment
    • Left: align left
    • Right: align right
	<style>
        .one {
            text-align: left;
        }

        .two {
            text-align: center;
        }

        .three {
            text-align: right;
        }
    </style>

    <div class="one">This is a passage</div>
    <div class="two">This is a passage</div>
    <div class="three">This is a passage</div>

2.3 text decoration

Text decoration: [value]; Common values

  • Underline underline [common]
  • none nothing You can underline the a label
  • Underline [not commonly used]
  • Line through strikethrough [not commonly used]
	<style>
        .text-decorate>a {
            text-decoration: none;
        }
        .text-decorate>.one {
            text-decoration: none;
        }
        .text-decorate>.two {
            text-decoration: underline;
        }
        .text-decorate>.three {
            text-decoration: overline;
        }
        .text-decorate>.four {
            text-decoration: line-through;
        }
    </style>

    <div class="text-decorate">
        <a href="#"> de underline links</a>
        <p class="one">Nothing</p>
        <p class="two">Underline</p>
        <p class="three">Upper scribe</p>
        <p class="four">Delete line</p>
    </div>

Underline and strikeout can be set in html tags, which can also be realized through CSS
The underline / strikeout is a style based on CSS, which is more reasonable
For text decoration, the most common usage is not to underline / delete elements, but to remove the existing underline / delete lines, typically for the a tag

For example, the navigation link in station B uses this attribute to remove the underline [can be observed by F12]

2.4 text indentation

  • Controls the indentation of the first line of a paragraph (other lines are not affected)
  • Text indent: [value];
    • Units can be px or em
    • em represents the relative unit. An em is the text size relative to the current element
      em is very useful In some cases, the page allows the user to modify the font size
    • Indent can be negative, meaning indent to the left (which will cause text to pop out)
	<style>
        .text-indent .one {
            /* text-indent: 20px; */
            text-indent: 2em;
        }

        .text-indent .two {
            text-indent: -2em;
        }
    </style>

    <div class="text-indent">
        <!-- div.one -->
        <div class="one">Forward indent</div>
        <div class="two">Reverse indent</div>
    </div>

2.5 row height

Row height refers to the baseline distance between contextual rows

The text displayed in HTML involves these baselines:

  • Top line
  • center line
  • Baseline (equivalent to the penultimate line of English quad)
  • baseline

Content area: the area wrapped by the bottom line and top line, that is, the dark gray background area in the figure below

In fact, the distance between baselines = the distance between top lines = the distance between bottom lines = the distance between center lines

Line height: [value];

	<style>
        .two {
            line-height: 50px;
        }
    </style>

    <div class="one">previous line</div>
    <div class="two">Middle row</div>
    <div class="three">next row</div>

Note 1: line height = top margin + bottom margin + font size

The upper and lower margins are equal. The font size here is 16px, the line height is 40px, and the upper and lower margins are 12px respectively

	<style>
        .line-height .one {
            line-height: 40px;
            font-size: 16px;
        }
    </style>
    
    <div class="line-height">
        <div>previous line</div>
        <div class="one">Middle row</div>
        <div>next row</div>
    </div>

Note: normal is OK

This depends on the implementation of the browser. The normal on chrome is 21 px

Note 3: line height and element height can realize text centering alignment

  • Line height is actually the distance between the top line and the top line of two lines of text (at the same time, this distance is also the distance from the bottom line to the bottom line, from the middle line to the middle line, and from the baseline to the baseline)
  • When setting the row height, it will affect both the upper and lower directions at the same time, and the upper and lower margins are equal
  • Because the row height is equal, the vertical text can be centered based on the row height
    If the height of the element is 150px, you only need to set the line height of the text inside to 150px to achieve the effect of vertical centering of the text
	<style>
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color:coral;
            
            /* Center alignment */
            text-align: center;
            /* Vertical center */
            line-height: 150px;
        }
    </style>

    <div class="one">Center text vertically</div>

3. Background properties

3.1 background color

Background color: [specify color]

  • English words
  • rgb
  • #Hexadecimal digit
  • rgba
  • Transparent background (the background to which the parent element is applied) is transparent by default and can be modified by setting the color
	<style>
        body {
            background-color: grey; /* For body */
        }
        .bgc .one {
            background-color: red;
        }
        .bgc .two {
            background-color: #0f0;
        }
        .bgc .three {
            /* Background transparency */
            background-color: transparent; /* grey referencing parent element */
        }
    </style>
        <div class="bgc">
        <div class="one">Red background</div>
        <div class="two">Green background</div>
        <div class="three">Transparent background</div>
    </div>

3.2 background picture

background-image: url(...);

More convenient to control the position than image (the position of the picture in the box)

be careful:

  1. Do not omit the url

  2. The url can be an absolute path or a relative path

  3. The url can be quoted or not

Note: after setting the background picture, the default is a tiling effect. Just like laying floor tiles, the picture is tiled one by one as a "floor tile"

<style>
       div {
            width: 600px;
            height: 400px;
            color: white;

           background-image: url(flower.jpg);

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>This is a passage</div>

3.3 background tiling

Background repeat: [tile]

Important values:

  • repeat: Tile
  • No repeat: no tiling
  • repeat-x: tile horizontally
  • `repeat-y `: tile vertically

The default is repeat tiling
Background color and background picture can exist at the same time, and the background picture is above the background color

	<style>
       div {
            width: 600px;
            height: 400px;
            color: green;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>This is a passage</div>

3.4 background position

background-position: x y;

Change the position of the picture

There are three styles of parameters:

  1. Location noun: (top, left, right, bottom)
    • If you only use px as the unit, it is not easy to achieve. The effect of "centering" the background image can also be set as a percentage
  2. Exact unit: coordinate or percentage (with the upper left corner as the origin)
  3. Mixed unit: contains both location nouns and precise units

About coordinate system:

In the computer, the plane rectangular coordinate system (Cartesian coordinate system) is often used to represent the position. The plane coordinate system in the computer is generally the left-hand coordinate system (unlike the right-hand system commonly used in high school mathematics, the y-axis points down)

<style>
       div {
            width: 600px;
            height: 400px;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;
           /* background-position: 0 0; top left corner */
            background-position: 100px, 100px; /* Down to the left */

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>This is a passage</div>

be careful:
If both values of the parameter are location nouns, the sequence is independent (top left and left top are equivalent)
If only one location noun is specified, the second one is centered by default (left means horizontal center and top means vertical center.)
If the parameter is an exact value, the first one must be x and the second one must be y. (100 200 means x is 100 and Y is 200)
If the parameter is an exact value and only one value is given, the value must be the x coordinate, and the other is centered vertically by default
If the parameter is a mixed unit, the first value must be x and the second value must be y coordinate (100 center means the abscissa is 100 and the vertical coordinate is 100)
Straight Center)

3.5 background size

Background size: value 1, value 2;

  • Specific values: for example, 40px and 60px indicate that the width is 40px and the height is 60px
  • Percentage: set according to the size of the parent element
  • Special words: length|percentage|cover|contain
    • Cover: the background image is adaptive to the element size, and the background image is filled to a large enough size to make the background image completely cover the background area. Some parts of the background image may not be displayed in the background positioning area.
    • contain: some background colors may leak out. Stretch the picture to the size of the element to end it. Ensure that the background image is always within the element

4. Rounded rectangle

The elements in HTML are rectangular by default. For example, APP logos on mobile phones are rounded

In CSS, the border radius is used to make the border rounded
border-radius: length; —— Length is the radius of the inscribed circle. The larger the value, the stronger the line

4.1 rectangle with one point radian

	<style>
        div {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;

            border-radius: 10px;
        }
    </style>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, repudiandae enim!</div>

4.2. Generate a circle

If you want to get a circle, you can also set it through the same attributes. First, you have to have an existing square. Assuming that the width of the square is 200px, you can set the border radius value to 100px (half of the width)

In addition to writing numbers directly, you can also write 50% with the same effect (50% is calculated based on the width)

	<style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            color: blue;    
            text-align: center;
            line-height: 200px;

			/* Half the width of a square */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
    </style>

    <div>Lorem ipsum dolor</div>

Generate rectangle and fillet

	<style>
        div {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;
            text-align: center;
            line-height: 100px;

            border: 2px solid rgb(35, 12, 167);
            border-radius: 50px;
        }

    </style>

    <div>Lorem ipsum dolor</div>

4.4 expanded writing

Border radius is a compound writing method. In fact, it can be set separately for four corners

border-radius:2em;  

Equivalent to

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;  
border-radius: 10px 20px 30px 40px;  

Equivalent to (in clockwise order)

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;  

5, Chrome debugging tool – view CSS properties

Meaning of Label Page:

  • elements view label structure
  • Console view console
  • Source view source code + breakpoint debugging
  • network to view the front-end and back-end interaction process
  • application view some extended functions provided by the browser (local storage, etc.)
  • Performance, memory, security and lighthouse will not be used for the time being. I won't go into it first

The elements tab uses:

  • ctrl + scroll wheel to zoom, ctrl + 0 to restore the original size
  • Use the upper left arrow to select the element
  • On the right side, you can view the attributes of the current element, including the introduced classes
  • The css attribute of the selected element can be modified on the right For example, you can click the color icon to pop up the color selector and modify the color For example, you can use the arrow keys to fine tune the font size
  • The modification here will not affect the code, and the refresh will restore it
  • If the CSS style is wrong, there will also be a prompt here (yellow exclamation mark)

6, Display mode of element

There are many display modes in HTML and CSS

The focus is on these two:

  • Block level element
  • Inline element

Block level element: one row only, width and height can be set

div, h1-h6, p, ul, li, table...

In line element: it does not monopolize a line, and the width and height cannot be set

span, a, em, i... (understood as a text, the size of the final inline element depends on the internal content ~)

In line block element: it does not monopolize a line, and the width and height can be set

input,img

Modify the display mode of elements through the display in CSS. The common usage is to change the in-line elements into block level elements

	<style>
        a {
            width: 500px;
            height: 300px;
        }

    </style>

    <a href="#"> this is a link</a>
    <a href="#"> this is a link</a>
    <a href="#"> this is a link</a>

	<style>
        a {
            width: 500px;
            height: 300px;

            display: block; /* Change to block level element */
        }

    </style>

    <a href="#"> this is a link</a>
    <a href="#"> this is a link</a>
    <a href="#"> this is a link</a>

display is a special option. none element is not displayed (hidden element)
Although the elements here can still be seen in the developer tool, they will not be displayed on the interface

7, Box model

1. Composition

Each HTML element is equivalent to a rectangular "box"

Equivalent to building a house, the wall of the house is the frame, the distance between the house and the house is the outer distance, the distance between furniture and the wall is the inner distance, and furniture is the content

The box consists of these parts:

  • border
  • Content content
  • Inner margin padding
  • Outer margin

2. border

Example: with border:

	<style>
		div {
            width: 200px;
            height: 100px;
            border: 2px black solid;
        }

    </style>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

Note: setting the border will enlarge the original element

Although it can be expanded, this kind of expansion operation is actually not easy to use (it is easy to change the size of the element after setting the border, which further affects the page layout)

For example, the page width is 500px. There are many pictures in it. Five pictures are in a row, and each picture is 100px wide
As a result, if you add a border to the picture, you may not be able to display five pictures in one line,

When buying a house:
Floor area = in suite interview + pool interview (elevator room)
Area in the set = used area + space occupied by the wall
The blue area is the "use area" and the green area is the "set area"

In actual development, the more common operation is to set the box sizing attribute. For border box, the border set at this time will squeeze the content rather than enlarge the elements

div {
	width: 200px;
	height: 100px;
	border: 10px black solid;
	box-sizing: border-box;
}

Border style:

  • Thickness: border width
  • Style: border style
  • Solid solid border, dashed dotted border, dotted dotted border
  • Color: border color
div {
    width: 200px;
	height: 100px;
	border: 10px black dashed;
	box-sizing: border-box;
}

  • Support abbreviations, no order requirements, border: 1px solid red;
  • You can change any border in four directions border top / bottom / left / right

3. Inner margin padding outer margin margin margin

  • Distance between border and content

  • The default content is placed against the border Use padding to control this distance
    You can add margins to all four directions

    • padding-top
    • padding-bottom
    • padding-left
    • padding-right
  • You can also change any border in four directions

padding: 5px;

Outer margin:

  • Controls the distance between boxes
  • You can add margins to all four directions
    • margin-top
    • margin-bottom
    • margin-left
    • margin-right
	<style>
        div {
            width: 200px;
            height: 100px;
            border: 10px black dashed;
            box-sizing: border-box;
            padding: 5px;
        }

        .one {
            margin-bottom: 10px;
        }
        
    </style>

    <div class="one">This is an element</div>
    <div class="two">This is an element</div>

.one {
	margin-bottom: 10px;
}

.two {
	margin-top: 10px;
}

The outer margin margin will "collapse" in the vertical direction. When the outer margin is set for both elements, the actual outer margin is the larger value of the two, not the sum. There will be no... (directly added...) in the horizontal direction
This is a special case caused by a problem left over by history

Horizontal centering of block level elements:

Based on margin, you can realize the horizontal centering of an element (not the horizontal centering of text)
Horizontal center of text: text align: Center
Vertical center of text: line height = = height
The horizontal center of the element: you can use margin (block level element)
Vertical centering of elements: margin is not very good (we'll talk about it later)

<style>
	.one {
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        
        .two {
            width: 200px;
            height: 200px;
            background-color: green ;
        }
    </style>

    <div class="one">
        <div class="two">
            hello
        </div>
    </div>

Set margin: 0 auto for two;

Set the outer margin of the horizontal direction to auto (browser adaptive), and the effect of horizontal center will be achieved

Compound writing:

You can combine padding in multiple directions [remember all four situations, which are common]

  • padding: 5px; Indicates that all four directions are 5px
  • padding: 5px 10px; Indicates that the upper and lower inner margins are 5px, and the left and right inner margins are 10px
  • padding: 5px 10px 20px; Indicates that the upper margin is 5px, the left and right inner margin is 10px, and the lower inner margin is 20px
  • padding: 5px 10px 20px 30px; Indicates up 5px, right 10px, down 20px, left 30px (clockwise)

8, Elastic layout

1,display:flex

It mainly arranges the position (arrangement) of elements on the page

Most of the attributes described above are set for this element itself, but there are also some elements that affect the relationship between elements
The box model (outer margin) is a part of it, but it is not enough

Flexible layout is to further strengthen this point
The default web page layout is from top to bottom (block level elements occupy one line)
The actual web page needs not only from top to bottom, but also from left to right

	<style>
        .parent {
            /* Make the current element as wide as its parent element */
            width: 100%;
            height: 200px;
            background-color: orange;
        }

        .one, .two, .three {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

    <div class="parent">
        <div class="ont">test</div>
        <div class="two">test</div>
        <div class="three">test</div>
    </div>

Div, as a block level element by default, is exclusive to one row. In order to arrange these div in a horizontal row, elastic layout can be used
Set an attribute for the parent element, display: flex;

  • flex is the abbreviation of flexible box, which means "elastic box"
  • Any html element can be specified as display:flex to complete the elastic layout
  • The essence of flex layout is to add the display:flex attribute to the parent box to control the position and arrangement of the child boxes
  • Note: when the parent element is set to display: flex, the float, clear and vertical align of the child element will become invalid

The default layout method is "vertical" layout. If you need "horizontal" layout, you can use elastic layout

2. flex layout

Through the flex layout, you can adjust the arrangement of child elements

These elements are squeezed on the left corner by default

Horizontal arrangement mode: justify content (set the arrangement mode of sub elements on the spindle). Before using, be sure to determine which direction the spindle is

  • start arranged to the left
  • end arranged to the right
  • Center center
  • Space between lets you have some equal intervals between elements (calculated automatically by the browser)
  • Space around allows elements to have equal intervals between them. There are also intervals on the leftmost and rightmost sides

Vertical arrangement: align items

  • Note: align items can only be implemented for single line elements. If there are multiple line elements, you need to use item contents
.parent {
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: end;
}

.parent {
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-between;
}

.parent {
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-around;
    align-items: end;
}

3. Based on elastic layout, a typical page structure is realized

The three most common operations in flex layout:

  • Set to elastic layout display: flex
  • Set the horizontal direction to arrange justify content
  • Set align items to be arranged vertically (in flex layout, it is generally arranged line by line, not involving multiple lines)
    Based on the above contents, some mainstream page layout effects can be realized:

The realization of this page layout is not just elastic layout
There can also be some other implementation methods, such as based on table, such as based on floating, such as based on grid layout
Grid layout is a relatively new thing, which is not supported by some older browsers
In contrast, flex is more compatible

<!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>Based on elastic layout, a typical page structure is realized</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .container {
            width: 100%;
            height: 600px;
            background-color: white;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .left, .right {
            width: 20%;
            height: 100%;
            background-color:rgb(86, 143, 204);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .container .content {
            width: 60%;
            height: 100%;
            background-color: rgb(119, 187, 139);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .footer {
            width: 100%;
            height: 100px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <div class="nav">
        navigation bar
    </div>

    <div class="container">
        <div class="left">
            Left sidebar
        </div>
        <div class="content">
            Content area
        </div>
        <div class="right">
            Right sidebar
        </div>
    </div>
    
    <div class="footer">
        footer
    </div>

</body>
</html>

Tags: Javascript Front-end JavaEE html css chrome

Posted by phanh on Mon, 02 May 2022 16:42:14 +0300