HTML&CSS学习笔记

<table>

　　<thead>

　　　　<tr>            // table row

　　　　　　<th></th>　　　　// table head

　　　　</tr>

　　</thead>

　　<tbody>

　　　　<tr>

　　　　　　<td></td>　　　　// table data

　　　　</tr>

　　</tbody>

</table>

<span></span>

1. A type attribute that should always be equal to "text/css"
2. A rel attribute that should always be equal to "stylesheet"
3. A href attribute that should point to the web address of your CSS file

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

Many HTML elements support theborder property. This can be especially useful with tables.

There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. 

class           .
id              #
Classes are useful when you have a bunch of elements that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab.

div > p { /* Some CSS */ }
This only grabs <p>s that are nesteddirectly inside of <div>s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside<div>s.
This allows you to take elements of different types and give them the same styling.

IDs, on the other hand, are great for when you have exactly one element that should receive a certain kind of styling.
This allows you to apply style to a single instance of a selector, rather than allinstances.

pseudo-class selectors for links

a:hover {
color: #cc0000;
font-weight: bold;
text-decoration: none;
}

a:link{}

a:visited{}

p:first-child {
    color: red;
}/*It's used to apply styling toonly the elements that are the first children of their parents.*/

p:nth-child(2) {
    color: red;
}/*第二个孩子颜色为红色*/

body :first-child{
font-size: 50px;
}

body :nth-child(4){
font-size: 26px;
color:blue;
}

Make sure to leave a space betweenbody :nth-child. If you don't have a space it means "find the body tag that is an nth-child". If you have a space it means "find the nth-child of the bodytag".

 
display: inline-block;  inline  none  block默认

none

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。

border-radius: 100%;
 position: relative;

float: right;  left;

??????clear: left; right; both;   position
clear 属性规定元素的哪一侧不允许其他浮动元素。
left 在左侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。

position

position：absolute这个是绝对定位；
是相对于浏览器的定位。
比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：<div class="1"></div><div class="2"></div>

当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右边，距离120px

position：absolute这个是绝对定位；它不会随着窗口大小变化，只是固定在一个特定的坐标轴上面；
position：relative 这是相对定位啊！和上面的相反，它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。。。

块，比如：div、p、h1~h6、ul、li
内联，比如：span、a

他们最大区别在于 块 元素后面的其他东西会被换到下行，而内联元素后面的东西不会

文档流： 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素。

3、区别：

A：行内就是在一行内的元素，只能放在行内，块级元素，就是一个四方块，可以放在页面上任何地方。

B：说白了，行内元素就好像一个单词，块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。

http://blog.csdn.net/liushuwei0224/article/details/8533157

http://zh.learnlayout.com/toc.html

我们现在一样大小了！

</div>

<div class="fancy">

万岁！

</div>

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

内联元素（inline element）一般都是基于语义级（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”

块元素一般都从新行开始，它可以容纳内联元素和其他块元素。常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。

<mete> 标签：提供页面的元信息(meta-information),比如页面关键字；

<script> 标签：因为Html页面是从上到下加载，不是加载完再一次性显示内容，而是一边加载一边展示内容。

把Script放在body的后面，类似于说明此Script里的代码要调用body里的元素。若放在Head标签里，运行到此script代码时，body里的元素还没有加载，会获取不到所需的元素信息。

内联样式 > 内部样式表 > 外部样式表

Id选择器 > class 类选择器 >元素选择器。