Wondershare EdrawMind
Mindmap-Galerie HTML CSS
- 357
- 2
HTML CSS
The common basis of html and css, CSS is cascading style sheets, and html is hyper text markup language.
Bearbeitet um 2023-08-22 15:01:32
- Für Sie empfohlen
- Gliederung
HTML CSS
CSS concepts
cascading style sheets
Cascading Style Sheets
CSS syntax
Comment
/* */
Selector {property:property value;property:property value;property:property value;...property:property value;}
Common CSS selectors
Basic
Label
tag name{}
ID
Features
uniqueness
#box{}
class
Features
one to many
many to one
.red{}
Pseudo class
:hover
:link
:active
:visited
Wildcard
*
complex
group
Selector 1, Selector 2,....{}
Include
Selector 1 Selector 2 ...{}
Specify
Selector 1 Selector 2...{}
Common CSS properties
text
font size
color
line-height
text-align
font-weight
bold
normal
lighter
bolder
font-style
normal
italic
font-family
font-variant
normal
small-caps
text-indent
text-decoration
underline
overline
line-through
none
text-transform
uppercase
lowercase
capitalize
text-overflow
letter-spacing
word-spacing
box model
margin
Support four value method
Support single direction definition
Supports negative values
Background images are not supported
Vertically adjacent merge
Parent box overflow:hidden
subbox float
border
Features
Support background image
Supports single direction
The four-value method is not supported
border wedge
triangle
border:100px solid transparent;
border-top-color:red;
height:0;
width:0;
Attributes
border-width
border-style
solid
solid line
dashed
dashed line
dotted
dotted line
double
Double line
border-color
padding
Support four value method
Supports single direction
Support background image
Negative values are not supported
The corresponding width and height need to be reduced (weird box does not need it)
content
width
height
float
float
left
right
none
clear
left
right
none
both
Place it on a box that you don't want to be affected by floating
position
relatively
relative
Features
No off-label space occupancy
position relative to oneself
Can be used for small position movements
Reference objects that can be used for absolute positioning
absolute
absolute
Features
Off-label and does not occupy space
Positioning relative to containing block
Do not write the coordinates and leave them in place
The son is completely different from the father
fixed
fixed
Features
Relative window positioning
Off-label and does not occupy space
Do not write the coordinates and leave them in place
viscosity
sticky
Features
Need to be used in combination with coordinates
Equivalent to a combination of relative positioning and fixed positioning
No off-label space occupancy
static
static
Features
No off-label space occupancy
Coordinate attributes are not supported
Hierarchical attributes are not supported
element type
Classification
block level
exclusive line
Configurable width and height
Row height can support the height
After floating, it will be arranged horizontally
inline
display in one line
Cannot set width and height
The row height cannot support the height
You can set the width and height after floating
text-indent is not supported
Box model related attributes are not supported and are invalid in the vertical direction.
Convert
display
block
inline-block
inline
none
hidden element
list-item
list type
table-cell
cell type
application
Variable width navigation horizontally centered
ul{text-align:center}
li {display:inline-block;}
Single line centered, multiple lines left
.all {text-align:center;}
.all p {display:inline-block;text-align-left};
picture gap
img{display:block;
img{vertical-align:top/middle/bottom;}
.all{font-size:0;}
Center the image vertically
method 1
.all {height:400px;line-height:400px;}
img{vertical-align:middle;}
Method 2
img{vertical-align:middle;}
span{vertical-align:middle;width:0;height:100%;display:inline-block}
Table related
border-spacing
bezel gap
border-collpase
border merge
table-layout
Fixed table layout
value
fixed
Fixed table layout
auto
Automatic table layout
empty-cells
Cells with no content displayed
value
hide
Hide cells without content
show
No cell display for that day
Background related
background-color
background-image
url();
background-repeat
repeat
no-repeat
repeat-x
repeat-y
background-position
Horizontal and vertical
px
%
top right bottom left
background-attachment
scroll
relative box
fixed
Relative window
List related
list-style:none
css3
Selector
Basic
Label
ID
class
*
Hierarchy
Descendants
(space)
offspring
>
neighbor brothers
Universal
~
Pseudo class
Dynamic pseudo-class
:hover
:link
:active
:visited
:focus
Structural pseudo-class
kids series
:nth-child()
:first-child
:last-child
:only-child
:nth-last-child()
Son series
:nth-of-type()
:first-of-type
:last-of-type
:only-of-type
:nth-last-of-type()
:root
:empty
:not()
negate pseudo-class
:not
Language pseudo-class
:lang
Target pseudo-class
:target
Need to be used in conjunction with anchor links
put on target
The one with the id is the target
UI element state pseudo-class
:disabled
:enabled
:read-only
:read-write
:checked
Attributes
[attr]
[attr=val]
[attr^=val]
[attr$=val]
[attr*=val]
[attr~=val]
[attr|=val]
Pseudo elements (inline)
::after {content:""}
::before {content:""}
::first-line
::first-letter
::selection
Weights
*
0.1
Label
1
class
10
Pseudo class
10
Attributes
10
ID
100
inline
1000
!important
10000
Attributes
corner radius
border-radius
box shadow
box-shadow
inset
inner shadow
To the right
down
degree of ambiguity
extent of expansion
shadow color
text shadow
text-shadow
To the right
down
degree of ambiguity
deformation
transform(2D)
translate()
rotate()
scale()
skew()
transform(3D)
Define depth of field
perspective
Define deformation type
transform-style:preserve-3d;
3D deformation
translate3d
rotatex
rotatey
rotatez
scale3d
Define the starting point of the deformation
transform-origin
transition
transition
Gradient
linear gradient
background:linear-gradient(0deg, #000, #000)
radial gradient
background:radial-gradient(radius at position, #000, #000)
Radius: major/minor
Position: x/y
Linear gradient tiling
background:repeating-linear-gradient(0deg, #000 5px, #000 10px)
Radial gradient tiling
background:repeating-radial-gradient(radius at position, #000 5px, #000 10px)
animation
animation statement
@keyframes name{}
animation call
animation: name .5s linear 0s infinite alertnate forwords
Layout
Flexbox layout
container
display:flex
flex-direction
column
row
column-reverse
row-reverse
flex-wrap
wrap
no-wrap
wrap-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
flex-start
flex-end
center
baseline
alegn-content
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly
project
flex
flex-shrink
flex-grow
flexbasis
align-self
stretch
flex-start
flex-end
center
baseline
order
grid layout
container
display:grid
grid-template-columns
200px 200px 200px
20% 50% 30%
repeat(3,200px)
repeat(auto-fill,20%)
1fr 1fr 1fr
1fr 1frr 1minmax(200px,1fr)
grid-template-rows
200px 200px 200px
20% 50% 30%
repeat(3,200px)
repeat(auto-fill,20%)
grid-gap
row-gap
column-gap
grid-template-areas
justify-content
align-content
justify-items
align-items
project
grid-area
grid-column
grid-column-start
grid-column-end
grid-row
grid-row-start
grid-row-end
multi-column layout
columns
columns:5 200px;
column-count
column-width
column-gap
column-rule
column-span
column-fill
Media inquiries
<link mate="screen and (min-width:960px) and (max-width:1200px)">
@media screen and (min-width:960px) and (max-width:1200px)
box model
box-sizing
border-box
weird box model
Features
padding border within width height
content-box
standard box model
Features
width height does not include padding border
compatible
content
Trident
Gecko
Webkit
Blink
Presto
prefix
-moz-
-ms-
-webkit-
-o-
the term
progressive enhancement
First low and then high, focusing on the implementation of the functions of the low version, and adding cool effects to the high version
Graceful downgrade
First high and then low, focusing on the effects of high version functions, and need to deal with the compatibility of low versions
other
Font icon
http://www.iconfont.cn
anchor link
<a href="#one"></a>
Jump
<a name="one"></a>
<div id="one"></div>
Centering method
position
method 1
parent box
position:relative;
subbox
position:absolute;
top:50%;
left:50%;
margin-left:-half width;
margin-top:-half height;
margin:auto
Method 2
parent box
position:relative;
subbox
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto
Method 3
parent box
position:relative;
subbox
position:absolute;
top:calc(50% - half higher);
left:calc(50% - half the width);
Method 4
parent box
position:relative;
subbox
position:absolute;
top:50%;
left:50%;
translate(-50%,-50%);
Flexbox
method 1
parent box
display:flex;
subbox
margin:auto;
Method 2
parent box
displayflex;
justify-content:center;
align-items:center;
Method 3
parent box
display:flex;
justify-content:center;
subbox
align-self:center
grid
method 1
parent box
display:grid;
justify-content:center;
align-content:center;
Method 2
parent box
display:grid;
subbox
margin:auto;
intra-line transfer block
method 1
parent box
line-height: high;
text-align:center;
parent box
display:inline-block;
vertical-align:middle;
line-height:high;
Method 2
parent box
text-align:center;
subbox
display:inline-block;
vertical-align:middle;
Parent box pseudo-element::after
content:"";
display:inline-block;
vertical-align:middle;
width:0;
height:100%;
Method 3
parent box
text-align:center;
vertical-align:middle;
display:table-cell;
subbox
display:inline-block;
Vertically center multi-line text
parent box
vertical-align:middle;
display:table-cell;
code segment
Ellipsis
fixed width
width
No line breaks
white-space:nowrap;
overflow hidden
overflow:hidden
Ellipsis
text-overflow:ellipsis
Mobile layout
viewport
Viewport, mobile default is 980
dpr
Device pixel ratio
Layout
Percent layout
Scale layout
unit
em
A multiple of itself or the font size of the parent box
rem
Multiple of root (html) font size
vw
One percent of the viewport width
vh
One percent of the viewport height
vmin
one percent short side
vmax
One percent of the long side
BFC
Triggerable properties
float
left
right
overflow
hidden
scroll
auto
position
absolute
fixed
display
inline-block
table-cell
table-caption
flex
application
margin-top penetration problem
height collapse problem
Adaptive width and height
Width-adaptive content
float
position
inline-block
Highly adaptive content
highly collapsed
The child box floats and the height of the parent box is 0.
solve
fixed height
advantage
Simple
shortcoming
Unable to adapt
Add overflow:hidden to the parent box
advantage
Adaptable
shortcoming
overflow hidden
Add an empty box below the float and set clear:both;
advantage
Can be adaptive
Hide without overflow
shortcoming
Need to load one more box
Universal clear float method, add::after{content:"";display:block;clear:both;} to the parent box
advantage
Adaptable
issue overflow hidden
No need to load an extra box
height adaptive window
html,body{height:100%;}
HTML5
Features
The basic structure is simpler
grammar relaxation
Label semantics
Even without styles, a clear structure can be presented
Easy for SEO
Facilitates teamwork and post-maintenance modification of the code
accessibility
future features
Add semantic tags
big semantics
header
footer
main
nav
section
article
aside
small semantics
figure
figcaption
mark
canvas
video
Attributes
controls
autoplay
muted
loop
src
Supported formats
mp4
ogg
webm
width
height
audio
Attributes
controls
autoplay
muted
loop
src
Supported formats
mp3
ogg
wav
details
summary
source
smart form
Add new attributes
required
Required fields
autofocus
auto focus
placeholder
Placeholder
autocomplete
Whether to enable history recording
value
on
off
pattern
Regular verification
Add new control
tel
url
number
min
max
step
range
min
max
step
color
search
date
month
week
time
datatime-local
html common tags
Text class
title
h1
Generally used to place logos
h2
Generally used to put column titles
h3
h4
h5
h6
paragraph
p
Modification class
Bold
b
strong
Strong semantics
tilt
i
em
Strong semantics
Underline
u
ins
Strong semantics
strikethrough
s
del
Strong semantics
superscript and subscript
sup
superscript
sub
subscript
Table class
Label
table
tr
td
th
Column header
caption
table title
row grouping
thead
tbody
tfoot
column grouping
colgroup
Attributes
rules
Group dividing line
value
all
cols
rows
none
groups
width
height
border
bgcolor
align
horizontal alignment
value
left
right
center
valign
vertical alignment
value
top
middle
bottom
baseline
colspan
rowspan
cellspacing
cellpadding
Form class
form fields
form
method
Submission method
value
get
not safe
Shareable
Process data less than 2KB
Affected by address bar length
efficient
The process of obtaining data
post
The process of transferring data
No size limit
relatively safe
low efficiency
Not shareable
action
target address
value
(jumped address)
name
target
Open method
value
_blank
open in a new window
_self
The current window is open
form control(type)
text
text
password
password
Single choice
radio
Each group needs to have the same name attribute value
Multiple choice
checkbox
drop down
select>option
text field
textarea
button
image
button
submit
reset
file
Related properties
name
name
value
value
multiple
Multiple choice
checked
Checked by default
selected
Drop-down menu checked by default
readonly
read only
disabled
Disable
List class
orderly
ol>li
Attributes
type
value
1
a
A
i
I
start
disorder
ul>li
Attributes
type
value
circle
disc
square
none
customize
dl>dt dd
path dependent
picture
img
Attributes
scr
title
alt
width
height
Hyperlink
a
Attributes
href
title
target
path
relatively
Same level
./
Write directly
upper level
../
next level
folder
document
absolute
Starting from the drive letter
D:\......
used from web pages
https://img….
the difference
relatively
There is a reference
Cannot cross drive letters
absolute
no reference
Local ones cannot span computers (unless the paths on the computers are the same)
other
br
force line break
hr
horizontal line
div
span
character entity
>
<
©
®
grammar
double label
<tag name attribute="attribute value"></tag name>
single label
<tag name attribute="attribute value" />
label, mark, element
html basic structure
Document declaration header
Tell the browser that my document type is html
Character Encoding
charset="utf-8"
page title
title
html concept
hyper text markup language
Hypertext Markup Language