css属性详解和浮动

Posted 2021-10-27 vieta

一、CSS属性组成和作用

                   属性：属性值

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

注：声明又包括属性和属性值

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

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

 

字体属性

1、font-family: 字体类型;

{font-family:字体1，字体2，字体3；}

      例：font-family:"微软雅黑","宋体";

说明：

浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；

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

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

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

Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial，新推出的版本也默认为微软雅黑

2、文本大小：{font-size:数值;}

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

说明：

1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。

2）单位还可以是pt（磅），在印刷领域广泛使用，

   　9pt=12px; 

3)使用绝对大小关键字

xx-small   =9px

x-small    =11px

small      =13px

medium     =16px

large      =19px

x-large    =23px

xx-large   =27px

3、文本颜色：{color:颜色值;}

　　例：div{color：red ；}

说明：

   （1）用十六进制表示颜色值：

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

颜色模式：光色模式 FF 00 00

  （2）RGB

 例如：color:#F00;color:grb(0,204,204);

   (3)rgba(00,255,255,0.6 )

十六进制写法：

由红、绿、蓝三色组成；

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

 则： #fa0000

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

（4）用颜色名表示：（16种）

black 纯黑    silver 浅灰      navy 深蓝

blue 浅蓝     green  深绿      lime 浅绿

teal 靛青     aqua 天蓝        maroon 深红

red 红色      purple 深紫      fuchsia 品红

olive 褐黄    yellow 明黄      gray 深灰

white 亮白

4、加粗：

{ font-weight:bolder/bold/normal/100—900;}

说明：

bolder(更粗的)/bold（加粗）/normal（常规）

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

一般500常规字体

600-900加粗字体

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

说明：

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

6、文本是否大小写 {font-variant:normal(正常的字体)/small-caps(小型的大写字母字体)}

说明：

1）对英文内容起作用

*复合式写法：

       font：style variant weight size family；

         总体设置字体，按以上顺序;size和family不可和其他属性位置互换；

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

 

    如: font:normal normal  bold 24px “黑体”;

（style和weight可以互换位置，size和family不可和其他属性位置互换）

说明：

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 , 他们会使用缺省值。    

文本属性

7、水平对齐方式

{text-align:left/right/center;}

8、垂直对齐方式

        {vertical-align:top/bottom/middle;}

9、行高{line-height:normal/数值;}

说明：

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

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

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

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

        {line-height:1.5;}1.5倍；

注：当使用倍行高为单位时，不加PX；按字体大小的倍数而设置。

10、文本修饰：

text-decoration:none/underline/overline/line-through

说明：

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

11、首行缩进：text-indent:数值；

设置第一行的缩进值，负值是向前进（可以直接设置长度，或设置百分比）

说明：

1）text-indent可以取负值，可实现隐藏文本，悬挂缩进。

2）text-indent属性只对第一行起作用，若第一行不是文本则没变化。

12、字符间距 {letter-spacing:value;}

      控制英文字母和汉字的字距

说明：

     每个文字以及字母之间的间隔，

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

说明：

    完整的单词之间的间隔，不是字母之间

15、控制文本大小写

text-transform: none(默认值)/capitalize(每个单词首字母大写)/uppercase (都为大写字母)/lowercase ( 都为小写字母 )

16、文本阴影  text-shadow     

 例：text-shadow: 5px 5px 5px #FF0000;

分别表示：水平偏移值，垂直偏移值，模糊的半径，阴影的颜色）

 

列表属性

B、关于列表的css声明

1、定义列表符号样式：

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

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

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

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

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

list-style:none;去掉列表样式；

属性值	方式	语法实现	示例
none	无风格	list-style:none;	刷牙    洗脸
disc	实心圆（<ul>默认类型）	list-style:disc;	●刷牙 ●洗脸
circle	空心圆	list-style:circle;	○刷牙 ○洗脸
square	实心正方形	list-style:square;	■刷牙 ■洗脸
decimal	数字（<ol>默认类型）	list-style:decimal	1. 刷牙 2. 洗脸

综合设置： border:solid  3px  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:双线，

背景属性

C、关于背景的css声明

1、背景颜色

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

   简写：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 ：纵向平铺

6、背景图片的位置

  语法：background-position:值1    值2;

选择符{background-position:left/center/right/数值  top/center/bottom/数值;}

水平方向上的对齐方式（left/center/right）或值

垂直方向上的对齐方式(top/center/bottom)或值

说明：

     两个值 ：第一个值表示水平位置的值，

              第二个值：表示垂直的位置。

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

   向右方向，向下方向都是负值

7、background-size: 数值/auto/cover/contain

  说明：

length：用长度值指定背景图像大小。不允许负值。用百分比指定背景图像大小。不允许负值   。

auto：背景图像的真实大小。

cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。

contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

8、背景属性的缩写语法：

background:属性值1   属性值2   属性值3；

背景缩写：

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

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

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

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

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

float:定义网页中其它文本如何环绕该元素   

有三个取值：

left:元素活动浮动在文本左面

right:元素浮动在右面

none:默认值，不浮动。

Clear：清除浮动

none：允许两边都可以有浮动对象

both：清除两边浮动

left：清除左边浮动

right:清除右边浮动