CSS
语法
.p1{
xxx:xx;
}
选择器
id选择器
使用id选择器，为有特定id的元素设置样式
写法：.id
class选择器
使用class选择器，为所有class名为特定值的元素设置样式
后代选择器
选择后代元素 .header nav
父子之间用空格隔开
并集选择器
为多个元素设置同一样式，多个之间用逗号隔开
header,body
链接伪类选择器
a{}
a:hover{}
样式创建
插入样式表的方法有三种:
外部样式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
内联样式 > 内部样式 >外部样式 > 浏览器默认样式
背景
使用backgroud相关的属性为元素的背景设置属性
例如：
background-color 背景颜色
background-image 背景图片
background-repeat 图片平铺
background-attachment 背景是否滚动
background-position 背景图像的起始位置。
颜色
通过颜色名字或者16进制进行设置
backgroud-color: #ffffff
图片
background-image:url(‘路径’)
背景平铺
background-repeat:repeat-x 水平平铺
background-repeat:repeat-y 竖直平铺
background-repeat:no repeat 不平铺
位置
background-position: center top 前面写水平位置，后面写竖直位置
文本
文本颜色
使用color属性
文本对齐
text-align:center;
可以使用center,left,right,justify等等
盒子模型
html中所有的模型都可以看做盒子
以label为例，使用label展示文字时，文字部分为content，在content外面，从内到外还有内边距padding，边框border，外边距margin
设置边框
border：
border-width：宽度
border-style：种类
border-color：颜色
border-方向：//设施单方向的边框
border-radius :15px //圆角
边距
padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
定位
position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
static: 元素的默认定位方式,按html文件出现的顺序排列
relative：按默认位置进行偏移
{
position:relative;
top:5px
}
fixed：固定，哪怕滚动
absolute：将使元素相对于其最近设置了定位属性（非static）的父元素
溢出
内容溢出元素框时 ，用overflow设置表现方式
visible 默认值。内容呈现在元素框之外。
hidden 内容被修剪，其余内容是不可见的。
scroll 显示滚动条查看其余的内容。
auto 显示滚动条以便查看其余的内容。
inherit 从父元素继承 overflow 属性的值。
浮动
float属性用于将元素尽可能往左或者右移动，直到它的外边缘碰到包含框或另一个浮动框的边框。
浮动元素之后的元素会围绕浮动元素。
为了避免这种情况，使用 clear 属性，clear:both。
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
