CSS Notes

9/18/2023 Updated: Finished initial css2 notes writing.

Disclaimer: This passage contains notes and insights gathered from atguigu in bilibili. The content is used for educational purposes and attributed to the original authors. I do not claim any ownership over the material. For the full and original content, please visit the css tutorial from atguigu.

CSS General

Genres of Stylesheets

CSS Inline Stylesheets

<p style="color: green;font-size: 80px;">
    Hello World
</p>

CSS Internal Stylesheets

The internal css style can be put anywhere, but we usually put it under <head>

<head>
    ...
    <style>
        h1 {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

CSS External Stylesheets
- The tag <link> should be written in the tag <head>
- rel: it refers to relation to indicate the relation between the current file and the imported file.
- href: it refers to the address of the imported file.

<!-- x.html -->
<head>
    ...
    <link rel="stylesheet" href="./x.css">
</head>

/* x.css */
h1 {
    color: red;
    font-size: 40px;
}

Stylesheet Priority

Inline Stylesheets > Internal Stylesheets = External Stylesheets

Inline Stylesheets and External Stylesheets have same priority; The latter one will overwrite the former one
In the stylesheets, the effects are also based on the order of writtern.

Basic Structure

h1 {
    color: green;
}

/* 
"h1" is the selector.
"{color: green;}" is the declaration block.
"color: green" is a declaration.
"color" is the name of attribution.
"green" is the value of attribution.
*/

CSS Three Characteristics

Cascading
Inheriting
Priority

CSS Normal Selector

Link: Selectors Reference from MDN

Universal Selector

Select all of types to apply with the following styles.

* {
    attr: value;
}

Type Selector

Select a specific type of element to set with styles

/* Select All h1 */
h1 {
    color: orange;
    font-size: 40px;
}

Class Selector

Select elements based on their class to set with styles.

/* Select All elements with class "speak" */
.speak {
    color: red;
    font-size: 30px;
}

One element cannot write multiple class; only one class is allowed.

<h1 class="speak" class="big">hello</h1>

But we can write multiple value separated with space in the class

<h1 class="speak big">hello</h1>

ID Selector

Select element based on its id explicitly to set with styles.

/* Select the Element with id "apple" */
#apple {
    color: red;
    font-size: 60px;
}

id is consist of characters, numbers, underlines, hyphen; use character as the begainning instead of space.
One element can only have one id, and multiple elements cannot have same id.
One element can have id and class at the same time.

CSS Compound Selector

Intersection Selector

Choose those elements fulfilling all conditions.

/* Choose <p> elements in the beauty class */
p.beauty {
    color: red;
}

/* Choose elements in the rich and beauty class */
.rich.beauty {
    color: green;
}

If there is tag name such as <p> or <h1>, we need to put the tag name at the beginning.
We can use id as one of the conditions.
It is impossible to have two different type selector since an element can only belong to one type.
We use most is: type selector + class selector such as p.beauty.

Grouping Selector

Choose elements fulfilling one of the following conditions

/* 
    Choose elements which may be id is hello, 
    may belong to class rich, 
    or class world 
*/

#hello,
.rich,
.world {
    color: red;
}

We can write any forms of selector inside of a grouping selector.
Grouping Selector is usually used for a group of elements that have same styles in order to reduce the volumn of stylesheets.

CSS Combinator

Descendant Combinator

Select descendants of a element.

/* Select all <li> elements in the <ul>*/
ul li {
    color: red;
}

/* Select all <a> elements in the <li> in the <ul> */
ul li a {
    color: orange;
}

/* Select all <li> elements with class "front-end" in class "subject" elements */
.subject li.front-end {
    color: blue;
}

Child Combinator

Only select the son of a element, and no other descendants.

/* Select all children of <div> */
div>a {
    color: red;
}

/* Select all children of the element with class "persons" */
.persons>a{
    color: red;
}

Sibling Combinator

Adjacent Sibling Combinator

Select the following sibling element.

/* Select sibling <p> of <div> */
div+p {
    color: red;
}

/* Another form */
div + p {
    color: red;
}

General Sibling Combinator

Select all sibling elements that are fulfilled.

/* Select all siblings <p> of <div> */
div~p {
    color: red;
}

Attribute Selector

Select all elements that fulfilled with conditions of attributes.

[attr]: select elements having the specific attr.
[attr = "value"]: select elements having same value as the attr.
[attr ^= "value"]: select elements having same beginning words “value” as the value of the attr.
[attr $= "value"]: select elements having same ending words “value” as the value of the attr.
[attr *= "value"]: select elements having same words “value” inside as the value of the attr.

/* Select those having title */
div[title] {
    color: red;
}

/* Select those having same value of title */
div[title ="atguigu"] {
    color: red;
}

/* Select those having "a" begining of title */
div[title ^= "a"] {
    color: red;
}

/* Select those having "u" ending of title */
div[title $= "u"] {
    color: red;
}

/* Select those having "g" inside the title */
div[title *= "g"] {
    color: red;
}

CSS Pseudo-Class Selector

This selector is used for selecting elements in the special status.

Dynamic Pseudo-Class

Following rules: LVHA, and only form elements can use :focus pseudo-class.

/* Select elements <a> without being visited */
a:link {
    color: red;
}

/* Select elements <a> visited */
a:visited {
    color: blue;
}

/* Select elements <a> being hovored */
a:hovor {
    color: green;
}

