一个好的程序员web前端分享CSS属性的组成和作用学习目标1、css属性和属性值的定义2、css文本attributes3、css列表属性4、css背景属性5、css边框属性6、css浮动属性1、css属性和属性值属性的定义：attribute是指定选择器的属性，它是css的核心，css2都有150多个attribute属性值：属性值包括Statutory属性值和常用的数值加单位，比如25px，或者颜色值等2.CSS文本属性1.文字大小：{font-size:12px;}unit也可以是em，是父元素font-size的倍数；/系统默认字体大小为16px说明：1）属性值为数值时，属性值必须加上单位，属性值为0时除外。2）单位也可以是pt，9pt=12px；3）为了减少系统间字体显示的差异，IE浏览器厂商Netscape和Mozilla于1999年召开会议，共同确定16px/ppi为标准字体大小的默认值。那是1em。默认情况下，1em=16px，0.75em=12px；rem2,textfont:{font-family:font1,font2,font3;}注意：浏览器会先寻找font1，如果存在则使用改变字体来显示内容。如果字体1不存在，则查找字体2。如果字体2不存在，则按照字体3显示内容。如果字体3不存在，则按照字体3显示。系统默认字体；字体为中文时，需加双引号；当英文字体由多个单词组成时，需要用双引号引起来，例如（“TimesNewRoman”）；当英文字体只有一个单词时，不需要加双引号；例如：（宋体）；Windows中文版操作系统下，默认中文字体为Arial或NewSong，默认英文字体为Arial.3。文字颜色：{color:颜色值;}red/#f00/rgb(255,0,0)说明：用十六进制（计算机中一种表示数据的方法）表示颜色值：01234567890123456789ABCDEF颜色模式：浅色模式RGBFF0000色值的缩写：当代表三基色的三组数字同时相同时，可缩写为三位数；用十六进制表示颜色值时，需要在颜色值前加“#”fa0000RGB表示：color:rgb(255,0,0);4．Font-weight：bolder（加粗）/bold（加粗）/normal（常规）/100—900；注意：在css规范中，把字体和文字的粗细分为9个等级，分别为100-900，其中100对应最轻的字体变形，900对应最重的字体变形，5.文字倾斜度：font-style:italic/oblique/normal（取消倾斜，正常显示）；注意：italic和oblique都是倾斜的文字，不同的是Italic指的是斜体文字，而Oblique是倾斜的文字。对于没有斜体的字体，应该使用Oblique属性值来实现倾斜的文字效果。6、水平对齐{text-align:left/right/center/justify（在某些浏览器中，它不适用于中文）;}仅针对文本或图片7.垂直对齐{vertical-align:top/bottom/middlecenter/baseline基线（某些特定元素类型有效）;}8.文本行高{line-height:normal/value;}line-height:20px;行高：2em；（省略行高单位时，默认为em）说明：当单行文本的行高等于容器高度时，容器中单行文本的垂直中心可以达成一致；当单行文本的行高小于容器高度时，单行文本可以在容器上方垂直居中；当单行文本的行高大于容器高度时，单行文本可以在容器下方垂直对齐（IE6及以下版本存在浏览器兼容性问题）9、文字修饰text-decoration：none/underline/overline/line-through说明：none：无修饰underline：加下划线overline：加上划线line-through：加删除线10，首行缩进：{text-indent:value;}说明：1)text-indent可以取负值；2)text-indent属性只对第一行有效11.检索英文字母大小写{text-transform:none无转换/大写首字母大写/大写全大写/小写全小写;}。12、字间距{letter-spacing:value;}控制英文字母或汉字的字间距。13、字间距{word-spacing:value;}控制英文单词的字间距。扩展名：14.文本流控制{layout-flow:horizo??ntal/vertical-ideographic;}描述：1）horizo??ntal：从左到右2）vertical-ideographic：从上到下15.速记文本属性：font：bolderitalic12px/1.5em"宋体";缩写中，字体和字体大小是必要的字体属性的缩写：字体大小，行高，字体说明：字体的属性值应该按以下顺序写（每个属性之间用空格隔开）)顺序：font-stylefont-weightfont-size/line-heightfont-family(1)缩写时，font-size和line-height只能由斜杠/组成，不能单独写。(2)只有同时指定font-size和font-family属性时，该缩写才有效。如果不设置font-weight和font-style，它们将使用默认值。三、CSS列表属性1、定义列表符号样式list-style-type：disc（实心圆）/circle（空心圆）/square（实心方形）/none（去除列表符号）；2、使用图片作为列表符号list-style-image:url（所用图片的路径和全名）；3.定义列表符号list-style-position的位置：outside（外侧）/inside（内侧）；列表样式：无；去除列表符号4.边框属性及属性值border：边框宽度边框样式边框颜色；例如：border:5pxsolid#ff0000borderwidth:border-width:bordercolor:border-color:borderstyle:border-style:solid（实线）/dashed（虚线）dotted（虚线）double（双线）)无（去除边框）；单向边框可以单独设置，border-bottom：边框宽度边框样式边框颜色；bottomborderborder-left:borderwidthborderstyleborderColor;leftborderborder-right：边框宽度边框样式边框颜色；rightborderborder-top：边框宽度边框样式边框颜色；上边框五、CSS背景属性1、背景颜色{background-color:颜色值;}2、背景图片设置background-image:url（背景图片的路径和全名）；3.背景图片平铺属于{background-repeat:no-repeatnotiling/repeattiling/repeat-xX-axistiling/repeat-yY-axistiling}4.背景图片的位置{background-position:left/center/right/valuetop/center/bottom/value;}水平方向对齐（left/center/right）或垂直方向valuealignment（top/center/bottom）或valuebackground-position:值1值2；两个值：第一个值表示水平位置的值，第二个值：表示垂直位置的值。当两个值都居中时，写一个值可以表示水平位置和垂直位置；当元素的背景图变小变大时，如果想在右下方显示背景图，将背景图的位置调整为负值；5、背景图片固定{background-attachment:fixed/scrollscrolling;}fixed固定，不随内容滚动，根据可见窗口固定位置；scroll：随着内容滚动。网页常用图片格式1）jpg：有损压缩格式，通过损失图片本身的质量来减小图片的体积，适用于色彩丰富的图片；（由像素组成，像素越多越清晰）2）gif：无损压缩格式，支持透明，支持动画，适用于颜色数量少的图像；3）png：无损压缩格式，支持透明，不支持动画，（是Fireworks的源文件格式），适用于颜色数量少的图像Feverimages；6、CSS浮动属性语法：float:none/left/right；浮动的目的：让一个竖直的元素水平显示一个元素当设置float:left/right;时，元素会脱离文档流，不占用空间；一共有三个值：left：元素向左浮动right：元素向右浮动none：默认值，不浮动。清除浮动可以理解为打破水平对齐。清除浮动的属性很明确，语法：clear:none|左|对|bothnone：默认值。允许两边浮动物体left：清除左浮动/不允许左侧浮动right：清除右浮动/不允许右侧浮动both：清除两端浮动/不允许浮动物体Onethingtoremember就是对于CSSclearfloating（清晰），我们一定要牢记：这个规则只能影响使用clear的元素本身，不能影响其他元素
