css属性

目录

css属性

一、CSS字体属性

二、CSS字体属性

三、列表属性

四、边框的属性和属性值

五、CSS背景属性

---

css属性

一、CSS字体属性

font—指字体

1、字体大小：{font-size:value;}  字体的宽高

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

2）单位还可以是pt，9pt=12px;

3）16px为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px;

2、字体颜色：{color:颜色值;}

颜色值：

1）十六进制（0~9 ，a~f，数值是六位组成，用十六进制表示颜色值时，需要在颜色值前加“#”，如 #fff，#000，#ff823f

2） RGB（）

3）系统自带 如：pink，blue，red

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

1. 当字体是中文字体时，需加双引号；"宋体"
2. 当英文字体中有空格时，需加双引号如（“Times New Roman”）
3. 当英文字体只有一个单词组成是不加双引号；如：（Arial）；
4. 中文默认字体为宋体或者新宋体，英文字体默认为Arial.
5. 多个字体之间用逗号隔开.如 {font-family: "宋体",“Times New Roman”,Arial,"微软雅黑";}

4、字体加粗: {font-weight:属性值;} 字体的胖瘦

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

1. 在css规范中，把字体的粗细分为9个等级
2. 分别为100——900
3. 一般 100-400
4.  常规字体 500
5. 加粗字体600-900

5、字体风格: {font-style：italic/oblique/normal}（ normal 取消倾斜，常规显示）;

6、字体行高 {line-height:数量值;}

font-size和line-height只能通过斜杠/组成一个值,如:  {font:26px/16px "宋体";},  { font:26px/16px "宋体";},{font:26px/2 "宋体";}

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

fon字体属性简写: {font:} (特殊类 要按顺序)

1. font的属性值应按以下次序书写(各个属性之间用空格隔开)
2. 顺序: font-style  font-weight  font-size / line-height  font-family
3. font-size  font-family必须保留,属性值之间空格隔开

二、CSS文本属性

text- 指文本

1、水平对齐方式:{text-align:left/right/center/justify;}（jiustify两端对齐）

2、文本修饰:{ text-decoration:none/underline/overline/line-through}

说明：

1. none:没有修饰
2. underline:添加下划线
3. overline:添加上划线
4. line-through:添加删除线

3、首行缩进：{text-indent:数值;}

说明：

1）text-indent可以取负值；

2）text-indent属性只对第一行起作用。

4、字间距{letter-spacing:value;}英文字母或汉字的间距。（汉字与汉字，字母与字母）

5、词间距{word-spacing:value;}英文单词之间的间距。（单词与单词）

6、 大小写转换{text-transform：属性值；}

属性值

1. none （默认值）不转换
2. uppercase；转换为大写
3. lowercase；转换为小写
4. capitalize；首个字母大写

三、列表属性

{list-style-type：none；}

{list-style：none；}

1、定义列表符号样式

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

list-style简写

list-style-type:none==list-style:none;

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

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

3、定义列表符号的位置

list-style-position:outside(外边，默认值)/inside(里边)；

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

四、边框的属性和属性值

border:边框宽度 边框类型 边框颜色;

{border：1px solid pink；}

例如：border:5px solid #ff0000

边框：border,网页中很多修饰性线条都是由边框来实现的。

• 边框宽度：border-width:
• 边框颜色：border-color:
• 边框样式：border-style: solid(实线) / dashed(虚线) / dotted(点划线) / double(双线)；

border-collapse:collapse / separate;边框合并/分离,用于控制相邻的单元格的边框。

可单独设置一方向边框，border-top:边框宽度 边框类型 边框颜色;

边框具有宽度，会撑大盒子的原始大小。

五、CSS背景属性

1、背景颜色  {background-color:颜色值;}

2、背景图片 { background-image：url( "背景图片的路径及全称" )；}

背景图片的显示原则:
1）容器尺寸等于图片尺寸，背景图片正好显示在容器中
2）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；
3）容器尺寸小于图片尺寸，只显示元素范围以内的背景图(裁切)。

网页上有两种图片形式：插入图片和背景图；
插入图片：属于网页内容,是结构,结构是占位的.
背景图：属于网页的表现，是不占位的,背景图上可以显示文字、插入图片、表格等。

3、背景图片平铺{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

4、背景图的固定{background-attachment:scroll(滚动)/fixed(固定);}fixed 固定，不随内容一块滚动；scroll(默认值)随内容一块滚动。

5、背景图的位置 {background-position:left/center/right/数值 top/center/bottom/数值;}

background-position:值1 值2;

两个值 ：跟方位名词;

第一个值表示水平位置  left/right/center;

第二个值：表示垂直的位置 top/bottom/center;

• 可以是方位名词和具体数值;
• 写一个center值就可以代表的是水平位置和垂直位置;
• 可以跟具体数值,只写一个值,第二个默认是垂直居中;

6. 背景图片的大小 background-size

/ 1. 两个值时,第一个是宽度,第二个是长度; 2. 一个值时,第一个是宽度,长度默认auto /

背景属性的简写：

没有顺序要求

background:属性值1 属性值2 属性值3 属性值4 属性值5；
背景缩写：background:url（） no-repeat  center top fixed  ；

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

1) jpg :高清图片,不能做透明背景,适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 ).
2) gif 支持透明，支持动画，适用于颜色数量较少的图像;
3) png:支持透明背景 ，不支持动画，适用于颜色数量较少的图像;