CSS属性设置

• 一 网页布局方式
• • 1、font-weight：文字粗细
  • 2、font-style：文字风格
  • 3、font-size：文字大小
  • 4、 不起作用/li>
• 3、！！！css显示模式:块级、行内、行内块级
• 4、！！！CSS显示模式转换
• • display: 可以通过标签的display属性设置显示模式
• 5、div与span
• 五 盒子模型各部分详解
• • 1、border边框
  • 2、padding内边距：边框与内容的距离就是内边距
  • 3、外边距：标签与标签之间的距离就是外边距
  • • 非连写
    • 连写
    • 注意
  • 4、内边距vs外边距
  • 5、盒子居中与内容居中
  • • 盒子居中
  • 6、防止文字溢出word-break: break-all;
  • 7、清除默认边距

一 网页布局方式

1、font-weight：文字粗细

2、font-style：文字风格

normal 正常，默认就是正常的

italic 倾斜

3、font-size：文字大小

fs：一般是12px或13px或14px

注意：

1. 通过font-size设置文字大小一定要带单位，即一定要写px

2. 如果设置成inherit表示继承父元素的字体大小值。

4、/
/font-style: italic;/
/font-size: 50px;/
//
简写为
font: bolder italic 50px ‘serif’,‘微软雅黑’;
简写要严格按照 粗细–>风格–>大小–>字体 的顺序写

6、color：文字颜色

英文单词方式

大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色

三原色方式 rgb()

什么是三原色br> red，green，blue
什么是像素pxbr> 对于光学显示器，一整个屏幕是有一个个点组成，每一个点称为一个像素
点，每个像素点都是由一个三元色的发光元件组成，该元件可以发出三种颜
色，red，green，blue。
发光元件协调三种颜色发光的明亮度可以调节出其他颜色
格式：rgb(255,0,0);
参数1控制红色显示的亮度
参数2控制绿色显示的亮度
参数3控制蓝色色显示的亮度

数字的范围0-255，0代表不发光，255代表发光，值越大越亮

红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
黑色：rgb(0,0,0) # 所有都不亮
白色：rgb(255,255,255) # 所有都最亮
灰色：只要让红色/绿色/蓝色的值都一样就是灰色，而且三个值越小，越偏
黑色，越大越偏白色

三原色+透明度方式 rgba()

rgba到css3中才推出，比起rgb多了一个a，a代表透明度
a取值0-1，取值越小，越透明

rgba与opacity

opacity 用于修改整个标签的透明度，但是无法跟rgba同时使用

十六进制方式

#FFEE00 其中FF代表R，EE代表G，00代表B
只要十六进制的颜色每两位都是一样的，那么就可以简写为一个，
例如#F00 等同于#FF0000

二 文本属性

text-align：规定元素中的文本的水平对齐方式。

2、text-decoration：文本装饰

3、text-indent：首行缩进

示例：将段落的第一行缩进 32像素,16px;=1em;

4、line-height：行高

三 背景属性

注意：没有宽高的标签，即便设置背景也无法显示

background-color：设置标签的背景颜色的

background-image：设置标签的背景图片

• 注意：如果图片的大小没有标签的大小大，那么会自动在水平和锤子方向平铺和填充

background-size: 设置标签的背景图片的宽、高

background-repeat: 设置标签的背景图片的平铺方式

应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复
这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问
例如很多网站的导航条都是用这种手法制作的

background-attachment: 设置标签的背景图片在标签中固定或随着页面滚动而滚动

background-position：坐标操作,专门用于控制背景图片的位置

前端的坐标系”：
——————–>x轴
|
|
|
|
|
|
y轴

图片默认都是在盒子的左上角，
background-position：属性，就是专门用于控制背景图片的位置
background-position：水平方向的值，垂直方向的值

1. 具体的方位名词

   水平方向：left，center，right
   垂直方向：top，center，bottom
   　　 如果只设置了一个关键词，那么第二个值就是”center”。

2. 百分比
   　　第一个值是水平位置，第二个值是垂直位置。
   　　左上角是 0% 0%。右下角是 100% 100%。
   　　如果只设置了一个值，另一个值就是50%。

3. 具体的像素（一定要加px单位）
   例如：30px，50px等等
   　　第一个值是水平位置，第二个值是垂直位置。
   　　左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
   　　如果只设置了一个值，另一个值就是50%。

• 可以混合使用%和position值。

inherit: 设置从父元素继承background属性值

以上背景属性的值均可以设置为inherit，代表从父元素继承background属性

背景缩写

严格按照上面背景属性从上往下的顺序排列，并在坐标操作的前面加上号

1、背景属性缩写示例

2、背景图片和插入图片的区别

1. 背景图片仅仅只是一个装饰，不会占用位置，
   插入图片会占用位置

2. 背景图片有定位属性，可以很方便地控制图片的位置，
   而插入图片则不可以

3. 插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
   想被搜索引擎收录，那么推荐使用插入图片

代码示例:

来源：跃上青空