web前端基础学习入门篇（三）

CSS核心属性

一、CSS属性组成和作用

属性：属性值


1）每个css样式都必须由两部分组成：选择符（Selector）和声明（Decleration）


注：声明又包括属性（Properyt）和属性值（Value）


2）css属性：属性是指定选择符具有的属性，他是css的核心，css2共有150多个属性；


3）css属性值：属性值包括法定属性值和常规的数值加单位或颜色值(colorValue)；如（25px）
 
div{width:400px;}

二、CSS核心属性

 
A、关于文本的css声明


1、文本大小：{font-size:value;}


　例：div{font-size：12px/14px;}


说明：


1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。
2）单位还可以是pt，　9pt=12px;


3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小


默认值,即1em.默认情况下，1em=16px,0.75em=12px;


4)使用绝对大小关键字
xx-small   =9px
x-small    =11px
small      =13px
medium     =16px
large      =19px
x-large    =23px
xx-large   =27px


2、文本颜色：{color:颜色值;}
说明：


用十六进制表示颜色值：


0  1  2  3  4   5  6  7  8  9


0  1  2  3  4   5  6  7  8  9  A  B  C  D  E  F


颜色模式：光色模式


  R      G      B


FF      00     00


颜色值的缩写：


当表示三原色的三组数字同时相同时，可以缩写为三位;


当用十六进制表示颜色值时，需要在颜色值前加“#”


#  fa   00    00


3、文本字体：{font-family:字体1，字体2，字体3；}


说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，


按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；


当字体是中文字体时，需加双引号；


当英文字体中有空格时，需加双引号如（“Times New Roman”）


当英文字体只有一个单词组成是不加双引号；如：（Arial）；


Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.


 
4、加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;}




说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，


一般


500常规字体


600-900加粗字体


5、倾斜：font-style：italic(倾斜度小)/oblique（倾斜度大）/normal（取消倾斜，常规显示）;


说明：


 1）italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显。




6、水平对齐方式{text-align:left/right/center/justify（两端对齐中文不起作用）;}


7、垂直对齐方式{vertical-align:top/bottom/middle;}


8、行高{line-height:normal/ｖａｌｕｅ;}


说明：


1）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；


2)  当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；


3)  当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位.IE6及以下版本存在浏览器兼容问题


倍行高：{line-height:2;} 2倍 ，{line-height:1.5;}1.5倍；


注：当使用倍行高为单位时，不加PX；


*文字属性简写：font:12px/1.5em "宋体";


font属性的简写：


说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)


顺序: font-style | font-variant(小体大写字母) | font-weight | font-size / line-height | font-family


(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。


(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-


style , 以及font-varient , 他们会使用缺省值。


9、文本修饰：text-decoration:none/underline/overline/line-through/blink.(高版本浏览器不支持blink属性)


说明：


none:没有修饰


underline:添加下划线


overline:添加上划线


line-through:添加删除线


blink：闪烁
10、border:3px solid red;


      边框border:线型（solid/dashed/dotted/double）   粗细（数值+单位） 颜色;


       右边框border-right:线形（solid/dashed/dotted/double）    粗细（数值+单位）         颜色;


       左边框 border-left:线形（solid/dashed/dotted/double）    粗细（数值+单位）         颜色;


       上边框 border-top:线形（solid/dashed/dotted/double）     粗细（数值+单位）         颜色;


       下边框 border-bottom:线形（solid/dashed/dotted/double）  粗细（数值+单位）         颜色;


solid:实线，dashed:虚线，dotted:点状线，double:双线，


11、首行缩进：{text-indent:value;}
说明：
1）text-indent可以取负值；
2）text-indent属性只对第一行起作用。


12、字间距{letter-spacing:value;}控制英文字母和汉字的字距。（英文字母和字母）


13、词间距{word-spacing:value;}控制英文单词词距。（通用于英文词和词之间的间距）


14、文本流控制{layout-flow:horizontal/vertical-ideographic;}（只支持IE浏览器） 
说明：


1）horizontal:自左向右
2）vertical-ideographic:自上而下




B、关于列表的css声明




1、定义列表符号样式：


list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；


2、使用图片作为列表符号：


list-style-image：url(所使用图片的路径及全称)；


3、定义列表符号的位置：


list-style-position:outside(外边)/inside(里边)


list-style:none;去掉列表符号


 
C、关于背景的css声明




1、背景颜色


语法：选择符{background-color:颜色值;}


2、背景图片的设置


语法：background-image：url(背景图片的路径及全称)；


说明：


网页上有两种图片形式：插入图片、背景图；


插入图片：属于网页内容，也就是结构。


背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。


3、背景图片的显示原则


        1）容器尺寸等于图片尺寸，背景图片正好显示在容器中;


        2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；


        3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。


4、背景图片平铺属性
语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }


no-repeat:不平铺


repeat：平铺


repeat-x：横向平铺


repeat-y ：纵向平铺


5、背景图的固定
语法：选择符{background-attachment:scroll(滚动)/fixed(固定);}


6、背景图片的位置
语法：选择符{background-position:left/center/right/数值     top/center/bottom/数值;}


水平方向上的对齐方式（left/center/right）或值    垂直方向上的对齐方式(top/center/bottom)或值


background-position:值1    值2;


两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。


当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。


说明：向右方向，向下方向是负值


7、背景属性的缩写语法：background:属性值1   属性值2   属性值3；


背景缩写：background:url（背景图片的路径及全称） no-repeat center top；


8、网页上常用的图片格式（压缩图片）


1)jpg:有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )


