零基础前端小白的第二周

CSS核心属性

一、css属性和属性值的定义

属性：属性是指定选择符所具有的属性，它是css的核心。

属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜色值等。

二、CSS文本属性

1、文本大小：{font-size:12px;}单位还可以是em，是父级元素的font-size的倍数；/系统默认的字号大小为16px

2、文本字体：{font-family:字体1，字体2，字体3；}

注意：当字体是中文字体时，需加双引号；
当英文字体由多个单词组成时，需加双引号如（“Times New Roman”）

3、文本颜色：{color:颜色值;}red/#f00/rgb(255,0,0)

颜色值的缩写：

（1）RGB表示方式：color:rgb(255,0,0);

（2） rgba：颜色的透明color:rgba(255,0,0,0.5);透明度值表示范围0-1之间，如：0.1，0.2

4、文字加粗font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;从细到粗的变化

5、文本倾斜：font-style：italic/oblique/normal（取消倾斜，常规显示）;

6、水平对齐方式{text-align:left左/right右/center居中/justify两端对齐(在部分浏览器中，对于中文不起作用);} 只针对文本或图片

7、垂直对齐方式 {vertical-align:top上/bottom下/middle居中/baseline基线（某些特定的元素类型起作用）;}     怎么用? 下周二

8、文字行高 {line-height:normal/50px;}line-height:20px; line-height:2em; (当行高的单位省略时，默认为em)

9、文本修饰 text-decoration:none/underline/overline/line-throug

注意：none:没有修饰      underline:添加下划线       overline:添加上划线     line-through:添加删除线

10、首行缩进：{text-indent:20px/2em;}

注意：（1）text-indent可以取负值；

（2）text-indent属性只对第一行起作用。

三、CSS列表属性

复合属性：实际开发过程中使用经常使用

list-style:none;去掉列表符号

四、边框的属性和属性值

1.复合属性：记住一行：border:10px solid gray

注意：border:边框宽度 边框风格 边框颜色;/ border:5px solid red；

边框宽度：border-width: 1个值代表四个方向，2：上下   左右     3：上      左右        下      4：上 右 下 左

边框颜色：border-color:

边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)none(去掉边框);

单一属性：只设置一个方向：记忆一行：border-top:10px solid gray

注意： border-bottom:边框宽度 边框风格 边框颜色;      底边框

border-left:边框宽度 边框风格 边框颜色;             左边框

border-right:边框宽度 边框风格 边框颜色;          右边框

border-top:边框宽度 边框风格 边框颜色;           上边框

五、CSS背景属性

1、背景颜色 {background-color:颜色值;}

2、背景图片的设置 background-image：url(背景图片的路径及全称)

3、背景图片平铺属{background-repeat:no-repeat不平铺/repeat平铺/repeat-x  X轴平铺/repeat-y   Y轴平铺 }

4、背景图的位置{background-position:left/center/right/数值      top/center/bottom/数值;}

5、背景图的固定{background-attachment:fixed固定/scroll滚动;}

6、背景尺寸大小{background-size:x y;/cover/contain}

复合属性：

7、背景属性的简写方式background:red   url(img/img01.jpg)    no-repeat     left     bottom;

六、CSS浮动属性

1.浮动有三个值：
left:元素向左浮动
right:元素向右浮动
none:默认值，不浮动。

2.清除浮动的属性是clear

none：默认值。允许两边都可以有浮动对象 

left:当前元素不受上一个左浮动元素的影响
right:当前元素不受上一个右浮动元素的影响
both:当前元素不受上一个左右浮动元素的影响

七、盒子模型的相关元素

1、padding的使用方法

（1）用来调整子元素在父元素中的位置。

（2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

属性值的4种方式：

四个值：上 右 下 左

三个值：上 左右 下

二个值：上下 左右

一个值：四个方向 margin:2px;/*定义元素四边边界为2px*/

2、margin的使用方法

边界：margin,在元素外边的空白区域，被称为边距/边界。      “属性值的用法同上”

margin不会影响当前元素的大小，会影响当前元素的位置；

八、容器溢出相关的属性

1、溢出属性（容器的）

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，溢出内容会显示在元素之外；

hidden：溢出内容隐藏；

scroll：滚动，溢出内容以滚动方式显示;

auto：如果有溢出会添加滚动条，没有溢出正常显示;

inherit：规定应该遵从父元素继承overflow属性的值。

overflow-x:X轴溢出；     overflow-y:Y轴溢出

2、空余空间

white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；

normal：默认值，空白会被浏览器忽略，

nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；

3、省略号显示

text-overflow:clip/ellipsis ;

clip：默认值，不显示省略号（...）;

ellipsis：显示省略标记；

这就第二周的收获了》》》》》》》》》》》》》》》》》》》