/* Select elements <a> being clicked */
a:active {
    color: yellow;
}

input:focus,
select:focus {
    color: orange;
    background-color: green;
}

Structural Pseudo-Class

/* Select the first child of element <p> under <div> */
/* It will not select the <p> after <span> shown in the first structure */
/* because of "first-child", <span> is the first child */
div>p:first-child {
    color: red;
}
div>p:last-child {
    color: red;
}
div>p:nth-child(an+b) { /* n starts from 0, but index starts from 1 */
    color: red;
}
div>p:nth-last-child(an+b) {
    color: red;
}
div>p:only-child { /* no other siblings */
    color: red;
}


/* The following means the first element under this type instead of the first child */
div>p:first-of-type {
    color: red;
}
div>p:last-of-type {
    color: red;
}
div>p:nth-of-type(an+b) { /* n starts from 0, but index starts from 1 */
    color: red;
}
div>p:nth-last-of-type(an+b) {
    color: red;
}
div>p:only-of-type { /* no other same type of elements */
    color: red;
}

/* Special Cases */
:root {
    color: red;
}
div:empty {
    color: red;
}

<!-- first structure -->
<div>
    <span>A</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>

-n+3 means selecting first three elements.

Negation Pseudo-Class

:not(selector): Select all elements excluding the one in the parenthesis

Target Pseudo-Class

/* select <div> elements which is an anchor and the <a> is clicked  */
div:target {
    background-color: green;
}

<a href="#hello">World</a>
<div id="world">
    This is Hello World.
</div>

UI Pseudo-Class

:checked the checkbox being checked.
:enable the form element enabled.
:disabled the form element disabled.

Language Pseudo-Class

:lang() this is according to specific language to select elements.

CSS Pseudo-Element Selector

Select some special position of the element.

::first-letter Select the first letter of the element.
::first-line Select the first line of the element.
::selection Select the area of the element that is being selected by the cursor.
::placeholder Select the input prompting information.
::before Select the beginning position of the element to create a children element which needs to indicate content.
::after Select the ending position of the element to create a children element which needs to indicate content.

p::before {
    content: "$";
}
p::after {
    content: ".00";
}

CSS Priority of Selectors

ID Selector > Class Selector > Type Selector > Universal Selector

(a,b,c):
- a: the number of ID Selectors.
- b: the number of Class Selectors, Pseudo-Class Selectors, Attribute Selectors
- c: the number of Type Selectors, Pseudo-Element Selectors
Comparation Rule: compare each digit from left to right until we find the difference between two digits.
- (1,0,0) > (0,2,2)
- (1,1,0) > (1,0,3)
- (1,1,3) > (1,1,2)

inline stylesheets is higher than all selectors.
!important is higher than inline stylesheets.

CSS Attributes

CSS Font Attributes

font-size
- There is a minimum font size for chrome that set by user; the default one is 16px.

font-family

font-family: "Microsoft YaHei",sans-serif;

font-style
- normal: normal style as usual.
- italic: set the font italic (check the designed font first); if no designed font, it will be mandatory to make fonts italic.
- oblique: it will directly make fonts italic.
font-weight
- lighter = 100 ~ 300
- normal = 400 ~ 500
- bold = 600+
- bolder

We can use font as a compound attribute.

p {
    /* the font-family should be the last */
    /* the font-size should be second to the last */
    /* the order of other attributes are not required */
    font: lighter,italic,18px,sans-serif;
}

CSS Text Attributes

color
letter-spacing: control the spacing between every letter. (px)
word-spacing: control the spacing between every word. (px)

text-decoration

none
overline
underline
line-through

div {
    text-decoration: overline dotted green;
    text-decoration: underline wavy red;
}

text-indent can put px as its value to indent a text.
div {
text-indent: 40px;
}
text-align
- left
- center
- right

line-height

normal: default value chosen by browser.
px
number: the final line-height is number times font-size.
%

div {
    line-height: normal;
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}

vertical-align: used for indicating the way of vertical alignment between same line elements or table cells text.
- baseline: default value; make the element baseline is same as parent baseline.
- top: make the top of element align with the top of current line.
- middle: make the middle of element align with the baseline of parental element + half of X.
- bottom: make the bottom of element align with the bottom of current line.

vertical-align cannot control block element such as div.
In the font design, characters will not be set right middle of the line; it will be a little bit downwards.

9/12/2023 Updated:

inline such as <span> and inline-block elements can be set like a text, which means we can use text attributes such as text-align in their parents elements’ style to adjust their positions or other attributes.

Attention in `line-height`

If line-height is too small, words will be overlapped; the minimum of line-height is 0.
line-height can be inherited, and it is better to write number as its value.
Relation between line-height and height
- When setup height, the <div> container has same height value.
- If we did not setup height, then the browser will calculate the height value based on the line-height.

Apply `line-height`

For multiple line text: control the distance between lines.
For single line text: let height equals line-height to make the font become vertical center alignment.
- This is not the absolute vertical center alignment because of the fonts design.

CSS List Attributes

list-style-type: the type of the list sign
- none
- square
- disc
- decimal
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
list-style-position: the position of the list sign
- inside
- outside
list-style-image: customized list sign image
- url("xxx.gif")
list: the compound attribute

CSS Table Attributes

Border

border-width: the width of border
border-color: the color of the border
border-style: the style of the border
- none
- solid
- dashed
- dotted
- double
border: the compound attribute

