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:支持透明背景 ,不支持动画,适用于颜色数量较少的图像;

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值