Python学习之路---前端--CSS样式--字体_背景_盒子模型(DIV等)
直接将代码复制到TXT文档中并将文件后缀.txt改为.html即可看到效果；
day49
- CSS相关属性
- 宽和高
- width属性可以为元素设置宽度，height可以为元素设置高度
- 块级标签才可以设置宽度，内联标签的宽度由内容来决定；
- 字体属性
- 文字字体-大小-粗细-文本颜色
- font-family\font-size\font-weight\color
字体属性
文字字体-font-family
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
文字大小
font-size
文字大小为20PX
文字粗细(字重)
font-weight用来设置字体的字重（粗细）。
默认值
粗体
更粗
更细
设置具体粗细，400等用于默认值，700等同于加粗
继承父元素字体的粗细值 因没定义所以没法展示
文本颜色 color
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值-如：#FF0000;一个RGB值-如:RGB(255.0.0.1);颜色的名称-如：red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
十六进制值-如：#FF0000
一个RGB值-如:RGB(255.0.0.1)
颜色的名称-如：red
rgba(255,0,0,0.3)
文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐-默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认，定义标准文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本线下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
常用的为去掉a标签默认的下划线：去掉链接的下划线 默认链接带下划线
首行缩进 text-indent
将段落的第一行缩进一定的像素；
哈哈哈哈哈哈哈
背景属性
背景颜色
background-color:red;
背景图片
background-image:url('图片地址');
背景重复
background-repeat:repeat(默认平铺)\repeat-x(水平方向平铺)\repeat-y(垂直方向平铺)\no-repeat(不平铺)
背景位置
background-position:top right bottom left
支持简写
background: red url('') no-repeat right top
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
边框
边框属性
border-width(边框的宽度)\border-style(边框的样式：实线\虚线\...)\border-color(边框的颜色)
通常使用简写方式：border:1px solid red;
边框的样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线边框 |
| solid | 实线边框 |
border-top-style: dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
border-radius 设置圆角效果
将border-radius设置为长或高的一半即可得到一个圆形。
display属性
用于控制HTML元素的显示效果
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
- 或者在统一的CSS文件里添加 li{ display:inline;}
- display:inline;2
- display:inline;3
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
CSS盒子模型
| 值 | 意义 |
| margin | 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 |
| padding | 用于控制内容与边框之间的距离； |
| border(边框) | 围绕在内边距和内容外的边框。 |
| content(内容) | 盒子的内容，显示文本和图像。 |
margin外边距
margin-top:90px;
margin-right:50px;
margin-bottom:10px;
margin-left:20px;
可以简写margin: 90px 50px 10px 20px
顺序：上右下左
padding内边距
padding-top:30px;
padding-right:50px;
padding-bottom:10px;
padding-left:20px;
可以简写padding: 30px 50px 10px 20px;
顺序：上右下左
代码块