Other elements can also use these attributes.

Table

The following attributes are only used in table.

table-layout:
- auto: automatically calculate the width by content
- fixed: fixed average width
border-spacing: Only works when border-collapse is separate.
border-collapse:
- collapse
- separate
empty-cells: Only works when border-collapse is separate
- show
- hide
caption-side: the position of caption
- top
- bottom

CSS Background Attributes

background-color: the color of the background
- the default is transparent
background-image: the background image path
- url("xxx.gif")
background-repeat: if the background is repeated or not.
- repeat
- no-repeat
- repeat-x
- repeat-y
background-position: the position of the background
- Horizontal
  - left
  - center
  - right
- Vertical
  - top
  - center
  - bottom
background: the composite attribute

If only one value is written, another value will be center.
x and y are also acceptable; if one value only is written, it will be regarded as x, and y will be center.

CSS Mouse Attributes

cursor docs from MDN

cursor: the style of the cursur
- pointer
- move
- text
- crosshair
- wait
- help
- …

cursor: url("./arrow.png"),pointer;

CSS the Box Model

CSS Length Unit

px
em: it is based on font-size
rem: it is based on <html> font-szie
%: it is based on parental element font-size

(actually it based on the type of attribute. Check details below)

Different Attributes Different Percentage Meaning

In css, we have to set the length unit after the value we set, or it will be invalid.

CSS Element Display Modes

Block

It will occupy one whole line.
default width: the width of parental element.
default height: the height of content.
CSS can adjust width and height.

Main Structure Tags: <html>, <body>
Format Tags: <h1> - <h6>, <hr>, <p>, <pre>, <div>
List Tags: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Table Related Tags: <table>, <tbody>, <thead>, <tfoot>, <tr>, <caption>
<form> and <option>

Inline

It will not occupy an one whole line.
default width: the width of content.
default height: the height of content.
CSS cannot adjust width and height.

Text Tag: <br>, <em>, <strong>, <sup>, <sub>, <del>, <ins>
<a> and <label>

Inline-Block

It will not occupy one whole line.
default width: the width of content.
default height: the height of content.
CSS can adjust width and height.

Image: <img>
Cell: <td>, <th>
Form Elements: <input>, <textarea>, <select>, <button>
Frame Tag: <iframe>

Change Element Display Mode

display: Use this attribute to change the element display mode

none: the element will be hidden.
block
inline
inline-block

Consists of Box Model

CSS will regard all html elements as a box, and all styles are based on the box.

margin: it will only influence the position of the box instead of the size of the box
border
padding
content

Box Model

width/height of box =

width/height of content +

left right/top Bottom padding +

left right/top Bottom border

Content

width: the width of the content area
max-width: the maximum width of the content area
min-width: the minimum width of the content area
height: the height of the content area
max-height: the maximum height of the content area
min-height: the minimum height of the content area

max-width and min-width usually are not used with width together.
max-height and min-height usually are not used with height together.

the total width = parental content − self margin.
the content width = parental content − self margin − self border − self padding.

Padding

padding-top
padding-right
padding-bottom
padding-left
padding: Composite Attribute
- padding: 10px; padding on all directions is 10px.
- padding: 10px 20px; padding on top/bottom is 10px, on left/right is 20px.
- padding: 10px 20px 30px; padding on top is 10px, on left/right is 20px, on bottom is 30px.
- padding: 10px 20px 30px 40px; padding on top is 10px, on right is 20px, on bottom is 30px, on left is 40px.

The value of padding cannot be negative.
The padding of inline element on top/bottom cannot be set perfectly.
The padding of block and inline-block on ALL directions will be perfectly set.

Border

border-style:
- none
- solid
- dashed
- dotted
- double
- …
border-width
border-color
border: the composite attribute

We can also decide the the direction of the border. For example,

border-left: the composite attribute

border-left-style
border-left-width
border-left-color

Margin

General

margin-left
margin-right
margin-top
margin-bottom
margin: the composite attribute

Descendants’ margin is based on parental content since parental content include descendants.
Changing margin top/left will change the position of the element self, but changing margin bottom/right will change the position of the adjacent elements.
block and inline-block can perfectly set up ALL directions of margin, but inline cannot perfectly set up top/bottom of margin.
The value of margin can be auto. If a block element is set left/right margin as auto, the block will be center.
The value of margin can be negative.

Margin Collapse

The first child element’s top margin will be applied to its parental element’s top margin, and the last child element’s bottom margin will be applied to its parental element’s bottom margin.

Solution 1: Set parental element’s padding with non-zero value.
Solution 2: Set parental element’s border-width with non-zero value.
Solution 3: Add overflow: hidden into parental element css style.

Margin Merging

The upper element’s bottom margin will be merged with the lower element’s top margin; then we will choose the bigger value from them.

CSS Overflow

overflow: the way to deal with overflow content.

visible: default value; show everything.
hidden: hide content
scroll: show scroll bar all the time
auto: only show scroll bar when content overflows.

CSS Methods of Hiding Elements

visibility
- show
- hide: the element will be invisible but the space is taken still.
display
- none: the element will be hidden without taking any space.

CSS Styles Heritage

Some styles from parental elements can be inherited by the child element. If child element has that style, it will use self one first; but if it doesn’t have one, it will look at its parental element, then ancestor elements level by level.

