CSS-Day2

CSS 列表

• 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 ol - 列表项的标记有数字或字母
• ul.a {list-style-type:circle;}
• ul.b {list-style-type:square;}
• ol.c {list-style-type:upper-roman;}
  ol.d {list-style-type:lower-alpha;}

ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}  移除列表前面的标记

CSS 表格

table,th,td
{
    border:1px solid black;     创建表格
}

<table>
<tr>
<th>Firstname</th>         th是表头
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>                td是表格内容
<td>Griffin</td>
</tr>

table { border-collapse:collapse; }  这条语句可以让双边框变成单边框

table,th, td { border: 1px solid black; }

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

th
{
    background-color:green;
    color:white;
}
td
{
    background-color:red;
    color:black;
}

CSS 盒子模型

div.ex
{
width:220px;
height:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

CSS 边框

p.one
{
    border-style:solid;
    border-color:red;
}

边框简写：border:5px solid red;

CSS padding（填充）

p
{
    background-color:yellow;
}
p.padding
{
    padding:25px 50px;
}

CSS 分组 和 嵌套 选择器

• p{ }: 为所有 p 元素指定一个样式。
• .marked{ }: 为所有 class="marked" 的元素指定一个样式。
• .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

CSS Display(显示) 与 Visibility（可见性）

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

CSS 布局 - Overflow

#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid #ccc;
}

CSS Float(浮动)

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

CSS 组合选择符

在 CSS3 中包含了四种组合方式:

• 后代选择器(以空格     分隔)
• 子元素选择器(以大于 > 号分隔）
• 相邻兄弟选择器（以加号 + 分隔）
• 普通兄弟选择器（以波浪号 ～ 分隔）