样式

1.概念

css样式的作用：对内容的美化--字体 背景 列表

html:内容的体现css样式

需要关键字：style="属性1:值1;属性2:值2;......"

2.样式：

height ---  高度       width   宽度

取值有两种方式：1、像素 2、百分比

3.背景样式：background：

设置一块区域的背景，行内元素与块元素均可。

可以设置背景为颜色，或者设置背景为图片。

1背景为颜色写法

 

background-color--背景色：值

 1、颜色的名称  red blue

2、rgb(255,255,23) rgba(255,0,0,0.1)

a-表示透明度1 表示完全不透明 0-完全透明 0.5 半透明

3、十六进制的数字表示方式：#ff0000

例如：

background:#ddd;

background:red;

.2背景为图片写法：

background：url(地址);

“地址”表示图片地址，用本地路径，或网络地址均可

例如：

background: url(abc/11.jpg);

background: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png);

3背景图片重复设置

默认情况下，如果背景图片小于区域的大小，那么背景图片将会重复排列。

用户可以控制图片的重复方式。

如下：

no-repeat：图片无重复

repeat-x：图片在x轴（水平）方向重复排列

repeat-y：图片在y轴（垂直）方向重复排列

例如：

background: url(abc/11.jpg)  no-repeat;

表示图片不能重复

4背景图片的位置

样式：

background-position

写法：

background-position：水平位置 垂直位置；

例如：

background-position:left top;

表示背景图片会展示在区域的左(left)上(top)角

关于位置有三种表示方法：

（1）位置用英文单词表示

左右：left right

上下：top bottom

中：center

这三组单词，随便拿两组进行组合即可

第一个值表示水平位置，第二个值表示垂直位置；

例如

background-position: center top；

表示背景图片在整个区域的上方居中位置。

（2、）  位置用百分比来表示

百分比是以背景区域的宽和高位参考的，

如50%，表示位置在宽度或高度的一半。

例如：

background-position:50% 100%；

表示水平方向居中，垂直方向到底

（3 、）位置用像素值来表示

水平方向，从左向右值变大

垂直方向，从上到下值变大

例如：

background-position:50px 200px；

背景图片展示在水平方式50px，垂直方向200px的位置

5背景图片的大小

样式：

background-size

写法：

background-size：水平宽度 垂直高度；

例如：

background-position:100px 200px;

表示背景图片的大小为100px宽，200px高

同样对于背景图片的大小也有三种表示形式

（1、）  用像素值来表示图片大小

例如：

background-size: 500px 400px;

表示背景图片水平宽度为500px，垂直高度为400px

（2、）  用百分比来表示图片大小

百分比是以区域的宽度和高度为参考的

例如：

background-size: 50% 80%

表示水平方向占区域宽度的一半，垂直方向占区域高度的80%

如果想铺满整个区域，那么background-size: 100% 100%

但是这种情况下，很容易造成图片的变形

（3、）用英文单词表示

background-size: cover（覆盖）

图片会覆盖整个区域

图片不会变形，但是图片可能会超过区域的范围

Background-size:contain(包含)

图片会尽可能的大，但是图片不会超过区域的范围

图片不会变形，但是图片可能不会填满整个区域

 6背景图案

样式

  background-image

写法：

background-image: url(img/cha.PNG);

background-image: none;没有插入图片

缩写样式

background:背景色 背景图 平铺方式 位置x 位置y;

background: 背景色 平铺方式 位置x 位置y背景图;

background: 平铺方式 位置x 位置y背景色 背景图;

background平铺方式 位置x 位置y; 背景图 :背景色

background:背景图 背景色 平铺方式 位置x 位置y;

background:背景图 平铺方式 位置x 位置y背景色 ;

background:  red  no-repeat 0 -155px url(img/icon.png)

 background: red url(img/icon.png) no-repeat 0 -155px;

  background: url(img/icon.png) red  no-repeat 0 -155px;

background: url(img/icon.png)   no-repeat 0 -155px red

background:   no-repeat 0 -155px red url(img/icon.png)

background:   no-repeat 0 -155px url(img/icon.png) red

说明：简写 背景色 背景图 平铺方式 位置x 位置y随意换位置都生效

4字体样式：

 font-size:一般网页的正常大小通常选择14px;高16px;

font-family:字体样式，可以写多个样式，用空格隔开；当第一个字体样式客户端没有的时候用后面的字体

font-weight：字体是否加粗：bold--加粗 normal--正常

缩写样式只有一种：font:粗细 大小 样式；

 

font: bold 25px '微软雅黑'

5 文本样式：

划线位置text-decoration：

underline 下划线      line-through-中划线

水平对齐方式text-align：

center-居中 left-居左 right-居右

垂直居中的方式：设置高度和行高的值相同 height=line-heigt

字间距letter-spacing:设置像素值

text-anchor     文本锚点属性    start   middle   end

6边框样式：

border-color:边框颜色

border-width：宽度

border-style：样式  solid--实线

缩写：border: 样式 颜色 宽度;

    border: red solid 1px

border: red 1px solid ;

    border:  solid red 1px ;

    border:  solid 1px red 

border:  1px red solid

border:  1px solid red

说明：简写 边框样式 颜色 宽度随意换位置都生效

7clear: both 清除之前的浮动的影响

8列

list-style: decimal;

list-style: none;