IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > css基本语法-文本格式化、表格、浮动的介绍 六

css基本语法-文本格式化、表格、浮动的介绍 六

时间:2017-01-23 09:04来源:原创 作者:恪己 点击:
一、渐变 1、径向渐变 (1)、语法 background-image:radial-gradient([size at position],color-point,color-point,...); 1)、size at position size:圆的半径 position:圆心的位置 l数值 0px 0px :圆心在元素的左上角
一、渐变
1、径向渐变
(1)、语法
background-image:radial-gradient([size at position],color-point,color-point,...);
1)、size at position
size:圆的半径
position:圆心的位置
l 数值
0px 0px :圆心在元素的左上角
15px 30px :
l 百分比
l 关键字
注意:该参数可以省略,如果省略的话,那么圆心默认就在元素的中间位置处
2、重复渐变
(1)、语法
background-image:
repeating-linear-gradient(angle,color-point,color-point);
repeaiting-radial-gradient([size at position],color-point,...);
3、浏览器兼容性
可以通过增加 浏览器前缀 的方式 实现兼容性
Firefox : -moz-
Chrome & Safari :-webkit-
Opera : -o-
 
前缀加在哪???
如果浏览器不支持 属性的话,那么前缀就加在 属性名称之前
ex
 animation : 动画属性
 -moz-animation :值;
 
如果浏览器支持属性但不支持值的话,那么前缀就加在 属性值前
ex
background-image:背景图像可以做渐变
 
background-image:linear-gradient();
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
二、文本格式化
1、概述
控制字体:字体大小,加粗,样式 ,... ...
文本格式:文本颜色,排列,缩进 ,... ...
 
<b></b> 加粗 --> 加粗
<i></i> 斜体 --> 样式
2、字体属性
(1)、字体系列
font-family:value1,value2,... ...;
 
ex:
font-family:"微软雅黑",arial;
(2)、字体大小
font-size
取值:px,pt,em 作为单位
(3)、字体加粗
font-weight
取值:
*normal
正常,非加粗显示
除<b>,<strong>,<h1>~<h6>以外的元素的默认值
*bold
加粗
<b>,<strong>,<h1>~<h6> 的默认值
*400~900
400 : normal
900 : bold
(4)、字体样式
font-style
取值:
l normal
正常,除<i>以外的默认值
l italic
斜体,<i>的默认值
(5)、小型大写字母
font-variant
取值:
l normal
正常
l small-caps
(6)、字体属性-font
font:style variant weight size family;
注意:在使用简写方式时,一定要带着 family ,否则设定无效
 
font:12px; /* 无效*/
font:12px "微软雅黑";/*有效*/
3、文本属性
(1)、文本颜色
color
(2)、文本排列
作用:指定文本或行内元素或行内块元素的水平对齐方式
属性:text-align
取值:left/center/right
(3)、文字修饰
作用:线条修饰效果
属性:text-decoration
取值:
*none
不显示线条
*underline
下划线,<a>,<u>
*line-through
删除线 ,<s>的默认值
*overline
上划线
(4)、行高(重点)
1)、作用
一行数据的高度
如果 行高的高度 高于 文字本身的高度的话,那么该段文本将在指定行高的范围内呈现出 垂直居中的显示效果
2)、属性
line-height
(5)、首行文本缩进
属性:text-indent
取值:以px为单位的数值(距离)
(6)、文本阴影
属性:text-shadow
取值:h-shadow v-shadow blur color
三、表格
1、表格常用样式属性
1)、内边距属性-padding
2)、尺寸属性-width,height
3)、文本格式化属性
font-*:
color,text-align,... ...
4)、背景属性
颜色,图像,渐变
5)、边框属性
6)、vertical-align
垂直方向对齐
取值:
top/middle/bottom
2、表格特有样式属性
1)、边框合并
属性:border-collapse
取值:
1、separate
默认值,分离边框模式
2、collapse
边框合并模式
2)、边框边距
①作用
设置相邻单元格边框之间的距离(类似于cellspacing)
②属性
border-spacing
取值:
*取1个值
表示水平和垂直间距相等
*取2个值
第一个值表示的 水平间距
第二个值表示的 垂直间距
两个值之间用 空格 隔开
③要求
border-collapse必须为separate
必须为分离边框模式时有效
3)、标题位置
<caption></caption>

     

------分隔线----------------------------
栏目列表
推荐内容