css基础

对于元素的样式可以在标签中直接设置，也可以用css进行设置

1. 在标签的style属性进行设置

   例：

<div style="background-color:#245a2;height:48px"></div>

1. CSS选择器详细参考文档

• id选择器（#id）

    <!--写在head标签内-->
    <style>
        #i3{
            background-color:#245a2;
            height:48px;
        }
    </style>

    <div id="i3"></div>

• 类选择器（.c1）

    <!--写在head标签内-->
    <style>
        .c1{
            background-color:#245a2;
            height:48px;
        }
    </style>

    <div class="c1"></div>

• 标签选择器（div）

    <!--写在head标签内-->
    <style>
        div{
            background-color:#245a2;
            height:48px;
        }
        p{
            font-size=18px;
        }
    </style>

    <div>所有的div被设置颜色和高度48px</div>
    <p>所有的p标签被设置字体大小</p>

1. CSS注释/* 注释内容 */

2. 关联选择器(空格)

<style>

#i3 span{

….
}
/* 对id为i3的元素内包含的span设置样式

span div{
    …
}
/* 对所有span标签内的div设置样式 */

.c1 div{
    …
}
/* 对class属性为c1的元素内的div设置样式 */
</style>

1. 组合选择器（英文逗号）

<style>
#i3,.c1,span{
    …
}
/* 同时对id为i3的元素，类为c1的元素，span标签设置样式 */
</style>

1. 属性选择器(中括号)

<style>
input[type='text']{
    …
}
/* 对所有属性type='text'的input标签设置样式 */
c1[name='limich']{
    …
}
/* 对所有属性name='limich'且class为c1的标签设置样式 */
</style>

CSS优先级

• 标签中的style属性>head标签中的选择器
• class="c1 c2"有重复设置的样式时，按head标签中c1 c2 的编写顺序，写在后的优先级高（后面的覆盖前面的）

写在文件内的CSS

• 在head标签中引用<link rel="stylesheet" herf="*.css" />

---

边框border:1px solid red(边框宽度1像素，实体，红色)

• border:宽度 样式 颜色
• border-left（对左边框设置），border-top,boeder-right,border-bottom

字体大小，水平居中，垂直居中等

• font-size:16px 字体大小
• text-align:center 水平居中
• line-height:XXpx 适应居中，把文字放置在XXpx高度的中间位置，设置时XX应和元素高度相同。
• color 字体颜色
• font-weight 加粗设置

float浮动

• float:left 在上级标签内靠左浮动
• 让标签在父级标签内浮动，在子标签末尾，父标签闭合前加入：<div style="clear:both"></div>

display

行内标签：不可设置高度、宽度、边距padding margin


块级标签：可以设置高度、宽度、边距padding margin

• display 设置为inline，将标签设置为行内标签
• display 设置为block，将标签设置为块级标签
• display 设置为inline-block，
  • 具有行内标签属性，默认不可设置高度宽度
  • 具有块级标签属性，可设置高度宽度
• display:none 让标签消失

边距padding margin

• margin 设置标签的边框外的边距（外边距），设置后标签本身不增加大小
• padding 设置标签内部对于标签本身边框的距离（内边距），设置后标签的大小改变
• 元素的大小 例如高：margin值+边框宽度+padding-top值+height值+padding-bottom值+边框宽度+margin值

---

CSS之position

• position:fixed; 将标签固定在浏览器的某个位置（top,left,right,bottom）
• absolute 绝对定位，常和relative结合使用
• relative 相对定位
• 外层使用relative，子层使用absolute,则子层绝对定位在外层的某个位置

overflow

• 设置标签内容大小超出标签设定大小时的显示方式，hidden（隐藏），auto（自动，滚动条显示）

：hover

• 鼠标停留时的样式

a:hover{
    …设置a标签鼠标停留时的样式
}

background

• background-image:url('image/x.gif') 背景图片，默认自动堆叠
• background-repeat:堆叠方式，no-repeat(不堆叠)，repeat-x(横向堆叠)，repeat-y(纵向堆叠)
• background-positon-x:背景图片X轴偏移
• background-position-y:背景图片Y轴偏移
• 简写：background:颜色 url() X偏移 Y偏移 堆叠方式

---

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">