Wondershare EdrawMind
EdrawMindHTML5 CSS3 web design and production
MindMap Gallery HTML5 CSS3 web design and production
- 37
HTML5 CSS3 web design and production
HTML5 CSS3 web design and production, Wed front-end development is suitable for beginners Chapters 1-4 include basic knowledge of CSS, basic concepts of Wed, HTML, basic concepts of CSS, use of Dreamweaver tools, HTML graphic and text tags, basic CSS selectors, etc. Chapter 5-8 Box model, list hyperlinks, tables and forms, DIV CSS layout and other core web page production Chapter 9-11 HTML5, CSS3 new features, multimedia embedding, transition, transformation, animation, drawing, etc. These contents can help beginners quickly master the basic knowledge of web design.
Edited at 2021-06-28 16:26:54- bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
- Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
- Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
HTML5 CSS3 web design and production
- bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
- Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
- Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
- Recommended to you
- Outline
HTML5 CSS3
Label overview
Tag classification
Miscellaneous
<b>/<strong>Bold text
<u>/<ins>Underline display mode
<i>/<em>Text is displayed in an italic manner
<s>/<del> text is displayed with strikethrough
time tag
time
datetime defines relative time
pubdatePublish date
mark highlight characters
cite tag reference
title tag
align
leftAlign labels left
centercenter label
rhght right align label
horizontal line label
<hr>
align sets the alignment (label as above)
size thickness
colorcolor
widthwidth
original format tag
<per>
newline tag
<br/>
text label
font
face font
size size
colorcolor
summary
storm bold em tilt delstrikethrough ins underline
image tag
img
src image path
Cannot replace text when alt image is displayed
Content displayed when the title pointer hovers
widthThe width of the image
heightThe height of the image
border sets the border width of the image
margin sets outer border
padding inner border
vspace sets the bottom and top margin of the image
hapace sets the left and right margins of the image
align
left aligns the image to the left
right aligns the image to the right
top aligns the top of the image with the first line of text
middle aligns the horizontal centerline of the image with the first line of text Other text is below
bottom aligns the bottom of the image with the first line of text Other text is below the image
First introduction to CSS3
Advantages of CSS
save costs
Improve performance
CSS basic core
rule
Selector {Attribute 1: Attribute value 1; Attribute 2: Attribute value 2;....}
Introduce style sheet
inline
Embedded
external link
Imported
Basic selectors work on these three
Basic selector
tag selector
class selector
id selector
wildcard selector
id>class>standard>wildcard
Set text style
Text style properties
font-size font size
em magnification (relative to the multiple of the current text)
px pixels
in inches
cm cm
mm mm
pt point
font-family font
font-weight font thickness
normaldefault value
bold bold characters
bolder bolder characters
lighter defines a thinner character
100-900 freely define fine to thick characters
font-style font style
normaldefault
italic italic (the text itself changes)
obliqueItalic words (let the words without tilt be tilted)
font: Comprehensive setting of font style
@font-face rules
text appearance properties
colorcolor
letter-spacing: word spacing
word-spacing: word spacing (only applicable to English)
line-height: line spacing
texe-transform: text conversion
none do not convert
capitalize capitalize
lowercaseConvert all to lowercase
text-decoration: text decoration
noneno decoration
underlineunderline
underline
line-through strikethrough
text-align: horizontal alignment
leftAlign left
rightalign right
center center alignment
text-indent first line indent
white-space: white space processing
normalnormal
per preformatted display as is
uppercase Convert all to uppercase
nowrap spaces and line breaks are invalid, forcing the text not to line wrap
text-shadow: shadow effect
text-overflow: mark overflow text within the object
clip trims overflow text without showing omitted tags
ellipasis replaces modified text with omitted tag "....."
word-wrap automatically wraps lines
normal only allows line breaks at hyphenation points
break-word breaks a line inside a long word or URL address
Advanced features
CSS compound selector
Tag specific selector:
descendant selector
Union selector
CSS cascading and inheritance
Stackability
inheritance
CSS priority
CSS3 selectors
attribute selector
E[att^=value] attribute selector (prefix selector)
E[att$=value] attribute selector (suffix selector)
E[att$=value] attribute selector (included)
E represents the tag name att represents the selector value prefix suffix label
Relationship selector
Child element selector: selects the first-level elements of an element
sibling selector
Nearby sibling selector: use number to connect
Ordinary sibling selector: use ~ to link before and after
Structured pseudo-class selector
:root selector: The root tag is always html and takes effect on all page tags
:not selector: exclude a substructure element below this structural element
:only-child selector: matches only one child element of a parent element
:first-child and :last-child selectors: select the first and last child elements in the parent element respectively
:nth-child(n) and :nth-last-child(n) selectors: select the nth element and the nth element from the last of the parent object
:nth-of-type(n) and :nth-last-of-type(n) selectors: Select the nth element and the penultimate nth element of a specific type in the parent object
:empty selector: used to select all elements that have no child elements or whose text content is empty
subtopic
Pseudo element selector
:before pseudo-element selector
:after pseudo-element selector
BOX box model
Understand the box model
CSS sets all elements on the page into a rectangular box After setting the element to a rectangular box, the layout in the web page will not be The same boxes are placed in different locations Each model consists of element content (content), padding (padding), border (border) and margin (margin).
Box related properties
Border properties
top border
border-top-style style;
border-top-width width;
border-top-color color;
border-top: width style color;
bottom border
border-bottom-style style;
border-bottom-width width;
border-bottom-color color;
border-bottom: width style color;
left border
border-left-style style;
border-left-width width;
border-left-color color;
border-left: width style color;
right border
border-right-style style;
border-right-width width;
border-right-color color;
border-right: width style color;
Comprehensive style settings
border-style: top [right, bottom, left];
none none
solid: single solid line
dashed: dashed line
dotted: dotted line
double: double solid line
Width comprehensive settings
border-width: top [right, bottom, left];
Pixel values
Color comprehensive settings
border-color: top [right, bottom, left];
Comprehensive border settings
border: four-side width, four-side style, four-side color;
padding properties
padding-top: top margin
padding-right: right padding
padding-bottom: bottom padding
padding-left: left padding
padding: top padding [right padding, bottom padding, left padding]
Margin properties
margin-top: top margin
margin-right: right margin
margin-bottom: bottom margin
margin-left: left margin
margin: top margin [right margin, bottom margin, left margin]
background properties
background-color: background-color:
background-image:background-image:url()
Background image tiling: background-repeat:property
repeat tiles horizontally and vertically
no-repeat does not tile
repeat-x tiles horizontally
repeat-y tiles vertically
Background image position: background-position: right bottom;
Background image fixed
background-attachment: attribute;
The scroll image moves as the page moves
fixed image fixed to page
Comprehensive set of background elements
background: background color url ("image") tile positioning fixed;
The width and height of the box
CSS3 adds new box model attribute
color transparency
rgba (r, g, b, alpha) rgb represents the color half ratio alpha is a parameter 0.0 is completely transparent and 1.0 is completely opaque;
opacity: parameter; parameter between 0~1
rounded corners
border-radius: Horizontal radius parameter 1 Horizontal radius parameter 2 Horizontal radius parameter 3 Horizontal radius parameter 4/Vertical radius parameter 1 Vertical radius parameter 2 Vertical radius parameter 3 Vertical radius parameter 4;
Picture border
border-image-source specifies the image path
border-image-slice specifies the inward offset of the top, right, bottom, and left sides of the border image
border-image-width specifies the border width
border-image-outset specifies the distance the border background extends to the outside of the box
border-image-repeat specifies the tiling method of the background image
shadow
h-shadow represents the position of the horizontal shadow, which can be a negative value (required attribute)
v-shadow represents the position of the vertical shadow, which can be a negative value (required attribute)
blur shadow blur radius (optional property)
spread shadow expansion radius, cannot be negative (optional attribute)
colorShadow color (optional attribute)
Outset/inset defaults to outer shadow/inner shadow (optional attribute)
Gradient
Linear gradient background-image:linear-gradient(gradient angle, color value 1, color value 2...·..., color value n);
Radial gradient background- image: radial -gradient (gradient shape four center position, color value 1, color value 2. color value m;
Repeating linear gradient background-image:repeating-linear-gradient(gradient angle, color value 1, color value 2..., color value n);
Repeat radial gradient background-image:repeatina-radial-aradient (center position of the gradient shape circle, color value 1, color value 2..., color value n);
Multiple background images
Trim background image
Set the background image size: background-size: attribute value 1 attribute value 2;
Set the background image display area: background-origin: attribute value;
Set the background image clipping area: background-clip
Element types and conversions
Block elements: <hl> ~ <h6>, <p>, <div> <hl>~<h6>, <ul>, <ol>, <li>
Inline elements: <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, <u>, <span>, etc.
div and span tags
div implements the planning and layout of web pages
span is often used to mark specially displayed text and is used with the class attribute
Element type conversion
The commonly used attribute values and meanings of the display attribute are as follows:
inline: This element will be displayed as an inline element (the default display attribute value of inline elements) block: This element will be displayed as a block element (the default display attribute value of the block element). inline-block: This element will be displayed as an inline block element, and attributes such as width, height, and alignment can be set on it, but the element will not occupy a single line. none: This element will be hidden, not displayed, and does not occupy page space, which is equivalent to the element not existing.
Lists and hyperlinks
list tag
ordered list<ol>
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
type: attribute value (1 default)/a-A/i-I
start number (specifies the starting value of the bullet)
value number (the number specifying the bullet)
Unordered list<ul>
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
type-
disc solid circle
circlehollow circle
squaresolid square
definition list<dI>
<dt> represents the definition content <dd> explains the content
CSS control list style
list-style-type is used to control the type of symbol displayed on list items
disc solid circle (unordered list)
none does not use bullets (unordered and ordered lists)
circle hollow circle (unordered list)
cjk-ideographic simple ideographic numbers
square solid square (unordered list
georgian traditional Georgian numbering system
decimal Arabic numerals
decimal-leading-zero Arabic numerals starting with 0
lower-roman lowercase Roman numerals
upper-romanuppercase Roman numerals
lower-alpha lowercase English letters
upper-alpha uppercase English letters
lower-latin lowercase Latin letters
upper-latin uppercase Latin letters
hebrewTraditional Armenian numbering
armenian traditional Hebrew numbering;
list-style-image can set the item image for each list item
list-style-position is used to control the position of bullets
inside: The list bullet is located inside the text
outside: The list bullet is outside the list text
list-style: list bullet, list bullet position, list item image (comprehensive setting list style)
Hyperlink
<a href="Jump target" terget="How the target window pops up">Text image</a> href link target url (# can establish an empty connection) l target specifies the opening method
Anchor link hyperlink is used with list tags
Link pseudo-class controls hyperlinks
a:link{css style rules;}default
a:visited{css style rules;}The style after the hyperlink is visited
a:hover{css style rule;}Mouse-over hyperlink style
a:active{css style rules;} hyperlink style when the mouse is clicked and held
Tables and Forms
sheet
<table> <tr> <td>Text in cell</td> </tr> < /table>
<table> </table> defines the start and end of a table
border sets the border of the table (default border="0" is no border) border-collapse: collapse border merge border-collspacing sets the distance between adjacent cells
cellspacing sets the space between cells
cellpadding sets the space between cell content and cell edges
width sets the width of the table
height sets the height of the table
align sets the horizontal alignment of the table in the web page
bgcolor sets the background color of the table
background sets the background image of the table
<tr> </tr>Define one of the lines
height sets the height of the row
align sets the horizontal alignment of a line of content in the web page
valign sets the vertical mode of a row of content
bgcolor sets row background color
background sets row background image
<td> </td> Define cells in the table
width sets the width of the cell
height sets the height of the cell
align sets the horizontal alignment of cells in the web page
valign sets the vertical pattern of cell content
bgcolor sets cell background color
backgroundSet cell background image
colspan sets the number of columns spanned by cells (used to merge horizontally oriented cells)
rowspan sets the number of rows that the cell spans vertically (used to merge vertically oriented cells)
The <th> tag is used to set the table header to be at the same level as the td tag.
Table structure
<thead> defines the table header located in the table tag
<tfoot>The header and footer used to define the table are located after thead
<tbody> defines the theme of the table
CSS control table borders
The border attribute of the table tag can set the table border.
form
Form composition
from form element syntax: <from> form control</from>
action specifies the destination address for data submission
method data request method get /post get means that the browser establishes a connection with the form server and then transmits it directly, which is less secure. Post means that the browser will establish a link to the form specified in the action attribute and then transmit it in parts. Implicit submission is more secure.
name is used to specify a name for the form
Form core controls
input control
<input type="Control type"/ >
type
textSingle line text input box
password password input box
radio radio button
checkboxcheckbox
buttonNormal button
submitsubmit button
reset button
imageSubmit button in image form
hidden hidden field
file domain
nameThe name of the control
The default text value in the value input control
The display width of the size input control on the page
readonly The content of the control is read-only (cannot be edited or modified)
disabled disables the control (displays gray) when loading the page for the first time
checked defines the items that are selected by default in the selection control
The maxlength control allows the maximum number of characters to be entered.
textarea control
The value of the tayp attribute of the input control is text. This control can create multi-line text. cols can set the number of characters in each line of the multi-line text box and rows is used to define the number of lines displayed in the multi-line text input box.
name attribute sets name
readonly space content is read-only
disabledDisable the control when loading the page for the first time
select control
Used to create drop-down menus
select
size specifies the number of visible items in the drop-down menu
When multiple defines multiple="multiple", the drop-down menu will have multiple selection functions.
option
When defining selected, the current item is the default item.
HTML5 form attributes
New form attribute
The autocomplete attribute is used to specify whether the form has an auto-complete function, which means that the input content of the form control is recorded, and the input history will be displayed in the drop-down list when input again.
on means there is an auto-complete function
off means no auto-complete function
The novalidate attribute specifies to cancel the validity check of the form when the form is submitted. After setting this attribute for the form, the validation of the entire form is turned off. All forms within the form control are not validated. Use the method novalidate="novalidate"
Brand new form control P172
Brand new input control type
The email type <input type="email"> is a text box specially used to enter email addresses.
The url type <input type="url"> is a text box specially used to enter url addresses.
The tel type <input type="tel"> is a text box specially used to enter phone numbers.
Search type <input type="search"> is a text box specially used to enter search keywords
Color type <input type="color"> is a text box specially set for color
The numder type <input type="numder"> is a text box specially used to input numerical values.
value specifies the default value of the input box
maxmax value
minminimum
stepEnter a legal interval
The range type <input type="range"> is used to provide an input range of values within a certain range.
Date pinkers type <input type=date, month, week...> specifies the time date type
date selects day, month and year
month selects month and year
week selects week and year
timeSelect time
datetime selects time, year, month, day (utc time)
datetime-local selects time, day, month, year (local time)
Brand new input attribute
The autofocus attribute is used to specify whether to automatically obtain focus after the page is loaded (in the input box)
The form attribute can write the sub-elements in the form anywhere on the page. You only need to set the element's form attribute value for this specification to the form.
The list attribute specifies the datalist element bound to the input box, and its value is the id of a certain datalist element.
The multiple attribute specifies that the input box can select multiple values. This attribute is applicable to email (separated by commas) and file (file).
The min, max, step attributes are used to specify limits for input input types containing numbers or dates.
The pattern attribute is used to verify whether the content entered in the input type input box matches the defined regular expression P181
The placeholder attribute is used to provide relevant information for the input type input box to describe what the input box expects the user to input.
The required attribute is used to determine whether the user's input in the form input box is empty and the user is not allowed to submit the form.
DIV CSS layout
Common properties of layout
Label float attribute
selector {float: attribute value}
float common attribute values
left label floats to the left
right label floats to the right
none label does not float
Float features: 1. The floating element is out of the document flow and no longer occupies a position in the document. 2. After setting the floating element, the element will move to the left or right of the parent element. 3. Floating elements will not be moved from their parent elements by default. 4. When a floating element moves to the left or right, it will not exceed other floating elements in front. 5. If the floating element is above a block element that is not floated, the floating element cannot move upward. 6. The floating element will not exceed the height of the floating element above it, and at most it will be as high as it. 7. Floating elements will not cover text and text will automatically wrap around the element.
clear float
Selector {clear: attribute value;}
left does not allow floating labels on the left
right does not allow floating labels on the right
both clears floats on both sides at the same time
empty label clear float
Use overflow to clear floats
Applying the overflow:hidden style to a label can also clear the effect of floating on the label.
Label positioning attributes
Selector {position: attribute value;}
static automatic positioning
Relative relative positioning, positioning relative to the position of its original document flow
absolute positioning, positioned relative to its previously positioned parent tag
fixed fixed positioning, equivalent to positioning the browser window
The position positioning mode is only used to define how the label is positioned, and cannot determine the specific position of the label.
The top offset defines the distance of the label relative to the upper edge of its parent label.
The bottom offset defines the distance of the label relative to the bottom edge of its parent label.
leftThe left offset defines the distance of the label relative to the left line of its parent label
top right offset defines the distance of the label relative to the right line of its parent label
Other properties
Selector {overflow: attribute value;}
The visible content will not be trimmed and will be rendered outside the label box
hidden overflow content will be trimmed, and the trimmed content will be invisible
aoto generates scroll bars when needed and adapts to the content that needs to be displayed.
The z-index attribute adjusts the upper and lower positions
layout type
single column layout
multimedia embedding
Video file and audio file formats
Video formats supported by HTML5: ogg, mpeg4, webm
Audio formats supported by HTML5: ogg, mp3, wav
Embed video and audio
Video: <video src="video file path" controls="controls"></video> Whether to display the video plug-in. Text can also be inserted between videos. If the video cannot be displayed, the text can be displayed.
Attributes: autoplay automatically plays the video after the current page is loaded The loop video ends and starts playing again The preload video is loaded when the page loads and is ready to play, but this attribute is ignored if the autoplay attribute is used. Poster When the video cannot be played, link a picture and display the picture according to a certain ratio.
Audio: <audio src="audio file path" controls="controls"></audio>
Attributes: autoplay automatically plays audio after the current page is loaded The loop audio ends and starts playing again The preload audio is loaded when the page loads and is ready to play, but this attribute is ignored if the autoplay attribute is used.
Excessive deformation and animation
over
transition-propensityproperty
noneWithout attributes, excessive effects will be obtained
allAll attributes gain excessive effects
property defines the name of the css property that applies the excessive effect. Multiple names are separated by commas.
transition-duration property
time defines the duration of the transition effect
transition-timing-function Property
Speed curve used to specify the transition effect of the transition attribute
linear specifies a transition effect that starts and ends at the same speed, equivalent to cubic-bezier
ease (default) starts slowly then speeds up then ends slowly
Ease-in transition effect that starts slowly and then gradually speeds up
ease-out transition effect that ends at a slow speed
ease-in-out transition effect that starts at a slow speed and ends at a slow speed
cubic-bezier defines the shape of the acceleration and deceleration Bezier curve by itself
transition-delay property
Specifies the start time of the transition effect
The sequence of transition composite properties is as above
2D deformation
transform attribute
transform-functions is used to set the transformation
transform: translate(x-... y-...) translation
transform:scale(x-... y-...) scale
transform:skew(x-...y-...)skew
transform:rotate(angle)rotation
Set its center point transform-origin: x-axis y-axis z-axis
3D deformation
rotateX() allows the specified element to rotate around the X axis
rotateY() allows the specified element to rotate around the Y axis
rotateZ() allows the specified element to rotate around the Z axis
rotated3d (x-y-z, angle (rotation angle)) comprehensive attribute settings
animation
@keyframes rule animation represents the name of the current animation keyframes-selector key frame selector form (0) means start to (100%) means end css-style defines the animation to respond to when executing the current keyframe
The animation-name attribute is used to define the animation name to be applied. The animation name will be referenced by the @Keyframes rule. animation-name:Keyframename|none none means no animation is applied
The animation-duration property is used to define the time required for the entire animation effect to complete. animation-duration: time
The animation-timing-function attribute is used to specify the speed curve of the animation animation-timing-function: value;
linear specifies a transition effect that starts and ends at the same speed
ease (default) starts slowly then speeds up then ends slowly
Ease-in transition effect that starts slowly and then gradually speeds up
ease-out animation ends at low speed
ease-in-out transition effect that starts at a slow speed and ends at a slow speed
cubic-bezier (n,n,n,n) defines the shape of the Bezier curve of acceleration and deceleration by yourself
The animation-delay property is used to define the delay time for executing animation effects. animation-delay: time defines the waiting time
The animation-iteration-count property is used to define the number of times the animation is played animation-iteration-count: number | infinite; defines the number of playback times
The animation-direction property defines the direction of the current animation playback
The animation attribute is used to define a collection of the above six attributes
Principles of drawing and data storage