font, text (except vertical-align), text-color can be inherited.
border, background, padding, margin, width/height, overflow cannot be inherited.

Rule 1: Those attributes that can be inherited are all no influences on layout, which means that are unrelated with box model.

Rule 2: The default style of elements such as <h1>, <a>, and <p> have higher priority than the style getting heritage. For example, body has default style that margin: 8px;

Layout Practices

Practice 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice-1-sol</title>
    <style>
        .outer {
            width: 400px;
            height:400px;
            background-color: gray;
            overflow: hidden;
        }
        .inner {
            width: 200px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
            margin-top: 150px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            inner
        </div>
    </div>
</body>
</html>

Practice 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice-2-sol</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            text-align: center;
        }
        .inner {
            background-color: yellow;
            line-height: 400px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span class="inner">X</span>
    </div>
</body>
</html>

Practice 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice-3-sol</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            line-height: 400px;
            text-align: center;
            font-size: 0px;
        }
        span {
            font-size: 40px;
            vertical-align: middle;
            background-color: orange;
        }
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>X</span>
        <img src="https://dummyimage.com/100x100/ff4545/c7c95f" alt="img">
    </div>
</body>
</html>

Issue: two inline or inline-block will have a space between each other because there is a <return> between them in source code.

Write them on the same line.
The real reason is because the parental element font-size is not 0px so that the space will be displayed.
1. Set parental element font-size: 0px; and it will cause the children elements inherit the attribute so that these elements will not be displayed.
2. Add font-size attribute in children elements and everything works.

Blank Issues

Blank Between Elements

Reason: The newline between inline and inline-block will be resolved as a space character by browser.
Solution:
- Remove newline or space. (Not Recommand)
- Set font-size: 0 in parent element. (Recommand)

Blank Between `inline` or `inline-block`

Reason: inline-block is aligned with text baseline by default; however, there is a distance between the baseline and bottom of container.
Solutions:
- Set vertical-align as middle, bottom, top in inline-block.
- If parent element only has one image, then set the image as display: block;.
- Set font-size: 0 in parent element.

CSS Float

General

Float is used for implementing the effect that the words surround image at the beginning, but it becomes a popular way to do layout.

Characteristics

