CSS基础教程

CSS基础教程主要内容•CSS基础概念速览•CSS属性详解2CSS基础概念速览31.定义及样式引用方式2.规则和选择符3.具体性和层叠性4.度量单位和颜色5.盒子模型WhatandWhy•CSS，即层叠样式表，定义了如何展现HTML元素的样式•优点：–HTML负责结构，CSS负责外观，职责分离更清晰–系统更新和维护更轻松–极大的提高工作效率，一个样式表管理多个页面4CSS样式的引用方式•外部引用样式表（link）•嵌入式样式表（Embed）•行内样式表（inline）•import方式5实际工作中，不允许使用行内样式表、import引用方式CSS规则•定义：是一个样式定义的指令集，可包含多个样式定义6body{font-family:宋体;}CSS规则选择符样式定义属性值每条规则的最后一条样式定义可以不以分号结尾，但实际工作中，让每条样式定义(声明)都以分号结尾，是个好习惯！CSS选择符•定义：用于从HTML中选择元素•分类：–全体选择符：*{color:red;}–元素选择符：div{color:red;}–类选择符：.title{color:red;}–id选择符：#submit{color:red;}–伪类选择符：:hover{color:red;}–后代选择符：.listh3{color:red;}–组合选择符：div.author{color:red;}–分组选择符：div,p,span{color:red;}7CSS的具体性•当一个元素同时符合多条规则时，相对具体的规则会覆盖相对不具体的规则。•具体性比较：全体选择符元素选择符类选择符ID选择符内联样式•另外：–拥有再多的类选择符，也不可能比得上拥有ID选择符更具体–。。。。8CSS的层叠性•具体性相同的两条规则，按其出现的顺序依次覆盖•层叠性比较：浏览器默认样式外部样式表嵌入样式表内联样式表•另外，在每个样式表的内部，同样遵守先后顺序的原则，总而言之，越靠近元素的规则，越是胜利者。9CSS的度量单位•常见的度量单位：px、em、%–px是像素Pixel的缩写，是相对长度单位，相对于显示器分辨率而言的，也是我们最常用的度量单位；–em相对当前容器内的文本字体尺寸，em还具有继承父级容器的字体大小的特性，所以值不固定，相对较难控制，一般西方站点中使用较多。10CSS的颜色•常见的颜色表示法：英文名称、16进制法、rgb法：–英文名称法：red、pink、yellow...–16进制法：形如#3399cc的16进制，可以简写为#39c；–rgb法：形如rgb(0,0,255)，分别代表红绿蓝3种成分的值；11CSS的盒子模型•CSS中，每个HTML元素生成一个矩形框，它描述了该元素在页面布局中所占的空间大小，并会影响到其他元素的大小和位置。•盒子模型由内而外包含以下内容：内容、填充（padding）、边框（border）、边界（margin）12margin区域边框内容区域padding区域CSS属性详解131.文本样式2.盒子模型相关样式3.排版与定位相关样式文本：text-indent•作用：文本的首行缩进•取值：0、数值、百分比•理论上，text-indent可以应用于任何块级元素14p{text-indent:30px;}文本：text-align•作用：文本的对齐方式•取值：left、center、right、justify•学习了这个标签，你应该可以放心的抛弃center元素了15div{text-align:center;}文本：white-space•作用：处理文本或单词间的空白•取值：–pre：保留空白–nowrap：文本不换行–normal：忽略空白•经常可以看到很多人在td标签中使用nowrap属性，学习了这个标签，你可以放心的抛弃这种写法了16td{white-space:nowrap;}文本：line-height•作用：设置行间距，即行高•取值：数值、%、normal•line-height不可以设置为负值。•使用px为单位时，一般24px~25px是常用的值。17p.content{line-height:24px;}文本：vertical-align•作用：设置文本的垂直对齐方式•取值：%、baseline、super、bottom、sub、top、text-top、text-bottom、middle18p.content{vertical-align:middle;}文本：word-spacing•作用：设置文字间距•取值：数值、normal•这里的文字的含义：以空格隔开的字符串（英文效果显著）•实际效果其实就是增大一段文本中空白字符（空格）的宽度（整段汉字可能会没有效果，因为汉语段落一般都没有空格）19p.content{word-spacing:22px;}文本：letter-spacing•作用：设置字母间距•取值：数值、normal•这里的字母的含义：英文是字母，中文是单个的字•实际效果：在每个字母或汉字中间插入一段空白距离20p.content{letter-spacing:22px;}文本：text-decoration•作用：设置文本效果•取值：none、underline、overline、line-through、blink21p.content{text-decoration:underline;}文本：font-family•作用：设置字体•取值：字体名称22p.content{font-family:宋体;}文本：font-size•作用：设置字体大小•取值：数值、%、xx-small、x-small、small、medium、large、x-large、xx-large、smaller、larger•一般都是直接赋值的方式，常用12px、14px大小；•相对大小的字体，慎用。23p.content{font-size:12px;}文本：font-weight•作用：设置字体粗细•取值：normal、bold、bolder、lighter、数值•数值很少使用；24p.content{font-weight:bold;}文本：color•作用：设置字体颜色•取值：颜色的英文单词、16进制法、rgb法25p.content{color:#006699;}框模型：回顾26margin区域边框内容区域padding区域内容、补白（padding）、边框（border）、边界（margin）widthheight框模型：width•作用：设置元素的内容区域的宽度•取值：数值、%、auto•框模型的宽度和这里说到的width属性不是一回事：•框模型宽度=width+padding-left+padding-right+border-left+border-right27div{width:246px;}框模型：height•作用：设置元素的内容区域的高度•取值：数值、auto•框模型的高度和这里说到的height属性不是一回事：•框模型高度=height+padding-top+padding-bottom+border-top+border-bottom28div{height:148px;}框模型：margin•作用：设置元素的外边界，边框之外的一段空白•取值：数值、%、auto•margin不会影响元素盒子自身的大小，但会影响盒子与其他元素的布局样式•margin：10px10px10px10px;(上、右、下、左)•margin：10px10px;（上下、左右）•margin：10px;（全部）•margin-left、margin-right、margin-top、margin-bottom29div{margin:20px;}框模型：padding•作用：设置元素的补白，内容到边框的一段空白•取值：数值、%•padding：10px10px10px10px;(上、右、下、左)•padding：10px10px;（上下、左右）•padding：10px;（全部）•padding-left、padding-top、padding-right、padding-bottom30div{padding:10px;}框模型：border-style•作用：设置元素的边框样式•取值：none、dotted、dashed、solid、double、groove、ridge、inset、outset•背景颜色结束于边框的外边界31div{border-style:solid;}框模型：border-width•作用：设置元素的边框宽度•取值：数值、thin、medium、thick•border-top-width、border-bottom-width、border-left-width、border-right-width32div{border-width:1px;}框模型：border-color•作用：设置元素的边框颜色•取值：颜色名称、16进制法、rgb法•border-top-color、border-bottom-color、border-left-color、border-right-color33div{border-color:#ccc;}框模型：浮动•浮动，是CSS布局中的一个重要的概念：–在容器内，浮动的元素会向左或向右移动，直到碰到另一个浮动元素，或者碰到容器的边框–如果一排N个高度不同的浮动元素，当一行排不满的时候而换行的时候，可能会因为高度问题而错位34框模型：float•作用：设置浮动，页面排版的主要属性之一•取值：left、right、none•浮动元素会自动被设置成块级元素；•设置了float:left属性的元素总是跟在另一个float:left的元素后面，或者就是新起一行35div.left{float:left;}框模型：clear•作用：清除浮动，页面排版的主要属性之一•取值：left、right、both、none36div.left{float:left;}框模型：background-color•作用：设置元素的背景色•取值：颜色的英文单词、16进制法、rgb法37p.content{background-color:#006699;}框模型：background-image•作用：设置元素的背景图片•取值：形如url(../images/logo.png)38.logo{background-image:url(../images/logo.png);}框模型：background-repeat•作用：设置元素的背景图片的平铺模式•取值：no-repeat、repeat-x、repeat-y39.logo{background-image:url(../images/logo.png);background-repeat：no-repeat;}框模型：background-position•作用：设置元素的背景图片的位置•取值：数值、top、left、right、bottom、center40.logo{background-image:url(../images/logo.png);background-position：lefttop;}列表：list-style-type•作用：设置列表项的样式•取值：none、disc、circle、square、decimal、upper-alpha、lower-alpha、upper-roman、lower-roman•有序列表和无序列表都可以使用41.list{list-style-type:none;}定位：position•作用：设置定位类型•取值：relative、absolute、fixed、static、inherit42div.aside{position:relative;}定位：top、left、right、bottom•作用：设置元素与其包含块的边距的距离•取值：数值、%、au