CSS渐变、文本、表格、浮动

1.渐变

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

2.主要因素:色标(一种颜色 及其 出现的位置),一个渐变是由多个色标组成(至少两个)

3、渐变分类

(1)线性渐变:以直线的方向来填充渐变色

(2)径向渐变:以圆形的方式实现的填充效果

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

4.线性渐变

属性:background-image

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

(1)angle

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

取值:

关键字: to top / right / bottom / left  从下向上 / 左向右 / 上向下 / 右向左 填充渐变色

角度值:

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

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

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

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

线性渐变角度值:

(2)color-point

表示渐变里各个颜色出现的位置

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

1、red 0%
在填充方向的开始位置处颜色为 红色
2、green 50%
到填充方向一半的位置处,颜色变为绿色
3、blue 200px
到填充方向的200px的位置处,颜色变为蓝色

//从下向上,颜色由红色向绿色渐变
background:linear-gradient(to top,red 0%,green 100%);
//从左下角开始,颜色由红色到绿色渐变,到50px的位置处变为绿色,并开始由绿色到蓝色渐变
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

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

font-family:"微软雅黑",Arial;
font-family:"microsoft yahei",Arial,"simhei","宋体"

(2)字体大小

属性:font-size

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

(3)字体加粗

属性:font-weight

取值:

1、bold :加粗
2、normal :正常
3、value
无单位的数字
等同于 normal
等同于 bold

//介于正常体与粗体之间
font-weight:700;

(4)字体样式

属性:font-style

取值:

normal:正常显示

italic:斜体显示

(5)小型大写字母

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

属性:font-variant

取值:

normal:正常

small-caps:小型大写字符

(6)字体属性

简写方式

属性:font

取值:style variant weight size family ;

注意:使用简写属性时,必须要设置family的值,否则无效

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 为单位的数值

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

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

(5)首行文本缩进

属性:text-indent

取值:以 px 为单位的数值

(6)文本阴影

属性:text-shadow

取值:h-shadow  v-shaow  blur  color

3.表格

1.表格的常用属性

(1)边距属性:padding

(2)边框属性:border

(3)尺寸属性:width , height

(4)文本格式化属性:font-* , text-* , line-height

(5)背景属性:颜色,图片,渐变

(6)vertical-align

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

取值:

1、top :上对齐
2、middle :居中对齐
3、bottom :下对齐

2.表格的特用属性

(1)边框合并

属性:border-collapse

取值:

1、separate  默认值,即分离边框模式
2、collapse  边框合并

(2)边框边距

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

属性:border-spacing

取值:

1、给定一个值 :水平和垂直的间距相同
2、给定两个值 :
第一个值 表示的是水平间距
第二个值 表示的是垂直间距

 注意:只有在分离边框模式下,边框边距才有效

(3)标题位置

属性:caption-side

取值:

top :默认值,标题在表格内容之上
bottom :标题在表格内容之下

(4)显示规则

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

属性:table-layout

取值:

1、auto
默认值,即自动表格布局,列的尺寸实际上是由内容来决定的
2、fixed
固定表格布局,列的尺寸由设定的值为准的

4.浮动定位

1.语法

属性:float

取值:

1、none
默认值,即无任何浮动效果
2、left
左浮动,让元素停靠在父元素的左边,或挨着左侧已有的浮动元素
3、right
右浮动,让元素停靠在父元素的右边,或挨着右侧已有的浮动元素

2.浮动引发的特殊效果

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

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

(3)元素一旦浮动起来后,将变为块级元素;允许修改尺寸,能正常处理垂直方向外边距

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

3.清除浮动所带来的影响

元素一旦浮动起来之后,就会对后续的元素带来一定的位置影响(后续元素要上前占位),如果后续元素不想被影响的话(不想占位),那么就可以通过清除浮动的方式来解决

属性:clear

取值:

1、none
默认值,不做任何的清除浮动操作
2、left
清除当前元素前面元素左浮动所带来的影响
3、right
清除当前元素前面元素右浮动所带来的影响
4、both
清除当前元素前面元素任何一种浮动所带来的影响

  

(0)

相关推荐

  • Style 对象属性

    "CSS" 列表示该属性是在哪一个CSS 版本中定义的(CSS1.CSS2 或 CSS3).属性描述CSSalignContent设置或返回当灵活容器内的各项没有占用所有可用的空间 ...

  • CSS 奇思妙想边框动画

    今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...

  • CSS快速入门

    Blog:博客园 个人 参考:https://www.w3school.com.cn/css/index.asp 概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表 ...

  • css 样式必备知识

    CSS样式必备知识包含哪些内容:CSS 简介CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素CSS 语法CSS 规则由两个部分构成:选择器及一条或 ...

  • 字体 ,文本,边框,列表,表格 的样式

    字体样式 font-family  字体类型    字体类型只有一个英文单词无需加引号,如果是多个英文单词或是中文 则需要加上引号                                    ...

  • python测试开发django-135.CSS如何让左侧浮动(float)元素占满屏幕高度

    前言 在设计左侧固定,右侧自适应布局页面的时候,左侧的浮动(float)元素一般会给个背景色,希望根据屏幕高度铺满整个屏高. 展示效果 如下图,左侧黑色背景只显示一半,希望实现效果能一直到屏幕底部,并 ...

  • ueditor百度富文本表格列宽调整功能优化

    相信在大多数公司内部的办公系统中,都会用到富文本编辑器的功能. 目前比较流行的富文本编辑器也有很多,但如果对富文本的表格功能及操作体验比较友好的,却为数不多,甚至有些简便的富文本编辑器不提供表格编辑的 ...

  • 告别复制粘贴,两步搞定3000个文本转表格

    作者:小斯 策划:视频小分队 编辑:晚晚 Hello,艾瑞巴迪,我是小斯! 有人问我: 如果老板跟你说,要把 3000 个文本转化成表格,咋整? 啥,你说复制粘贴? 不好意思,屋漏偏逢连夜雨,键盘上[ ...

  • Word如何快速将文本转成表格?

    Word里面有时候也需要将表格的内容提取出来,专门转换为文本,这样来方便进行需要的操作.下面介绍两种将表格内容转换为文本的方法. 方法一: 1.全选目标表格. 2.然后按Ctrl+C快捷键进行复制. ...

  • Java 读取Word文本框中的文本/图片/表格

    Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...

  • 如何通过使用CSS实现渐变文字的效果

    WEB前端开发社区 今天 很难使网站脱颖而出.因此,这里有一个小技巧,可以改善所有目标网页或标题:使用渐变文字. 只要确保不要过度使用它即可.渐变文字绝对不能用在较长的文本中.但可以在标题或者特定醒目 ...

  • [css] 第95天 当一个元素被设置为浮动后,它的display值变为什么呢?

    今日试题: 当一个元素被设置为浮动后,它的display值变为什么呢? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多 ...

  • [css] 第94天 为什么会出现浮动?在什么时候需要清除浮动呢?

    今日试题: 为什么会出现浮动?在什么时候需要清除浮动呢? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). ...

  • [css] 第75天 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题?

    今日试题: 请你解释下什么是浮动和它的工作原理是什么?同时浮动会引起什么问题? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"( ...