css基础

1.外部样式表 css代码和html代码都单独放在不同的文件中 内部样式表:指的就是css和html代码放在同一个文件中 css样式放在style标签中定义 style标签必须放在head标签内 内联样式表: 把css代码和html代码放在同一个文件中,与内部样式表不同的是 css样式不是在<style></style>标签对中定义，而是在style属性中定义

2.id和class id也可以写成name name是HTML的标准 id是XHTML的标准 现在网页的使用标准都是id  

3.元素选择器: div{属性:属性值...} id选择器 #box{width:100px;height:100px} #(id选择符前缀)box(id名称) 大括号里的是属性:属性值 class选择器:   .red{color:red;}  .（class选择符的前缀） red(class名称) 大括号里面是属性:属性值

4.子元素选择器 ：选中某个元素下的子元素 然后对该子元素设置css样式 #father(父元素选择) #p1(子元素选择){属性:属性值 } 说明:父元素和子元素必须用空格隔开  

5.相邻选择器:#lv+div {color:red;} lv是元素a  div是元素a的相邻的下一个兄弟元素

6.群组选择器 ： h1,h2,h3 span{color:red;} 

7.文本样式总结:font-family:字体名 font-size:像素值 color:字体颜色 在线调色板 font-weight 字体粗细 bold normal font-style(斜体) normal italic(斜体) oblique(直接倾斜)

8.css注释 /* */

9.text-decoration none underline下划线 line-throuth(删除线) overline(顶划线) text-transform none uppercase 转换成大写 lowercase 转换为小写 capitalize 每个单词的首字母大写 font-variant:normal small-caps(大写小型字母)  text-indent:像素值 用来控制文本的首行缩进

text-align:left(左对齐)center(居中对齐)right(右对齐) 该标签只针对文本文字和img标签 line-height:像素值(行高) letter-spacing:像素值 字间距 word-spacing:像素值

10.边框样式 要设置一个元素的边框 必须设置以下三个方面 ：1边框的宽度（border-width:像素值） 边框的外观(border-style:solid dashed) 边框的颜色(border-color) border :1px solid gray （大小 样式 颜色）

border-top border-bottom border-left border-right

11.背景颜色:background-color :颜色值

12.去除下划线的超链接 text-decoration:none

13.hover:用于指定当用户将鼠标悬停在元素上时应用的样式  ：hover

很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是div，img元素是相对于div元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（div元素）中设置text-align属性。

14.vertical-align top 顶部对齐 middle 中部对齐 baseline 基线对齐 bottom 底部对齐

15.文字环绕效果-float left:元素向左浮动 right:元素向右浮动 

16.设置图片与文字的间距:margin-top:像素值 margin-bottom;margin-left margin-right

17.border-collapse属性去除单元格之间的空隙 separate 默认值 边框分开不合并 collapse 边框合并 如果相邻则公用一个边框

18.border-spacing 表格边框间距 border-spacing:像素值 当设置了一个像素值时，这个值将用作横向和竖向 当设置了两个像素值时,第一个用做横向，第二个用作竖向

19.caption-side 表格标题位置 caption-side:top(默认值标题在顶部) bottom(标题在底部)

20.盒子模型：border 边框元素 margin 外边距 padding 内边距 content 内容

21.display:inlin-block 将元素呈现为内敛块级元素，可以自动调整宽度

22.padding ：20  四个方向  20 40 上下20 左右40  上右下左

23.<i></i>斜体

24.float:取值 left向左浮动 right向右浮动  变成浮动元素后 宽度不再延伸 而是由内容确定

25.clear清除浮动元素 clear:left(清除左浮动) right(清除右浮动) both(左右浮动一起清除 使用这一个足以)

26.固定定位元素 position:fixed(使得元素成为固定定位元素) 接着使用top bottom left right（这4个属性要联合一起使用） 当尝试拖动浏览器的滚动条 固定定位的元素不会发生位置变化 只需要使用top和left即可

27.相对定位元素 其位置是相对于它的原始位置计算而来的，相对定位是通过将元素从原来的位置向上，向下，向左，向右移动来定位的 positive:relative top bottom left right

28.绝对定位absolute(该元素浮与其他元素上面)