HTML + CSS Study Notes (4)

I. Custom background and color

1. Background Color and text color
Add style = "background-color: red; color: Blue" to the desired body, that is, specify the background to red and the font to blue, of course, you can set the font color with color in a specific element.

2. Specify custom colors
The custom color format is: # rrggbb, RR, GG, and BB respectively indicate two hexadecimal numbers of the three colors, red, green, and blue. For example, the red color is # ff0000, and the blue-purple color is #660099. You do not need to remember this. Generally, it is set by the color selector.

3. Use images as the background
Style = "background-image: url(.jpg); backgroud-repeat: Repeat-X"
Note that the image is used instead of inserting the image IMG. Backgroud-repeat indicates the direction of duplicate images when the image size is smaller than the page size. Repeat-X, repeat-y, and no-repeat indicate horizontal, vertical, and non-duplicate, respectively.

4. Transparent Images
Generally, the transparent image formats include PNG and GIF. Most of them use PNG. With a transparent image, you can use the background color at the same time.

Ii. Image link and image ing

1. Image Link

Click an image to open another page, and use <a href = "another image or page"> </a> to create
Note: If you want two images to be seamless, the first image </a> and the second image <A>

2. Image ing

Click a part of the image to open another page. One image can open multiple pages.

<Map id = "cat"> <area shape = "rect" coords = "100,230,230,400" href = "eye.png" ATL = "image" Title = "Eye source"/> <Area shape = "rect" coords = "350,450,570,600" href = "bz.png" ATL = "image" Title = "logo image"/> </map> 

<Map> </map> label creation ing. <area/> Create areas that can be mapped. shape indicates the region shape, and its value can be rect, circle, or poly; coords indicates the region coordinate. usemap uses the created image ing. Pay attention to the red font in the previous example.

Image ing example

3. Create a table

1. Simple Table

<Table border = "1">
<Tr>
<TH> month </Th>
<TH> savings </Th>
</Tr>
<Tr>
<TD> January </TD>
<TD> $100 </TD>
</Tr>
</Table>

<Table> </table> Create a table. <tr> </tr> indicates a row. <TH> </Th> indicates the content of a cell and the header, generally, the browser center and bold display the content. <TD> </TD> indicates the content of a common cell.

2. Control the table size
<Table Style = "width: 200px; Height: 400px">

The following table is created based on the page size ratio column. It will automatically adjust the width and height of the page based on the page display size.
<Table Style = "width: 100%; hegiht: 100%">
<Trstyle = "hegiht: 30%">
<TH style = "width: 20%"> No1 <TH>
<TH style = "width: 80%"> NO2 <TH>
</Tr>
<Trstyle = "hegiht: 70%">
<TD style = "width: 40%"> NO3 <TD>
<TD style = "width: 60%"> No4 <TD>
</Tr>
</Table>

3. Set alignment and span in the table
Table alignment still uses text align and vertical-align;
Use border = "width" for the Border width of the table"

Colspan = "2" indicates that the row spans two columns, and rowspan = "3" indicates that the row spans three rows, which is equivalent to merging cells.

4. Background and image background
This is also the same as setting the page, background-color and background-Image
The cellpadding attribute specifies the white space between the cell edge and its content.
The cellspacing attribute specifies the space between cells.

Table layout example

Exercise answer