自学前端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;合并相邻的边框

2. 内边距(padding)：有宽度时会影响盒子实际大小。

padding-top:; pr; pb; pl;

padding: 5px 10px 15px 20px; 上右下左（顺时针）

应用：导航栏

3. 外边距(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）