web初级

学习的第26天

文本垂直居中，文本的行高要与父元素行高一样才可实现垂直居中

1、渐变

1、什么是渐变

渐变指的是多种颜色平缓变化的一种显示效果

2、渐变的主要因素

色标 ：一种颜色及其 出现的位置

一个渐变是由多个色标组成(至少两个)

3、渐变分类

1、线性渐变

以直线的方向来填充渐变色

2、径向渐变

以圆形的方式实现的填充效果

3、重复渐变

将线性渐变 或径向渐变 重复几次实现出来

4、线性渐变

属性：background-image

取值：linear-gradient(angle,color-point1,color-point2,...);

1、angle

表示渐变填充的方向或角度

取值：

1、关键字

1、to top

从下向上填充渐变色

2、to right

从左向右填充渐变色

3、to bottom

从上向下填充渐变色

4、to left

从右向左填充渐变色

2、角度值

1、0deg

从下向上填充渐变色等同于 to top

2、90deg

从左向右填充渐变色等同于 to right

3、180deg

从上向下填充渐变色等同于 to bottom

4、270deg

从右向左填充渐变色等用于 to left

2、color-point

色标 ：颜色及其 位置

取值 ：颜色以及 位置的组合，中间用空格 隔开

ex:

1、red 0%

在填充方向的开始位置处颜色为 红色

2、green 50%

到填充方向一半的位置处，颜色变为绿色

3、blue 200px

到填充方向的200px的位置处，颜色变为蓝色

 

background:linear-gradient(to top,red 0%,green 100%);

 

background:linear-gradient(45deg,red 0px,green 50px,blue 100%);

5、浏览器兼容性

各浏览器的新版本都支持渐变属性

对于不支持的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变

Firefox : -moz-

Chrome & Safari : -webkit-

Opera : -o-

IE : -ms-

#container .btn-submit{

background:linear-gradient(0deg,red,blue);

 

background:-moz-linear-gradient(0deg,red,blue);

 

background:-webkit-linear-gradient(0deg,red,blue);

 

background:-o-linear-gradient(0deg,red,blue);

 

background:-ms-linear-gradient(0deg,red,blue);

}

2、文本格式化属性

1、字体属性

1、指定字体

属性：font-family

取值：用 , 隔开的字体名称列表

ex:

font-family:"微软雅黑",Arial;

font-family:"microsoft yahei",Arial,"simhei","simsun"

2、字体大小

属性:font-size

取值:以px或 pt为单位的数字

3、字体加粗

属性:font-weight

取值:

1、bold ：加粗

2、normal：正常

3、value

无单位的数字

400 等同于 normal

900 等同于 bold

ex:

font-weight:700;

4、字体样式

属性：font-style

取值：

1、normal：正常显示

2、italic：斜体显示

5、小型大写字母

将小写字符变为大写，但大小与小写字符一致

属性：font-variant

取值：

1、normal：正常

2、small-caps

小型大写字符

练习：

创建一个网页，定义一个div标记，并设置id为container，随便编译内容，中英文 结合的

设置以上文本的样式如下：

1、字体 ：微软雅黑

2、文字大小 ：24px

3、加粗显示文字

4、斜体显示文字

5、将所有的小写字符变为小型大写字符

6、字体属性

简写方式

属性：font

取值：style variant weight size family;

注意：

使用简写属性时，必须要设置family的值，否则无效

font:12px;//不对

font:12px "微软雅黑";//正确

2、文本属性

1、文本颜色

属性：color

取值：合法的颜色值

2、文本排列

作用：指定文本，行内，行内块元素的水平对齐方式

属性：text-align

取值：left / center / right / justify(两端对齐)

3、文字修饰

属性：text-decoration

取值：

1、none :无任何的线条修饰

2、underline :下划线修饰

3、line-through :删除线

4、overline :上划线

4、行高

作用：一行数据所占的高度

属性：line-height

取值：以 px 为单位的数值

注意：如果行高设置的比文字的高度高的话，那么该行文本将在指定行高范围内垂直居中显示

ex:

line-height:30px;

line-height:1.5;/*行高是font-size的1.5倍*/

5、首行文本缩进

属性：text-indent

取值：以px为单位的数值

6、文本阴影

属性：text-shadow

取值：h-shadow v-shadow blur color

练习：

在 02-font.html 基础上，增加效果

1、文本的排列方式为 两端对齐

2、文字修饰 为下划线修饰

