CSS 渐变与文本格式化

CSS 渐变（Gradients）
渐变效果
CSS 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变相关属性：background-image。
1、什么是渐变
多种颜色变化的一个过程

分类：
1、线性渐变
2、径向渐变
3、重复渐变(线性,径向)
特点：
1、渐变都有填充方向(线性渐变)
2、色标(颜色，位置)
2、语法
属性：background-image
取值：
1、linear-gradient():线性渐变
2、radial-gradient():径向渐变
3、repeating-linear-gradient():重复线性渐变
4、repeating-radial-gradient():重复径向渐变
3、线性渐变
语法：background-image:linear-gradient(angle,color-point,color-point,…);
1、angle
渐变的方向或角度
取值：
to top : 从下向上填充渐变色
to right:从左向右填充渐变色
to bottom:从上向下填充渐变
to left:从右向左填充渐变色

                0deg : 0度->to top
				90deg: 90度->to right
				180deg:180度->to bottom
				270deg:270度->to left

CSS 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

线性渐变

语法
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
实例
从上到下的线性渐变：

 
 




线性渐变 - 从上到下
从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：



注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例
从左到右的线性渐变：

 
 




线性渐变 - 从左到右
从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：



注意： Internet Explorer 8 及之前的版本不支持渐变。

CSS 线性渐变实例：

2、color-point
色标：表示颜色及其颜色出现的位置
ex
red 0% : 开始的时候是红色
blue 25%:25%的时候变成蓝色

red 0px : 开始的时候是红色
blue 25px:到25px的位置处，变为蓝色

4、径向渐变
CSS  径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

语法：background-image:radial-gradient([size at position],color-point,color-point);
1、size at position
size:表示圆的半径
position:圆心位置，取值可以为 数值，百分比，关键字

该参数可以省略的，圆心位置在元素的正中间
径向渐变 - 颜色结点均匀分布（默认情况下）

实例
颜色结点均匀分布的径向渐变：

 
 




径向渐变 - 颜色结点均匀分布


注意： Internet Explorer 9 及之前的版本不支持渐变。

5、重复渐变
	语法：
		background-image:repeating-linear-gradient(同线性渐变);

background-image:repeating-radial-gradient(同径向渐变);
6、浏览器兼容性
对不支持渐变的浏览器可以增加浏览器前缀来解决兼容性
Firefox : -moz-
Chrome&Safari :-webkit-
Opera:-o-
IE : -ms-

background-image:linear-gradient();

如果浏览器不支持 属性的话 ， 那么前缀就加在属性名称前
ex:
animation,css3中所出的新属性

-webkit-animation:值;
-moz-animation:值;
-o-animation:值;

如果浏览器支持属性但不支持值得花，那么前缀就加在值前
ex:
background-image:linear-gradient();
linear-gradient()是CSS3中出现的新属性值。

background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();
2、文本格式化
文本格式化概述

• 主要包括

  • 控制字体: 如字体大小、字体加粗、字体系列等

  • 设置文本格式: 如文本颜色、文本排列和文本缩进等

• 建议使用文本格式化相关的样式，取代加粗()、倾斜()等 HTML 元素
  1、字体属性
  1、字体
  属性：font-family
  取值：value,value
  注意：
  字体取值中包含特殊符号和中文的话，要用 “” 引起来
  ex:
  font-family:Arial,“microsoft yahei”;

字体属性实例：

	
		
		
		
	
	
		

			这是一段文本，其中包含加粗的，斜体的，还有英文字符Hello , my name is changmengli!
		
	

字体属性 font

• 字体属性 font 用于把所有针对字体的属性设置在一个声明中

