Head Html Css second edition notes

A, quote

. 1 < Q > the I like </ Q > briefly "Reference" in the text part, and . 1 < blockquote > ago Member AOG aogag </ blockquote > is a large body of text and reference independent display

二、 <a>

Creating a destination

. 1  < H2 > < A ID = "Chai" > Chai Tea </ A > </ H2 > // create a target anchor
 2  < A the href = "index.html # Chai" > See Chai Tea </ A > / / link to position

View Code

Id attribute to create a target anchor on the page, in the "#" followed by the target anchor id, link to a specific location to the page.

Use target to open a new window

1 <a target="_blank" href="http://buzz.headfirsttlabs.com" title="ew">Caffeine Buzz</a>

View Code

Third, underlined text

text-decoration:underline

Fourth, the link to an external style sheet

Five, font-family works

1 body{ 2 font-family: Verdana, Geneva, Arial; 3 }

g in order to find the browser, if the font is not the first, to show the second, and so on.

Sixth, the font size

. 1  font-size: 15px;
 2  font-size: 150%;
 . 3 font-size: 1.2em // show scaled font size should be 1.2 times

Seven border

border-width border width

border style border-style: solid line, dashed, etc.

border-color border color

Eight, the width of an element

If we do not set the width of an element, it will default to "auto", full of all the content space.

And we can not define the entire width of the element can only define the content area, padding, and border width of the border, these add up to the entire width of the element.

Nine, text-align

setting text-align centers the text, text-align property affects the alignment of an element in the style of all inline content, so that all of its contents are centered, and used only for text-align block elements, if the elements act directly on the inline It is useless.

Example: If a div contains img, when using the text-align this div, the image will be centered

十、 line-height

It can be used to determine the line spacing

XI browser place elements

When the browser is placed side by side two inline elements, if the left boundary element has 10 pixels, there are 20 pixels to the right of the boundary, then there will be a space 30 between the two pixel elements.

When the browser blocks two elements placed side by side, putting together a common boundary overlap, the overlap is the maximum height of the boundary of the boundary

XII drift property float

For a width attribute must be set float element give

clear attribute is the element flows into the page, not allowed to drift elements that appear around the element;

As clear: right; this will make the right elements can not appear drift elements

XIII, absolute arrangement

position：absolute；

And the flow element ignore the existence of absolute arrangement of elements, that is clear no longer work

Fourth, securing arrangement

After using a fixed layout, you place the elements will stay in place, and then did not move.

position：fixed

XV table

If the header on the left side of the table rather than the top, you will need to table header elements were placed in each line to replace the original first line. Each of the <th> element at the beginning of each line, then all of the header in the first line.

border-collapse: collapse; two adjacent border can be combined into a single frame

border-spacing: mpx; border spacing provided

vertical-align: top / bottom / center; table in vertical arrangement

XVI List

1、 list-style-type：disc/circle/square/none; 设置列表前面的样式

2、 list-style-position：inside/outside; 如果属性设置为inside，则文本就会环绕在标记的下面，设置为outside，那么标记就会环绕在文本的下面。

十七、表单

1、输入单选框

2、输入复选框

3、 maxlength属性可以限制用户最多输入的字符数。

4、表单中的每个输入控件都有一个那么属性，即都有一个唯一的名字，当我们单击提交按钮时，浏览器会将提取的所有名字连同他们的名字一起发给服务器。例如，当你将邮编“90050”输入到名为“zip”的<input>的文本元素时，提交表单后浏览器会发送“zip=90050”给服务器。

注意：<option>元素没有name属性，因为全部的option元素都是由<select>元素创建的，只要一个名字命名就可。

5、 POST和GET

两者都是把表单数据发送给服务器，但是POST，是把表单变量打包后隐藏在后台发送给服务器，GET也是把表单变量打包后，不过在它向浏览器发送请求之前，附加在URL的末端部分。

即POST发送的用户不可见，而GET发送的用户可见。

6、 Fieldsets和legends

7、label标签

8、文件输入

9、多选属性 multiple

十八、伪元素选择符

1 p:first-letter{
2     font-size:3em;
3 }//:first-letter伪元素选择符可用于选择一个块元素的第一个字，允许你设置首字大写和首字下沉。
4 p:first-line{
5 font-style:italic;
6 }//:first-line用于选择某一段的第一行文字。