A complete page consists of three components:
- HTML: Hypertext Markup Language
- Build page "structure" with semantic tags
- CSS: Cascading style Sheets
- Responsible for the page "style", beautify the page
- JS: a lightweight scripting language; interaction refers to two places (behavior)
- The "dynamic" that the front-end itself writes on the page
- "Data interaction" in front of the background
Combination of structure, style, and behavior
How CSS is introduced
-
Embedded (inline type)
<style> body{ height:100%; background-color: red; }</style>
-
inline style
<body style="height:100%; background: #333333">
-
Outside chain (real development, with all the outside chain)
<link rel="stylesheet" href="style.css"/>
Precedence of CSS
- inline > Embedded > Outer chain
CSS Common Properties and styles
- When the error is set, there will be a yellow exclamation mark in the Chrome console to prompt
- Color: Three ways to represent colors
Shortcut key: C+tab
- In English: Red
- RGB (255,0,0)
#fff
- Font-size: Font Size
- Shortcut key: fsz30->font-size:30px
font:400 14px/28px "宋体";
- Background: Adding a background
The picture defaults to horizontal repetition and vertical repetition
- Position:
- Landscape Position: Left center right
- Portrait Position: Top Center Bottom
- General wording:
background: url("images/bg2.png") no-repeat left center red;
- Background-image:url ("Picture address")
- Background-repeat:no-repeat; /repeat-x;/repeat-y
- background-position:0 0
- Background-color:red
- Whether the font is skewed
- Font-style:italic Tilt/Normal
- Underline and Strikethrough
- Text-decoration:line-through; Delete Line
- Text-decoration:none; Remove underline
- Text-decoration:underline; add an underscore
Selectors in CSS:
- 1. Tag Selector: DIV p ul li dt dd em i u del strong b input label from table
- disadvantage: Only common operation, unable to personalize operation
- 2.class selector
- 3.id:
. Class name , the same page can have countless same class names #id名 , the same page can have only one ID name; (ID name is not duplicated)
-
In the real development process, class is used to set the style, the ID is used to get the element
<div class=" Div1 div2 div3 "Id=" Div1 "> </DIV>
- 4. Descendant selector: Div p (Select the P element for descendants under div container)
- 5. Sub-selector: div > P (choose Son under Div container); compatible ie7+
- 6. Intersection selector: Div.div1
- 7. Set selector: Div,p
- 8. Wildcard *: Represents all elements
- 9. Sequencer selector: Compatible with ie8+
- div > p:first-child
- div > p:last-child
- 10. Next Brother selector ul li+li{} compatible ie7+
Development of common browsers
The inheritance and layering of CSS
- Attributes that begin with a font are inherited; line-height
- Color can inherit
- Text can also inherit from the beginning, such as Text-align
CSS Weights
- !important weight infinity; (use less for good)
- The weight of the ID is greater than the weight of class
CSS Box model
- The CSS box model consists of 5 parts:
- Content Width-height +padding+border+margin
- Center of single-line text: height = line-height
- Multi-line text centered, padding and line-height
- Padding
- Margin: Outside Box
- Border
- border:1px solid #000;
- Border-width
- Border-style:solid (solid), dashed (dashed), dotted (point)
- Border-color
Inline and block-level elements
- P tag is a text label, but it can be used as a container, the P tag must not be placed in div; The P-paragraph is also a block element, with his exclusive line
- Text elements: p span a i em u b strong img
- Container level: div li dt dd H class (not recommended)
- In addition to P, all text elements are inline elements
- All container-level elements are block elements
- Mutual transformation of blocks and inline elements
- Display:inline; In-line
- display:inline-block;//inline block
- Display:block; Block
- About positioning: In most cases, it is suggested that: Father Shangzi (father: relative positioning, son: absolute positioning)
- about how to break out of document flow
- Floating float:left; Float:right;
- Absolute positioning Position:absolute;
- Fixed positioning position:fixed;
- Focus: 1) parent Shangzi 2) within the line element a little out of the document flow, you can set the width of the high;
- Note: In-line elements, once out of the document flow, although can be set wide, but if not set wide, it will default to the same width as the content, and block-level elements, if not set width, the default is the same as the parent block, no parent, the default is as wide as the screen
- Clear Floating
- Transparency processing
- RGBA () Background transparent, text opaque;
-
opacity:0 Transparent background, text is also transparent;
opacity:0.1;/*不兼容IE7浏览器*/filter:alpha(opacity=10);
The most basic development, the project structure that must be created first
- Images folder: Cut a good picture
- CSS folders: Placing CSS files: index.css
- index.html file
About inheritance
- Width Inheritance: If there is no parent, the width of the block element is as wide as the visible area by default, and if there is a parent, the default is as wide as the parent width (the width can be inherited, but the height cannot be inherited;)
- Font can inherit
- Color can inherit: color is invalid when a tag is encountered;
- Line-height can inherit
When the text crosses the fixed width of the processing method:
-
A single line of text with a fixed width ellipsis:
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
-
Problem handling in English without folding:word-wrap:break-word;
-
A scroll bar appears in the notationoverflow-y:scroll;
Distinguishing pseudo-classes from pseudo-elements
- Pseudo-elements: with: And:: All can, now recommended by::
- Pseudo-Class: Adds a dynamic effect to the current selector, only with:
Html/css Knowledge Point 02 (RPM)