• 为简写属性，包含6个值，可以按顺序设置

  • font: font-style font-variant font-weight font-size font-family;

  • 不设置的值，则使用默认设置
    2、字体大小
    属性：font-size
    3、字体加粗
    属性：font-weight
    取值：
    1、normal：正常显示，大部分标记的默认值
    2、bold : 加粗
    3、无单位数值
    400~900
    400 : normal
    900 : bold
    4、字体样式
    属性：font-style
    取值：
    1、normal 正常
    2、italic 斜体
    5、小型大写字母
    Aa Bb Cc Dd
    属性：font-variant
    取值：
    1、normal
    2、small-caps
    6、字体属性
    属性：font
    取值：style variant weight size family;
    ex:
    font:bold 12px “Arial”;
    font:12px bold “arial”;不对
    注意：
    使用font属性的话，一定要加上 family的值，否则没效果
    2、文本属性
    1、文本颜色
    属性：color
    2、文本排列
    作用：控制元素中的文本、行内、行内块元素的水平对齐方式
    属性：text-align
    取值：left/center/right
    3、文字修饰
    属性：text-decoration
    取值：
    1、none
    没有
    2、underline
    下划线
    3、overline
    上划线
    4、line-through
    删除线 -->
    4、行高
    作用：指定一行文本的高度。如果行高高于文字本身大小，那么文本将在指定的行高范围内垂直居中显示
    属性：line-height
    取值：数值
    5、首行文本缩进
    属性：text-indent
    取值：value
    6、文本阴影
    属性：text-shadow
    取值：h-shadow v-shadow blur color;
    文本属性实例：

	
		
		
		
	
	

		

			Now apr love is the way I know his route of trials and hardships, both don't reward through sea just to and you hug to each other at the moment has bright love hands hold the stars I know he sailed to the a trip to the dark empathy to redeem longing you know you can't even feel you let starlight added a rainbow let sakura secretly kiss your forehead to make the world better and interlocking
		
		

			Hello Cml
			

			Hello Cml
		
	

小常小提示：（文中英文是世间美好与你环环相扣中的歌词翻译的，翻到此博客的人在闲暇之际可以听一下哦，记得要劳逸结合哦！）
控制文本格式

• 文本颜色 color:value;

• 文本排列 text-align: left/right/center;

• 文本修饰 text-decoration: none/underline;

• 行高 line-height: value;

• 首行文本缩进 text-indent:value;

• 文本阴影

• text-shadow:h-shadow v-shadow blur color;

• ``溢出
  处理空白

 white-space: normal/nowrap;

``- 文本溢出

- `text-overflow: clip/ellipsis;`

换行

• 长单词换行

- word-wrap: normal/break-word;

• 文本换行

 - `word-break: normal/break-all/keep-all;`

3、表格
1、表格常用属性
1、边距属性：padding
2、尺寸属性:width,height
3、文本、字体属性
4、背景属性：background …
5、边框属性: border
6、垂直方向对齐：vertical-align
取值：top/middle/bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
合并
2、边框边距
属性：border-spacing
作用：控制相邻单元格之间的距离
取值：
1个值：水平和垂直间距相同
2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用空格隔开
注意：border-collpase的值必须为 separate时才能设置边框边距
3、标题位置
标题：
默认位置：表格上方水平居中
属性：caption-side
取值：
1、top ：默认值
2、bottom : 标题位于表格之下
4、显示规则
作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为 表格布局
属性：table-layout
取值：
1、auto ：自动，自动表格布局(默认值)
列宽度是由内容来决定的
2、fixed ：固定，固定表格布局
列宽度有表格以及单元格所设定好的数据为主
auto与fixed的区别：
1、自动表格布局
1、单元格大小会适应内容
2、表格复杂时会比较慢
3、适用于不确定每列大小时使用
4、自定布局算法较慢，但是能反映传统的HTML表格
2、固定表格布局
1、列宽度取决于表格的宽度，列的宽度
2、会加速显示表格
3、固定表格布局算法比较快，但不够灵活
表格属性实例：

	
		
		
		
	
	
		

			

				
ChangMengliChangMengli
				
常梦丽
				
常梦鑫
				
小可爱
			
			

				
ChangMengliChangMengli
				
常梦丽
				
常梦鑫
				
小可爱
			
			

				
常梦丽
				
常梦丽
				
常梦鑫
				
小可爱