目录
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;}
- 当字体是中文字体时,需加双引号;"宋体"
- 当英文字体中有空格时,需加双引号如(“Times New Roman”)
- 当英文字体只有一个单词组成是不加双引号;如:(Arial);
- 中文默认字体为宋体或者新宋体,英文字体默认为Arial.
- 多个字体之间用逗号隔开.如 {font-family: "宋体",“Times New Roman”,Arial,"微软雅黑";}
4、字体加粗: {font-weight:属性值;} 字体的胖瘦
bolder(更粗的)/bold(加粗)/normal(常规)/100—900
- 在css规范中,把字体的粗细分为9个等级
- 分别为100——900
- 一般 100-400
- 常规字体 500
- 加粗字体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:} (特殊类 要按顺序)
- font的属性值应按以下次序书写(各个属性之间用空格隔开)
- 顺序: font-style font-weight font-size / line-height font-family
- font-size font-family必须保留,属性值之间空格隔开
二、CSS文本属性
text- 指文本
1、水平对齐方式:{text-align:left/right/center/justify;}(jiustify两端对齐)
2、文本修饰:{ text-decoration:none/underline/overline/line-through}
说明:
- none:没有修饰
- underline:添加下划线
- overline:添加上划线
- line-through:添加删除线
3、首行缩进:{text-indent:数值;}
说明:
1)text-indent可以取负值;
2)text-indent属性只对第一行起作用。
4、字间距{letter-spacing:value;}英文字母或汉字的间距。(汉字与汉字,字母与字母)
5、词间距{word-spacing:value;}英文单词之间的间距。(单词与单词)
6、 大小写转换{text-transform:属性值;}
属性值
- none (默认值)不转换
- uppercase;转换为大写
- lowercase;转换为小写
- 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:支持透明背景 ,不支持动画,适用于颜色数量较少的图像;