CSS初学

行内>页面内>外部样式表

后代选择器
格式：父元素/祖先元素 子元素

类选择器
ID选择器
标签选择器
display：block 转换为块级元素（占一行）
display：inline-block 转换为行内块（宽高起作用）
display：inline 转换为行内元素（占内容位置）

父子选择器
父元素>子元素

display：block 显示
display:none 隐藏

visibility: hidden;隐藏
visibility:visible; 显示

display和visibility区别：
display隐藏不占位置
visibility隐藏占位置

盒子模型
布局：
1、浮动流
2、标准流
3、浮动+标准流 ＝ 混合流

*{
通配符
margin：0；
padding：0；
}

color：red 字体颜色：红色
text-align：center：文本居中 left right justify（两端）
font-weight：bold 字体加粗 bolder
font-style：italic 字体倾斜
text-decoration:underline/none 带下划线/去掉下划线
font-size：19px 字体大小：19像素
font-family ：“宋体”
font：大小 字体

background：背景颜色，背景图片 背景是否重复 背景定位位置
url图片路径
repeat/no-repeat/repeat-x/repeat-y重复/不重复/水平重复/垂直重复
left/center/right 水平左中右
top/center/bottom 垂直上中下
background-size：精确像素/百分比/em/rem 背景图片大小控制
backgrounp-attachment：scroll/fixed 背景图片固定定位 滚动/固定

border：solid 1px red 边框线：实线 线粗细 线颜色
线形：solid实线 double双线 dotted点状线 dashed虚线 none无边框线
border-style值：
double 定义两个边界，两个边界的宽度和线宽值相同
groove 3D沟槽边界，效果取决于边界的颜色值
ridge 3D脊边界，效果取决于边界的颜色值
outset 3D突出边框，效果取决于边界的颜色值

填充：
padding-top
padding-left
padding-right
padding-bottom
padding:值

padding:a
一个值表示四边相同的填充
padding:a b;
两个值表示上下是a，左右是b
padding:a b c;
三个值表示上是a,左右是b,下是c
padding:a b c d;
四个值表示：上，右，下，左

边距：
margin-top
margin-left
margin-right
margin-bottom
简写：
margin:值

margin:a
一个值表示四边相同的填充
margin:a b;
两个值表示上下是a，左右是b
margin:a b c;
三个值表示上是a,左右是b,下是c
margin:a b c d;
四个值表示：上，右，下，左

ling-height 行高
一般用行高布局垂直对齐方式
行高和高度一致，内容在垂直正中间
行高比高度大，内容在偏下
行高比高度小，内容偏上

text-indent:2em; 首行缩进两个字符

颜色： red #451551 #000 rgb（255，0，0）

浮动
float：left/right 左右浮动

margin：auto 水平居中

文本转换：text-transform：uppercase/lowercase/capitalize
大写，小写，首字母大写

列表
list-style-type 列表样式
list-style-image 列表图片
list-style

伪类选择器
a:link 访问前的状态
a:hover 鼠标悬停状态
a:active 鼠标点击状态
a:visited 访问后的状态

*{
    margin: 0;
    padding: 0;
}
body{
    background: url("../images/body.gif");
}
#one{
    width: 960px;
    background:white;
    margin: auto;
    font-size: 14px;
}
.fl{
float: left;
}
.fr {
    float: right;
}
#top{
    width: 960px;
    height: 54px;
    background: #ddd;
}
.top-right{
    border-top: solid 5px black;
    margin-top: 9px;
    width: 730px;
}
.top-right a{
    text-decoration: none;
    height: 40px;
    line-height: 40px;
    color: black;
    float: left;
    padding:0 13px ;
}
.top-right a:hover,.one{
    background: #cc0202;
}
#banner{
    height: 186px;
}
#menu{
    background: #f8f8f8;
    height: 50px;
    line-height: 50px;
}
#menu a{
    text-decoration: none;
    color: black;
}
#shows>h2{
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 15px 5px;
    border-bottom: dashed 1px #aaaaaa ;
}
#shows .four{
    text-align: right;
    color: #8c9496;
    margin-right: 10px;
    line-height: 0px;
}
#shows>p{
    text-align: left;
    text-indent: 2em;
    line-height: 30px;
    font-size: 12px;
    padding: 10px 35px 10px;
}
.two{
   padding:20px 230px 10px;
}
#footer{
    clear: both;
    height: 80px;
    background: #B2A695;
}
#footer p{
    text-align: center;
    padding-top: 25px;
    font-size: 14px;
    line-height: 10px;
    font-weight: bold;
}