HTML and CSS Advanced

HTML and CSS Advanced

This section describes the creation of tables, CSS positioning, CSS weights, Photoshop-assisted measurement and color extraction, and the development process for front-end pages.

Table elements and related styles

1. <table> Tags: declaring a table

2. <tr> Tags: Define a row in a table

3, <td> and <th> tags: define a cell in a row, TD represents a normal cell, th represents a table header cell

Table-related style properties

• Border-collapse sets the edge of the table to merge, such as: Border-collapse:collapse;

Positioning (sub-absolute parent phase)

Document Flow
Document flow, refers to the box in accordance with the HTML tags written in order from top to bottom, from left to right, block elements occupy a row, the elements of the row within a row from left to right, first written first arranged, then written in the following, each box occupies its own position.

About positioning
We can use CSS's position property to set the element's positioning type, and the postion setting is as follows:

• Relative generates relative positioning elements, usually the parent setting is relatively positioned, the child is set to absolute positioning, the child is positioned as a reference to the parent, or the child is positioned relative to the body.

• Absolute generates an absolutely positioned element that is detached from the document stream and does not occupy the position of the document stream, which can be understood as floating above the document flow, positioned relative to the parent element of the previous set positioning, and positioned relative to the BODY element if it is not found.

• Fixed-build anchor element, the element out of the document flow, does not occupy the position of the document flow, can be understood as floating above the document flow, relative to the browser window to locate.

Offset of positioned element
The positioned element also needs to use left, right, top, or bottom to set the offset value relative to the reference element.

Position element level
The anchor element is floating on top of the normal document flow, and you can use the Z-index property to set the level of the element

The pseudo code is as follows:

.box01{    ......    position:absolute;  /* 设置了绝对定位 */    left:200px;            /* 相对于参照元素左边向右偏移200px */    top:100px;          /* 相对于参照元素顶部向下偏移100px */    z-index:10          /* 将元素层级设置为10 */}

Comprehension Exercises
Horizontally vertically centered bullet frame

New related style properties

/* 设置元素透明度,将元素透明度设置为0.3，此属性需要加一个兼容IE的写法 */opacity:0.3;/* 兼容IE */filter:alpha(opacity=30);

CSS Weights

CSS weights refer to the priority of the style, with two or more styles acting on an element, the higher-weighted style works on the element, the same weight, and the post-written style overrides the previous style.

Rank of weight

You can divide the style of application into several levels and calculate the weights according to the rank
1, inline style, such as: style= "", Weight value of 1000
2, ID selector, such as: #content, weight value of 100
3, class, Pseudo-class, such as:. Content,: Hover weight value is 10
4, Tag Selector, such as: div, p weight value of 1

Calculation examples of weights

1. Example one:

<style type="text/css">    div{        color:red;    }        </style>......<div style="color:blue">这是一个div元素</div><!-- 两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，所以文字的最终颜色为blue -->

2. Example two:

<style type="text/css">    body #content .main_content h2{        color:red;        }    #content .main_content h2{        color:blue;    }</style>......<div id="content">    <div class="main_content">        

Photoshop assisted measurement and color extraction

How to preview a picture
1, picture shrinkage
2. Picture panning

Dimensional measurement methods
1, set the unit
2, rectangular frame measurement, adjustment rectangle
3, the text size measurement

Method of color Extraction
1. Color Extraction Tool
2. Front View button

CSS Color notation
There are three main ways to represent CSS color values:
1, color name, such as: Red Red, gold gold
2, 16 binary numerical representation, such as: #ff0000 is red, this can be written in simple #f00

Process Order

1. Create a project directory
Generally first create a total directory, and then in this directory to create images, CSS, JS three directories, three directories to put pictures, CSS files and JS files.

2, transduction
Using Photoshop to slice a webpage, the image you use needs to be a PSD format with layers.

3. New HTML file, new CSS file

4, reference, write HTML and CSS code

HTML and CSS Advanced