第一节背景样式1、背景颜色：background-colorbackground-color:red背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb，也可以是rgba；2、背景图片：background-imagebackground-image:url(bg01.jpg);背景图片的大小可以和容器大小不一样，背景图片不会占位，如果容器大，背景图片小，背景图片会平铺并铺满整个容器3、背景图片位置：background-positionbackground-position:10pxpx;背景图片定位的值是两个单位，分别代表坐标x，y轴背景图片定位的值可以是应为left，right，top，bottom，center背景图片定位的值也可以是百分比或者像素4、背景图片重复：background-repeatbackground-repeat:no-repeatno-repeat设置图像不重复，常用round自动缩放直到适应并填充满整个容器space以相同的间距平铺且填充满整个容器5、背景图片定位：background-attachmentbackground-attachment:fixed背景图像是否固定或者随着页面的其余部分滚动background-attachment的值可以是scroll（跟随滚动），fixed（固定）background缩写：background:#ffurl(bg01.jpg)no-repeatfixedcenter第二节字体样式1、字体族：font-familyfont-family:微软雅黑,黑体;使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）字体大小：font-sizefont-size:12px;网页默认字体大小是16px2、字体粗细：font-weightfont-weight:;normal（默认）bold（加粗）bolder（相当于strong和b标签）lighter（常规）~整百（=normal，=bold）3、字体颜色：color颜色的英文单词color:red;十六进制色：color:#FFFF00;RGB(红绿蓝)color:rgb(,,0)RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(,,0,0.5)4、字体斜体：font-stylefont-style:italicnormal文本正常显示italic文本斜体显示oblique文本倾斜显示第三节文本属性1、行高：line-heightline-height:50px;可以将父元素的高度撑起来文本水平对齐方式：text-alignleft左对齐center文字居中right右对齐文本所在行高的垂直对齐方式：vertical-alignbaseline默认sub垂直对齐文本的下标，和sub标签一样的效果super垂直对齐文本的上标，和sup标签一样的效果top对象的顶端与所在容器的顶端对齐text-top对象的顶端与所在行文字顶端对齐middle元素对象基于基线垂直对齐bottom对象的底端与所在行的文字底部对齐text-bottom对象的底端与所在行文字的底端对齐2、文本缩进：text-indenttext-indent:2em;通常用在段落开始位置的首行缩进字母之间的间距：letter-spacing单词之间间距：word-spacing文本的大小写：text-transformcapitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义仅有小写字母。文本的装饰：text-decorationnone默认。underline下划线。overline上划线。line-through中线。自动换行：word-wrapword-wrap:break-word;第四节基本样式1、宽度：widthwidth:px;定义元素的宽度2、高度：heightheight:px元素默认没有高度需要设置高度可以不定义高度，让元素的内容将元素撑高3、鼠标样式：cursor定义鼠标的样式cursor:pointerdefault默认pointer小手形状move移动形状4、透明度：opacityopacity:0.3透明度的值可以使0~1之间的数字，0代表透明，1代表完全不透明透明的元素，只是看不到了，但是还占据着文档流5、可见性：visibilityvisibility:hidden;visible元素可见hidden元素不可见collapse当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。溢出隐藏：overflow设置当对象的内容超过其指定高度及宽度时如何显示内容visible默认值，内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。6、边框颜色：outlineinput文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框outline:1pxsolid#ccc;outline:none清除边框第五节、样式重置早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。清除元素的margin和padding，去掉自带的列表符，去掉自带的下划线*{margin:0;padding:0;}/*清除页面所有标签自带的外间距和内填充*/ul,ol{list-style:none;}/*去掉自带的列表符*/a{text-decoration:none;}/*去掉自带的下划线*/img,input{border:none;}/*清除IE下自带的边框*/第六节、盒模型样式HTML元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。元素分类转换displayblock：将元素转换为块级元素inline：将元素装换为行级元素inline-block：将元素转换为内联块元素none:将元素隐藏描边borderborder:2pxsolid#f00;盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。线条的样式：dashed（虚线）
dotted（点线）
solid（实线）。css样式中允许只为一个方向的边框设置样式：下描边border-bottom:1pxsolidred;上描边border-top:1pxsolidred;右描边border-right:1pxsolidred;左描边border-left:1pxsolidred;间距：margindiv{margin:20px10px15px30px;}元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。也可以分开写：div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;}当margin给一个值时：指的是四个方向当margin有两个值时：指的是上下左右当margin给三个值时：指的是上左右下当margin给四个值时：值的是上右下左内填充：paddingpadding:10px元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。如下代码：div{padding:20px10px15px30px;}顺序一定不要搞混。可以分开写上面代码：div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;}当padding给一个值时：指的是四个方向当padding有两个值时：指的是上下左右当padding给三个值时：指的是上左右下当padding给四个值时：值的是上右下左web第七节、浮动float1、浮动原理浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。2、清除浮动带来的影响clear清除浮动：none:不清除（默认值）。left:不允许左边有浮动对象right:不允许右边有浮动对象both:不允许两边有浮动对象利用伪类实现清除浮动.clearFix{content=;display:block;width:0;height:0;clear:both;}第八节、定位position定位功能可以让布局变的更加自由。1、层模型--绝对定位（相对于父类）如果想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。position:absolute;div{width:px;height:px;border:2pxredsolid;position:absolute;left:px;top:50px;}/*实现div元素相对于浏览器窗口向右移动px，向下移动50px。*/2、层模型--相对定位（相对于原位置）如果想为元素设置层模型中的相对定位，需要设置position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。position:relative;#div1{width:px;height:px;border:2pxredsolid;position:relative;left:px;top:50px;}/*相对于以前位置向下移动50px，向右移动px;*/3、层模型--固定定位（相对于网页窗口）与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。position:fixedCSS选择器「程序员培养之路第五天」CSS概述「程序员培养之路第四天」页面结构与模块划分「程序员培养之路第三天」
转载请注明：http://www.aierlanlan.com/grrz/8662.html