3、行高设置为 字体大小的1.5倍的高度

4、首行文本缩进24px

5、文本阴影，水平 垂直偏移为0，模糊距离为1px或 2px，颜色为 红色

3、表格

1、表格的常用属性

1、边距属性 ：padding

2、边框属性 ：border

3、尺寸属性 ：width，height

4、文本格式化属性 ：font-*，text-*，line-height

5、背景属性：颜色，图片，渐变

6、vertical-align

作用：指定单元格数据的垂直对齐方式

取值：

1、top ：上对齐

2、middle：居中对齐

3、bottom：下对齐

练习：

创建 05-table.html

1、创建一个 400 * 400的表格，4行4列

2、创建每个单元格的尺寸为 100*100

3、设置表格 和 单元格的边框 为 1

px solid #000

4、尝试着为每个td增加上外边距10px

2、表格的特用属性

1、边框合并

属性：border-collapse

取值：

1、separate

默认值，即分离边框模式

2、collapse

边框合并

2、边框边距

作用：设置单元格之间或单元格与表格之间的距离

属性：border-spacing

取值：

1、给定一个值 ：水平和垂直的间距相同

2、给定两个值 ：

第一个值 表示的是水平间距

第二个值 表示的是垂直间距

注意：只有在分离边框模式下，边框边距才有效，即border-collapse:separate时，border-spacing才有效

3、标题位置

属性：caption-side

取值：

1、top ：默认值，标题在表格内容之上

2、bottom：标题在表格内容之下

4、显示规则

作用：用来帮助浏览器指定如何布局一张表，也就是指定 td 尺寸的计算方式

属性：table-layout

取值：

1、auto

默认值，即自动表格布局，列的尺寸实际上是由内容来决定的

2、fixed

固定表格布局，列的尺寸由设定的值为准的

自动表格布局 VS 固定表格布局

1、自动表格布局

1、单元格的大小会适应内容

2、表格复杂时，加载速度较慢(缺点)

3、自动表格布局会比较灵活(优点)

4、适用于不确定每列大小时使用

2、固定表格布局

1、单元格的尺寸取决于设定的值

2、任何情况下都会加速显示表格(优点)

3、固定表格布局不够灵活(缺点)

4、适用于确定每列大小时使用

4、定位 - 浮动定位

1、定位

定位，指的是改变元素在页面中默认的位置

2、定位的分类

按照定位的效果，可以分成以下几类：

1、普通流定位(默认定位方式)

2、浮动定位

3、相对定位

4、绝对定位

5、固定定位

3、定位 - 普通流定位

普通流定位，又称为"文档流定位",页面中元素们的默认定位方式

1、每个元素在页面中都有自己的空间

2、每个元素默认都是在其父元素的左上角开始出现

3、页面中的块级元素都是按照从上到下的方式逐个排列，每个元素独占一行

4、页面中的行内元素 以及 行内块元素都是按照从左到右的方式来排列的

问题：如何能够让多个块级元素在一行内显示呢???

4、浮动定位

1、什么是浮动 &特点

如果将元素的定位方式设置为浮动定位，name元素将具备以下特征：

1、元素将被排除在文档流之外(脱离文档流)，不再占据页面的空间，其它未浮动元素要上前补位

2、浮动元素会停靠在其父元素的左边或右边，或其它已浮动元素的边缘上

3、浮动元素只能在当前行浮动

4、浮动定位解决的问题：让多个块级元素在一行内显示

2、语法

属性：float

取值：

1、none

默认值，即无任何浮动效果

2、left

左浮动，让元素停靠在父元素的左边，或挨着左侧已有的浮动元素

3、right

右浮动，让元素停靠在父元素的右边，或挨着右侧已有的浮动元素

练习：

1、创建 07-float.html

2、创建三个元素，id分别为d1,d2,d3,尺寸200*200 ,背景色分别为red,green,blue

3、依次让 d1，d2，d3实现右浮动，观察效果

4、将步骤3注销，依次让d1，d2，d3实现左浮动，观察效果

3、浮动引发的特殊效果

1、当父元素显示不下所有已浮动子元素时，最后一个将换行，但是，有可能被卡住

2、元素一旦浮动起来后，宽度将以内容为主(未指定宽度情况下)

3、元素一旦浮动起来后，将变为块级元素

允许修改尺寸

能正常处理垂直方向外边距

4、文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，而会巧妙的避开浮动元素