自学前端03
CSS.02
背景
body {/* 超大背景图的设置*//* background-image: url(../Css/images/1.jpeg);background-repeat: no-repeat;background-color: pink;/* 方位名词时只有上中下，左中右 *//* background-position: center top; */如果有非方位词（即含有具体值）第一个一定是x轴距离，第二个一定是Y轴距离 /* background-position: 10px 50px; *//* background-position: center 50px;/* 背景图像固定属性fixed *//* background-attachment: fixed; */ background: pink url(../Css/images/1.jpeg) no-repeat fixed center 50px;
}
| 属性 | 作用 | 值 |
|---|---|---|
| bgc | 颜色 | 英语/#十六进制/RGB代码 |
| bgi | 图片 | url(路径) |
| bgr | 平铺 | repeat/no-repeat/repeat-x -y |
| bgp | 位置 | 1./* 方位名词时只有上中下，左中右 */ 2.如果有非方位词（即含有具体值）第一个一定是x轴距离，第二个一定是Y轴距离 |
| bga | 固定 | scroll（滚动）/fixed（固定） |
| 复合写法 | 无顺序 | background: red url(…/Css/images/1.jpeg) no-repeat fixed center 50px;- |
| 背景色半透明 | background:rgba(0,0,0,a); a代表透明度（从0.0—1） |
CSS三大特性
-
层叠性：就近原则
-
继承性：孩子继承父亲
- 继承父标签的某些样式
- text-，font-，line-，以及color等
-
优先级：权重（多个即相加）继承必被覆盖
- 更精确权重更高（权重相加！）
| 选择器 | 权重 |
|---|---|
| 继承 或者 * | 0000 |
| 元素选择器 （标签选择器）div { } | 0001 |
| 类选择器，伪类选择器 | 0010 |
| ID选择器 | 0100 |
| 内部样式（行内样式） | 1000 |
| !important | 最大 |
盒子模型
- 组成部分：边框，外边距，内边距，实际内容
1.边框(border)：会影响盒子实际大小
| 属性 | 值 |
|---|---|
| bw | 5px |
| bs | solid（实线）/dashed（虚线）/dotted（点线） |
| boc | 边框颜色 |
| border | border:1px solid red; ，没有顺序 |
| border-collapse: | collapse;合并相邻的边框 |
- 内边距(padding)：有宽度时会影响盒子实际大小。
padding-top:; pr; pb; pl;
padding: 5px 10px 15px 20px; 上右下左（顺时针）
应用：导航栏
-
外边距(margin)：盒子与盒子之间的距离。
同padding；
块元素水平居中：：：margin: 0 auto;
行内元素水平居中： 父元素中写 text-align:center;
- 塌陷问题；父元素中 子元素 写margin时
- 可以为父元素定义边框
- 可以为父元素定义内边距
- 父元素中添加：overflow: hidden;
清除内外边距：
* {margin: 0;padding: 0;}
行内元素尽量只要设置左右内外边距；上下不起作用。
圆角边框
borderr-radius: 5px 10px 15px 20px; 顺时针(左上角开始)
盒子阴影
| 值 | 描述 |
|---|---|
| h-shadow | 水平阴影位置，允许负值 |
| v-shadow | 垂直阴影位置，允许负值 |
| blur | 可选：模糊距离 |
| spread | 可选：阴影的尺寸 |
| color | 可选：阴影的颜色 |
| inset | 内部阴影/外部阴影（outset） |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！