2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;


3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数


量较少的图像;

三、浮动属性

语法：float:none  /  left  /  right;

四、盒模型

1. 盒模型的概念和组成


盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面


空间，即都包含边框、边界、补白、内容区，这就是盒模型。


2. padding的使用方法


填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。


用法：


1）用来调整内容在容器中的位置关系


2）用来调整子元素在父元素中的位置关系。


注：padding属性需要添加在父元素上。


3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性。




 属性值的4种方式：


  四个值：上   右   下   左 {padding:10px   20px   30px    40px;}


  三个值：上    左右    下 {padding:10px   20px   30px ;}


  二个值：上下    左右 {padding:10px   20px  ;}


  一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/


  说明：可单独设置一方向填充，如：padding-top:10px; padding-right:10px;padding-bottom:10px;padding-left:10px;




3. border的使用方法


  border:边框宽度 边框风格 边框颜色;


  例如：border:5px solid #f00


边框：border,网页中很多修饰性线条都是由边框来实现的。
边框宽度：border-width:
边框颜色：border-color:
边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)
可单独设置一方向边框，


如：border-bottom:边框宽度 边框风格 边框颜色;底边框


border-left:边框宽度 边框风格 边框颜色;左边框


border-right:边框宽度 边框风格 边框颜色;右边框


border-top:边框宽度 边框风格 边框颜色;上边框


4. margin的使用方法


  边界：margin,在元素外边的空白区域，被称为边距。


  属性值的4种方式： 
  四个值：上 右 下 左


  三个值：上 左右 下


  二个值：上下 左右


  一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/


 margin:2px 4px;/*定义元素上下边界为2px，左右边界为4px/


 margin:2px 4px 6px;/*定义元素上边界为2px，左右边界4px下边界为6px，*/


 margin:2px 4px 6px 8px;/*定义元素上、右边界为2px，下右边界为6px，左边界为8px*/


 margin:0 auto;/*定义元素上、下边界为2px，在浏览器中横向居中。


说明：可单独设置一方向边界，如：margin-top:10px;




5.盒子的实际大小（公式）：


宽 =左右margin+左右border+左右padding+width


高 =上下margin+上下border+上下padding+height


例如：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px


宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px


高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px


  

五、关于溢出:

1、溢出属性（容器的）


overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;


visible:默认值，内容不会被修剪，会成现在元素框之外；


hidden：内容会被修剪，并且其余内容是不可见的；


scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;


auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;


inherit：规定应该从父元素继承overflow属性的值。




2、空余空间


white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit


该属性用来设置如何处理元素内的空白；


normal：默认值，空白会被浏览器忽略，


pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；


nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；


pre-wrap：保留空白符序列，但是正常的进行换行；


pre-line:合并空白符序列，但是保留换行符；


inherit：规定应该从父元素继承White-space属性的值；(ie浏览器都不支持此属性值)


3、文本溢出:text-overflow:clip/ellipsis


取值：


clip：不显示省略号（...），而是简单的裁切;


ellipsis：当对象内文本溢出时，显示省略标记；


说明：


text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需


定义：


1、容器宽度：width：value；


2、强制文本在一行内显示:white-space：nowrap;


3、溢出内容为隐藏：overflow：hidden；


4、溢出文本显示省略号：text-overflow：ellipsis;


 


4、一个标记可以设置多个class名


语法：<标记 class="名称1   名称2">


>      >


<      <

六、元素类型

1.XHTML元素分类
根据css显示分类，XHTML元素被分为三种类型:块状元素，内联元素，可变元素


1.块状元素（block element） 
   1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块


div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,iframe,colgroup,col,table,tr,td,等；


  2）默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺


序自上而下排列。


  3）块状元素都可以定义自己的宽度和高度。 


  4）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。


2.内联元素（inline element）（或是行内元素）


  1) 常见的内联元素如：a,span,i,em,strong,b等


  2) 内联元素的表现形式是始终以行内逐个进行显示；


  3) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容 


    单元也会呈现矩形形状；


  4)内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;




3、可变元素


需要根据上下文关系确定该元素是块元素或者内联元素
 


4、 元素类型的转换


   盒子模型可通过display属性来改变默认的显示类型


  1）display属性与属性值 (18个属性值)


     属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group


     作用：该属性设置或检索对象元素应该生成的盒模型的类型。


说明：各属性值的作用


   1)Block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。


   2)inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。


   3)当元素设置了float属性后，就相当于给该元素加了display:block;属性；


   4)Inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持


vertical-align属性）img,input。


   5)none 此元素不会被显示。


   6)list-item:将元素转换成列表。li的默认类型。


   7）1、大部分块元素display属性值默认为block，其中列表的默认值为list-item。


      2、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block。