Real FLOATING. Not a flat document layout.
No matter which element it is before float, after floating the default width and height of the element will be the content, and programmer can set width and height.
It will not occupy whole line; it may use same line with other elements.
It will not have [margin merging](#Margin Merging), and it will not have [margin collapse](#Margin Collapse); at the same time, it can perfectly set up ALL directions of margin and padding.
It will not be treated as text like inline-block (so that there is no [Blank Issues](#Blank Issues)).

Impacts

Influence on sibling elements: the sibling elements behind the float element will occupy the previous position that the float element stayed, and it will be below the float element; there is no influence on previous siblings.
Influence on the parent element: It cannot support the height of the parent element which will make the parent element be collapsed (because it is FLOATING:) However, the width of the parent element will still limit the float element.

Eliminating the Influence of Float

Set height of parent element to support its height.
Set float on parent element to lead its children elements again.
Set overflow:hidden on the parent element.
Add a block element behind the last float element, and set the block element with clear:both.

Set pseudo-element on parent element to clear the impacts.

.parent::after {
    content: "";
    display: block;
    clear: both;
}

Practice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float-layout-practice-sol</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .container {
            width: 960px;
            /* background-color: gray; */
            margin: 0 auto;
            text-align: center;
        }
        .logo {
            width: 200px;
        }
        .banner1 {
            width: 540px;
            margin: 0 10px;
        }
        .banner2 {
            width: 200px;
        }
        .logo,
        .banner1,
        .banner2 {
            height: 80px;
            background-color: #ccc;
            line-height: 80px;
        }

        .menu {
            height: 30px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 30px;
        }
        .item1,.item2 {
            width: 368px;
            height: 198px;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 198px;
        }
        .content {
            margin-top: 10px;
        }

        .item3,.item4,.item5,.item6 {
            width: 178px;
            height: 198px;
            border: 1px solid black;
            line-height: 198px;
            margin-right: 10px;
        }
        .bottom {
            margin-top: 10px;
        }
        .item7,.item8,.item9 {
            width: 198px;
            height: 128px;
            border: 1px solid black;
            line-height: 128px;
        }
        .item8 {
            margin: 10px 0;
        }
        .footer {
            height: 60px;
            background-color: #ccc;
            margin-top: 10px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="page-header clearfix">
            <div class="logo leftfix">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
        <!-- Menu -->
        <div class="menu">Menu</div>
        <!-- Content -->
        <div class="content clearfix">
            <!-- Left -->
            <div class="left leftfix">
                <!-- Top -->
                <div class="top clearfix">
                    <div class="item1 leftfix">item1</div>
                    <div class="item2 leftfix">item2</div>
                </div>
                <!-- Bottom -->
                <div class="bottom clearfix">
                    <div class="item3 leftfix">item3</div>
                    <div class="item4 leftfix">item4</div>
                    <div class="item5 leftfix">item5</div>
                    <div class="item6 leftfix">item6</div>
                </div>
            </div>
            <!-- Right -->
            <div class="right leftfix">
                <div class="item7">item7</div>
                <div class="item8">item8</div>
                <div class="item9">item9</div>
            </div>
        </div>
        <!-- Footer -->
        <div class="footer">Footer</div>
    </div>
</body>
</html>

CSS Positions

Relative

General

Use position: relative to make the element follow the rule of position.
Adjust left, right, top ,bottom to modify the position.
The adjustment refers to the original position of the element.

Characteristics

It will not get rid of the document flow, and the position change is just visually expressed, which will not have impact on other elements.
Position element has higher priority than normal elements.
- Position element will be definately over other normal elements.
- If there are two more elements turning on position mode, the latter position element will override the former position element.
left cannot set with right, and top cannot set with bottom together.
Relative position element can use float and margin, but it is not recommanded to use them.

In most cases, relative position will be used with absolute position.
relative position element is not the concept of position element talked in the absolute part.

Absolute

General

Use position: absolute
Use left, right, top, bottom to adjust position.
The adjustment refers to its containing block.

What is containing block?

For those elements which did not get rid of document flow: containing block is its parent element.
For those elements which got rid of document flow: containing block is the ancestor element who has position attribute.

Characteristics

It will get rid of document flow, and it will have influence on its sibling and parent elements behind.
left and right cannot be set together. top and bottom cannot be set together.
float cannot be set with position: absolute; if set at the same time, float will be invalid.
margin can be set together with position: absolute but it is not recommanded.
No matter which size of elements, after setting with absolute position, they all become position element.

position element: default width and height will be supported by content, and can be set height and width.

Fixed

General

Use position: fixed
Use left, right, top, bottom to adjust position.
The adjustment refers to its view port.

Characteristics

It will get rid of the document flow, and it will have influence on its sibling and parent elements behind.
left and right cannot be set together. top and bottom cannot be set together.
float cannot be set with position: fixed; if set at the same time, float will be invalid.
margin can be set together with position: fixed but it is not recommanded.
No matter which size of elements, after setting with fixed position, they all become position element.

Sticky

General

Use position: sticky
Use left, right, top, bottom to adjust position, and top is frequently used.
The adjustment refers to the ancestor element which has scrolling mechanism.
- overflow is hidden、scroll、auto or overlay.

References:

Characteristics

It will not get rid of document flow, it is a specific method for the position element under the case of scrolling window.
Sticky position element can use float and margin, but it is not recommanded to use them.
Sticky position and Relative position are similar, but sticky position will fix the element when it arrives at a position.

Hierarchy

Position Element has higher hierarchy than normal elements; ALL Position Elements have same hierarchy.
If two Position Elements overlapped, the latter element will overlap the former one.
Modify z-index to adjust the hierarchy of Position Elements; z-index can only be number without unit.
Only Position Elements can set z-index validly.
If high z-index value of a element cannot overlap the low z-index value of a element, check the z-index value of its containing block.

Special Usage

After setting position: fixed and position: absolute, elements will become position element; its default height and width will be supported by its content, and we can still set the height and width.
After setting position: relative, the element is still previous display mode.
The special usage mentioned below is only for position: absolute and position: fixed element.

width and height of position element is filled with containing block.
- width: Set the left and right of position element as 0.
- height: Set the top and bottom of position element as 0.

position element is vertically aligned in the center of containing block.

Recommended

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

left: 50%;
top: 50%;
margin-left: negative half of width;
margin-top: negative half of height;

    -   Both methods require the `position element` having `width` and `height`.



<br>

## Shopping Web Practice

Web Example: [link](/notes/frontend/css.assets/shopping-web/index.html)

Archived Package: [link](/notes/frontend/css.assets/shopping-web/shopping-web.zip)





<br>

## CSS3 Length Units

-   `vw:` Percentage of the viewport width.
-   `vh:` Percentage of the viewport height.
-   `vmax:` The maximum between `vw` and `vh`.
-   `vmin:` The minimum between `vw` and `vh`.



<br>

## CSS3 Box Attributes

### Box-sizing

`box-sizing:` Set the type of box modeling.

-   `content-box:` `width` and `height` will set the box size of **the content area**.
-   `border-box:` `width` and `height` will set the box size of **the total box area**.



### Resize

`resize` can control if it is allowed for user to adjust the size of elements.

-   `none:` Users are not allowed to modify.
-   `both:` Users can adjust `width` and `height` of the element.
-   `horizontal:` Users can adjust `width` of element.
-   `vertical:` Users can adjust `height` of element.



### Box-shadow

`box-shadow` can add shadow on boxes.

`box-shadow: h-shadow v-shadow blur spread color insert;`

-   `h-shadow:` The position of horizontal shadow **(REQUIRED)**.
-   `v-shadow:` The position of vertical shadow **(REQUIRED)**.
-   `blur:` The blur distance.
-   `spread:` The spread distance of shadow.
-   `color:` The color of shadow
-   `insert:` Change shadow type from **external** to **internal**.



### Opacity

`opacity` can add the effect of transparent. The value is from `0` to `1`; `0` is fully transparent, `1` is fully opaque.

{% note info modern %}

Difference between `opacity` and `rgba`?

1.   `opacity` is an attribute, setting the transparency of **whole element (including the content in the element)**.
2.   `rgba` is a method of color setting, and it can **only adjust color transparency**.

{% endnote %}



<br>

## CSS3 Background Attributes

### Background-origin

`background-origin:` Set the origin position of the background.

-   `padding-box:` Show background image from the `padding` area. **(DEFAULT)**
-   `border-box:` Show background image from the `border` area.
-   `content-box:` Show background image from the `content` area.



### Background-clip

`background-clip:` Set the background image clipping method.

-   `border-box:` The background image will be clipped fter `border` area. **(DEFAULT)**

-   `padding-box:` The background image will be clipped after `padding` area.
-   `content-box:` The background image will be clipped after `content` area.
-   `text:` The background image only appear on the text.

{% note info modern %}

If the value is `text`, the attribute should become `-webkit-background-clip`.

{% endnote %}





### Background-size

`background-size:` Set the size of the background

1.   Use `px` to set the size of background image. Negative number is not allowed.

     `background-size: 300px 200px;`

2.   Use `%` to set the size of background image. Negative number is not allowed.

     `background-size: 100% 100%;`

3.   `auto:` The real size of the background image. **(DEFAULT)**

     `background-size: auto;`

4.   `contain:` Proportionally zoom in or out the image until the width or height of background image is fit in with the width or height of container. **Parital area of container may not have background image**.

     `background-size: contain;`

5.   `cover:` Proportionally zoom in or out the image until the background image **fully cover the container**. **Partial area of background image may not be displayed**.

     `background-size: cover;`





### Background Compound

#### General

`background: color url repeat position / size origin clip`

{% note info modern %}

1.   If the value of `origin` and `clip` are same, they can be set together by only giving one value; But if there are two values, the former one is `origin`, and the latter one is `clip`.
2.   The value of `size` has to be written before the value of `position` by using `/` to separate them.

{% endnote %}



#### Multiple Background Images

```css
background: url(./images/bg-lt.png) no-repeat left top,
            url(./images/bg-rt.png) no-repeat right top,
            url(./images/bg-lb.png) no-repeat left bottom,
            url(./images/bg-rb.png) no-repeat right bottom,

background-image is not allowed to write multiple background images.

CSS3 Border Attributes

Border-radius

border-radius can set the box become circule.

border-top-left-radius: Set the top left radius. One value means circle radius, and two values mean oval x and y radius.
border-top-right-radius: Set the top right radius. One value means circle radius, and two values mean oval x and y radius.
border-bottom-left-radius: Set the bottom left radius. One value means circle radius, and two values mean oval x and y radius.
border-bottom-right-radius: Set the bottom right radius. One value means circle radius, and two values mean oval x and y radius.

border-radius compound attribute.

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / 
               top-left-y top-right-y bottom-right-y bottom-left-y

Outline

outline-width: The width of the outline
outline-color: The color of the outline
outline-style: The style of the outline
- none
- dotted
- dashed
- solid
- double

outline compound attribute.

outline: 50px solid blue;
outline-offset is not sub-attribute of outline; it is an independant attribute.

CSS3 Text Attributes

Text-shadow

text-shadow can be used for adding shadow on text.

h-shadow: The distance of horizontal shadow. It can be negative. (REQUIRED)
v-shadow: The distance of vertical shadow. It can be negative. (REQUIRED)
blur: The blur distance of shadow. (Optional)
color: The color of shadow. (Optional)

White-space

white-space can set the method of new text line.

normal: After text overflows the border, it will have a new line; the new line in the text will be regarded as space. (Default)
pre: Keep original text structure; it is same as tag pre.
pre-wrap: Based on the pre, after the text overflows the border, it will have a new line.
pre-line: Based on the pre, after the text overflows the border, it will have a new line; it will only recognize the new line in text, but the space will be ignored.
nowrap: No new line.

Text-overflow

text-overflow can set the display mode of text.

clip: When the content is overflowed, it will clip that part.
ellipsis: When the content is overflowed, it will replace that part as ....

In order to make text-overflow attribute valid, the block container have to NOT set overflow as visible, and white-space should be nowrap.

Text-decoration

text-decoration becomes a compound attribute in CSS 3.

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color

text-decoration-line: Set the position of the decoration line.
- none
- underline
- overline
- line-through
text-decoration-style: Set the style of the decoration line.
- solid
- double
- dotted
- dashed
- wavy
text-decoration-color: Set the color of the decoration line.

Text-stroke

text-stroke is only supported by webkit browser.

-webkit-text-stroke-width: Set the width of text stroke.
-webkit-text-stroke-color: Set the color of text stroke.
-webkit-text-stroke: Compound attribute to set width and color.

CSS3 Gradient

Linear-gradient

/* The direction of the linear-gradient is from up to down */
background-image: linear-gradient(red, yellow, green);

/* The direction can be set with "to" where */
/* ATTENTION: the second variable in the following is always the start origin */
background-image: linear-gradient(to top, red, yellow, green);
background-image: linear-gradient(to right top, red, yellow, green);
background-image: linear-gradient(30deg, red, yellow, green);

/* Set the position of gradients. */
background-image: linear-gradient(red 50px, yellow 100px, green 150px);

Radial-gradient

/* Normal */
background-image: radial-gradient(red, yellow, green);

/* Set origin position of the center */
background-image: radial-gradient(at right top, red, yellow, green);
background-image: radial-gradient(at 100px 50px, red, yellow, green);

/* Set it as circle */
background-image: radial-gradient(circle, red, yellow, green);

/* Set an oval with specified radius*/
background-image: radial-gradient(100px, red, yellow, green);
background-image: radial-gradient(50px 100px, red, yellow, green);

/* Set the distance of sections */
background-image: radial-gradient(red 50px, yellow 100px, green 150px);

Repeating-gradient

repeating-linear-gradient and repoeating-radial-gradient will make the gradient effects repeatedly.

background-image: radial-gradient(100px, red, yellow, green);

Check here for more details.

Web Fonts

Using @font-face to indicate the address of the font will make browser download the font automatically so that the website will not depend on fonts installed on users’ computers.

/* Simple Method */
@font-face {
    font-family: "kaiti";
    src: url("./kaiti.ttf");
}

/* High Compatible Method */
@font-face {
    font-family: "kaiti";
    font-display: swap;
    src: url("webfont.eot"); /* IE9 */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
        url("webfont.woff2") format("woff2"),
        url("webfont.woff") format("woff"), /* chrome, firefox */
        url("webfont.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android */
        url("webfont.svg#webfont") format("svg"); /* IOS 4.1- */
}

Some size of language characters are huge, and it is unpractical to use complete font file; usually we will do customizations on some characters. Here is one example customization font website: https://www.iconfont.cn/webfont.
iconfont is also a good method to be applied. It is more clear than image, easier to do adjustments, and great compatibility with IE. Here is one example iconfont website: https://www.iconfont.cn.

CSS3 Transform 2D

All transformations will be written into the attribute transform. Example below:

transform: translateX(10px) rotateZ(32deg);

Translate

translateX: Set the translation on the horizontal direction. If the value is percentage, it refers to its own width percentage.
translateY: Set the translation on the vertical direction. If the value is percentage, it refers to its own width percentage.
translate: Compound value for horizontal and vertical.

translate and position: relative is similar that they do not get rid of document flow which will not influence other elements.
Difference between translate and position: relative: position: relative refers to its parent element when the element value is percentage; translate refers to itself when the element value is percentage.
Browser is more efficient on translate instead of position: relative.
translate can be written in chain. transform: translateX(30px) translateY(40px);
translate cannot be set on inline elements.

Using translate and position: relative can realize element horizontal and vertical aligned.

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Scale

scaleX: Set the scale horizontally; 1 means no change in scale.
scaleY: Set the scale vertically; 1 means no change in scale.
scale: Set the scale horizontally and vertically; one value can set both or two values set repectively.

scale supports negative but has less usage.
scale can make the font smaller than 12px. (The default minimum font in most of browser is 12px).

Rotate

rotate: Set the rotation degree; positive value is clock-wise, and negative value is counter clock-wise.

rotateZ(20deg) is equal to rotate(20deg). But after we are in 3D transformation, we can write rotate(x,x,x).

Skew

skewX: Set the element skew on the horizontal direction.
skewY: Set the element skew on the vertical direction.
skew: One value means skewX, two value mean skewX and skewY.

Transform-orgin

When the element transforms, the default origin is the center of the element. transform-origin can set the origin.
Modifying origin will have no influences on translate but have impacts on rotate and scale.
If only provide two values, the first one is used for horizontal coordinate, and the second one is for vertical coordinate.
If only one is provided and it is a px, then it means horizontal coordinate and the vertical coordinate will be 50%; if it is keyword such as left or top, then another one will be 50%.

transform-origin: 50% 50% will change the origin into the center position of the element since percentage refers to itself. (Default)
transform-origin: left top will change the origin into the left-top corner.
transform-origin: 50px 50px will change the origin into the position that is 50px 50px away from left-top corner.
transform-origin: 0, if one value is given, the second one will be 50% by default.

Last Attention:

If there are multiple transformations, we can use one transform to write.

transform: translate(-50%,-50%) rotate(45deg);

It is recommanded to put rotation at the end because it will change the original coordinates.

CSS3 Transform 3D

General

Open 3D Space

Before we do 3D transformation, the parent element needs to open 3D space.

transform-style: flat; It will make the child elements stay at 2D space. (Default)
transform-style: preserve-3d; It will make the child elements stay at 3D space.

Set Up Depth of Field

Depth of field is the distance between observer and z=0 platform, which will make the element that can be 3D transformed obviously.

perspective: none Default value that without depth of field.
perspective: {length} set the distance between observer and z=0 platform. Negative value is not allowed.

perspective should be set in the parent element.

Perspective-origin

The origin of perspective is the position of the observer; also, the default perspective origin is the center of the element.

/* The relative coordinate will be rightward to 400px and downward to 300px. */
/* It is same as the observer went to right direction with 400px and then sit down with 300px. */
perspective-origin: 400px 300px;

Translate

3D translation is based on 2D translation, which let element moves along coordinate z.

translateZ: Set the displacement of the element on coordinate z; the positive value is going out of screen, and the negative value is going inside of the screen. % is not allowed.
translate3d: First parameter is coordinate x, the second parameter is coordinate y, and third parameter is coordinate z. All parameters cannot be omitted.

Rotate

3D rotation is based on 2D rotation, which let elements rotate along coordinate x and y.

rotateX: Set the rotate degree of coordinate x. Positive value is clock-wise; negtive value is counter clock-wise.
rotateY: Set the rotate degree of coordinate y. Positive value is clock-wise; negtive value is counter clock-wise.
rotate3d: First 3 parameters mean x, y, z. The forth parameter means rotation degree.

Scale

3D scale is based on 2D scale, which can make element scaled along coordinate z.

scaleZ: Set proportion on the coordinate z.
scale3d: First parameter is coordinate x, second parameter is coordinate y, and third parameter is coordinate z. All parameters cannot be omitted.

backface-visibility: hidden; will set the back of the element be invisible. User cannot see the back of the element when they element rotate reversely.

Last Attention:

If there are multiple transformations, we can use one transform to write.

transform: translateZ(100px) rotateY(40deg);

It is recommanded to put rotation at the end because it will change the original coordinates.

CSS3 Transition

transition-property: Define which attribute will need transition.
- none: None of attributes.
- all: All of attributes that can be transited.
- {specific attribute name}: width, height.
Not all of attributes can be transited; only the attributes whose value is number or the value that can be changed to numbers such as color, length, %, z-index, opacity, 2D transform, 3D transform, shadow.
transition-duration: Define the duration of the transition.
- 0: No transition time.
- s/ms: second or miliseond.
- list:
  - One Value: All attributes have same duration value.
  - List of Values: All attributes have their own duration value.
transition-delay: Define the delay time, s or ms
transition-timing-function: Set the type of transition
- ease: Smooth transition.
- linear: Linear transition.
- ease-in: slow -> fast.
- ease-out: fast -> slow
- ease-in-out: slow -> fast -> slow
- step-start: Equals to steps(1, start).
- step-end: Equals to steps(1, end).
- steps({integer}, ?): Accept two parameters. First parameter is positive integer to define the steps of function. The second parameter can be start or end to indicate the timing to change. end is Default.
- cubic-bezie({number}, {number}, {number}): Define the motivation. Here is the website for more details.

transition compound attribute:

transition: 1s 1s linear all;

If there is one time set, that means duration. If there are two time set, the first one is duration, the second one is delay. Other values’ order is not required.

CSS3 Animation

Usage

/* Method 1 */
@keyframes animation_name {
    from {
        /* property1: value1; */
        /* property2: value2; */
    }
    to {
        /* property1: value1; */
    }
}

/* Method 2 */
@keyframes animation_name {
    0% {
        /* property1: value1; */
    }
    20% {
        /* property2: value2; */
    }
    40% {
        /* property3: value3; */
    }
    60% {
        /* property4: value4; */
    }
    80% {
        /* property5: value5; */
    }
    100% {
        /* property6: value6; */
    }
}

animation-name: Indicate which animation we will use on the element.
animation-duration: Indicate the duration of animation.
animation-delay: Indicate the deplay of animation.

.box {
    animation-name: {animation_name};
    animation-duration: 5s;
    animation-delay: 0.5s;
}

Other Usages

animation-timing-function: Set the type of animation. The value is listed [here](#CSS3 Transition) which is same as Transition.
animation-iteration-count: Set the repeating numbers.
- {number}: The number of repeating times.
- infinite: Infinately repeat animation.
animation-direction: Set the animation playing direction
- normal
- reverse
- alternate: The animation will be played alternatively in different two perspectives.
- alternate-reverse: Reversed alternate animation.
animation-fill-mode: Set the animation status
- forwards: Set the object status when the animation ends. It means the animation paused at the end.
- backwards: Set the object status when the animation starts. It means the animation paused at the start.
animation-play-state: Set the animation playing status. It is used individually in common cases.
- running
- paused

Compound attribute animation

animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;

One value of time is duration, two value of time are duration and delay. Other attributes’ order is not required.

CSS3 Multi-column Layout

column-count: Indicate the number of columns.
column-width: Indicate the width of each column.
columns: Set width and count at the same time.
column-gap: Set the gap between columns.
column-rule-style: Set the border style between columns; the value is same as border-style.
column-rule-width: Set the border width between columns.
column-rule-color: Set the border color between columns.
column-rule: Compound attribute can set column border.
column-span: Indicate if the one will need to occupy whole line.
- none
- all

CSS General

Genres of Stylesheets

Stylesheet Priority

Basic Structure

CSS Three Characteristics

CSS Normal Selector

Universal Selector

Type Selector

Class Selector

ID Selector

CSS Compound Selector

Intersection Selector

Grouping Selector

CSS Combinator

Descendant Combinator

Child Combinator

Sibling Combinator

Adjacent Sibling Combinator

General Sibling Combinator

Attribute Selector

CSS Pseudo-Class Selector

Dynamic Pseudo-Class

Structural Pseudo-Class

Negation Pseudo-Class

Target Pseudo-Class

UI Pseudo-Class

Language Pseudo-Class

CSS Pseudo-Element Selector

CSS Priority of Selectors

CSS Attributes

CSS Font Attributes

CSS Text Attributes

Attention in line-height

Apply line-height

CSS List Attributes

CSS Table Attributes

Border

Table

CSS Background Attributes

CSS Mouse Attributes

CSS the Box Model

CSS Length Unit

CSS Element Display Modes

Block

Inline

Inline-Block

Change Element Display Mode

Consists of Box Model

Content

Padding

Border

Margin

General

Margin Collapse

Margin Merging

CSS Overflow

CSS Methods of Hiding Elements

CSS Styles Heritage

Layout Practices

Practice 1

Practice 2

Practice 3

Blank Issues

Blank Between Elements

Blank Between inline or inline-block

CSS Float

General

Characteristics

Impacts

Eliminating the Influence of Float

Practice

CSS Positions

Relative

General

Characteristics

Absolute

General

Characteristics

Fixed

General

Attention in `line-height`

Apply `line-height`

Blank Between `inline` or `inline-block`