week9 day3 CSS属性设置
-
- 一、字体属性
- 二、文本属性
- 三、背景属性
- 四、盒子模型
-
- 4.1 什么是盒子模型/li>
- 4.2 盒子模型的宽度和高度
-
- 如何让 height=100% 发挥作用/li>
- 4.3 CSS显示模式：块级、行内、行内块级（非常重要！！！）
- 4.4 CSS显示模式转换
- 4.5 div和span
- 五、盒子模型各部分详解
-
- 5.1 border边框
- 5.2 padding内边距：边框与内容之间的距离
- 5.3 margin外边距：标签与标签之间的距离
- 5.4 内边距与外边距
- 5.5 盒子居中与内容居中
-
- 5.5.1 内容居中
- 5.5.2 盒子居中
- 5.6 防止文字溢出word-break：break-all；
- 5.7 清除默认边距
一、字体属性
- font-weight：文字粗细
| 取值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| border | 粗体 |
| border | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
- font-style：文字风格
| 属性名 | 描述 |
|---|---|
| normal | 正常，默认就是正常的 |
| italic | 倾斜 |
-
font-size：文字大小
fs：一般是12px或13px或14px
注意：
- 通过font-size设置文字大小一定要带单位，即一定要写px
- 如果设置成inherit表示继承父元素的字体大小值。
-
“>”>1
- 2
- 3
- 4
- 5
- 6
-
文字属性简写
-
color：文字颜色
注意：
1、设置的字体必须是用户电脑里已经安装的字体，浏览器会使用它可识别的第一个值。
2、如果取值为中文，需要用单或双引 扩起来
| 取值 | 格式 | 描述 |
|---|---|---|
| 英文单词 | color：red; | 大多数颜色都有对应的英文单词描述，但英文单词终究有其局限性:无法表示所有颜色 |
| rgb | color：rgb(255,0,0) | 什么是三原色ed，green，blue。什么是像素px于光学显示器，一整个屏幕是有一个个点组成，每一个点称为一个像素点，每个像素点都是由一个三元色的发光元件组成，该元件可以发出三种颜色，red，green，blue。发光元件协调三种颜色发光的明亮度可以调节出其他颜色。格式：rgb(255,0,0);参数1控制红色显示的亮度；参数2控制绿色显示的亮度；参数3控制蓝色色显示的亮度。数字的范围0-255，0代表不发光，255代表发光，值越大越亮 |
| rgba | color：rgba(255,0,0,0.1); | rgba到css3中才推出，比起rgb多了一个a，a代表透明度。a取值0-1，取值越小，越透明 |
| 十六进制 | color: #FF0000; | #FFEE00 其中FF代表R，EE代表G，00代表B。只要十六进制的颜色每两位都是一样的，那么就可以简写为一个，例如#F00 等同于#FF0000 |
二、文本属性
- text-align：规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
- text-decoration：文本装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本，通常用来去掉a标签的下划线 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
-
text-indent：首行缩进
-
line-height：行高
注意：没有宽高的标签，即便设置背景也无法显示
属性 描述 值 设置标签的背景颜色的 设置标签的背景图片 注意：如果图片的大小没有标签的大小大，那么会自动在水平和锤子方向平铺和填充
设置标签的背景图片的宽、高 设置标签的背景图片的平铺方式 #默认值，在垂直和水平方向都重复
#不重复，背景图片将仅显示一次
#背景图片将在水平方向平铺
#背景图片将在垂直方向平铺
应用：可以在服务端将一个大图片截成小图片，然后在客户端基于平铺属性将小图重复。这样用户就以为是一张大图，如此，既节省了流量提升了速度，又不影响用户访问。例如很多 站的导航条都是用这种手法制作的设置标签的背景图片在标签中固定或随着页面滚动而滚动 #默认值，背景图片会随着滚动条的滚动而滚动
#不会随着滚动条的滚动而滚动图片默认都是在盒子的左上角，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属性 背景缩写 -
背景属性填写
-
背景图片与插入图片的区别
-
背景图片练习
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！
-