Home > Developer > JavaScript
HTML5 grammar basic learning notes, html5 grammar learning notes
1. Line Style
Add a style to a separate label.
<Div style = "width: 100px; height: 100px; background-color: red;"> </div>
Advantage: it is easier to add attributes instantly.
Disadvantage: It is very troublesome to modify the attributes one by one.
2. inline Style Sheets
<Style>
Div {<! -- The selector and {} symbol attributes are written in it -->
}
</Style>
Advantage: valid for the current HTML file.
Disadvantage: it is complicated to modify multiple pages.
3. External Style Sheets
<Head>
<Link rel = "stylesheet" href = "xx.css"/>
</Head>
Border:
<Style>
Div {
Width: 400px;
Height: 400px;
Border: 1px solid red;
}
</Style>
<! --
Border composition:
1. The Border width is 1px;
2. Border style solid (solid line); dashed (dotted line );
3. The border color is red;
Border direction:
Top right bottom left
You can set the border direction and attributes separately in the upper-right lower-left corner.
Change the border in a certain direction:
Border-top-color: red;
Border-top-style:
Border-top-width:
Border shape: Non-rectangle
Border drawn triangle instance:
First, set the Border width. The background color is the same as the background color (if the background is white ).
Border: 20px solid white
Then, set the color of the border style (TOP as the downward triangle) to the triangle color.
Border-top-color: red;
The above is a red triangle.
If you set the style color in a certain direction, a triangle in the opposite direction is generated.
-->
<Body>
<Div> </div>
</Body>
Steps and requirements for border exercises.
1. analyze the structure of the design diagram first.
2. Perform structure Encoding Based on the analyzed structure.
3. Perform CSS Encoding Based on the written structure.
4. Use the PS tool to measure the module on the Design Drawing and pick up the color.
5. Add a style.
Background
Background-color background color
Color keyword
RGB
Hexadecimal
Background-image background image
By default, the background image is full of the entire container size.
Background-repeat
Duplicate background?
No-repeat
No duplicates
Repeat-x;
Horizontal tiled X axis
Repeat-y;
Vertically tiled Y axis
Repeat;
X \ Y already exists.
Background-position: x y;
Background Image Position
Specific value:
X axis: left right center
Y axis: top bottom center
If the second Y axis property value is not filled in, the default value is center.
Background-attachment: fixed;
Whether the background image is out of work
Fixed is fixed in the visible area of the browser
Scroll follows the scroll bar
Background
Non-attribute writing order
Color-related Image
<! -- Content:
the image link style will support the width and height of the container.
The background does not occupy the container width or height -->
Cut graph:
1. Cut a complete image in the header area (the first block ).
2. Each small block in the content area must have ICO and background color.
Text style:
Font-weight bold text
Bold
Normal
Font-style text skew
Italic
Font-size text size
Font-family font
Position occupied by line-height lines of high text in one line
Heigth: 400px;
Line-height: 400px;
When the line height is the same as the container height, the text is displayed vertically in the center.
Method for Measuring the Row Height of multiple lines of text:
1. Confirm the text size
2. Confirm the gap between the two lines of text
3. Divide the gap size by 2. The obtained value is the gap size between the upper and lower lines of text.
3.1 When the row height is an odd number, the text above is one pixel less than the bottom.
3.2 when the height of a row is an even number, the text gap is the same.
4. Use guides to measure the Row Height of multiple lines of text.
Composite style of text:
Font: bold italic 26px "";
Pay attention to the writing sequence for font composite styles
Font: font-weight | font-style | font-size/line-height | font-family
Text settings:
Color
Text color
Text-align
Text alignment (Display) Mode
Left (default)
Right (right)
Center (middle)
Text-indent
First line indent
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
