专栏首页李才哥css应知应会 第三集
原创

css应知应会 第三集

1、渐变

1、什么是渐变

多种颜色平缓变化过渡的效果

2、渐变的核心

色标 :表示颜色值 以及 颜色出现的位置

在一个渐变过程中允许出现多个色标

3、渐变的分类

1、线性渐变(linear-gradient)

2、径向渐变(radial-gradient)

3、重复线性渐变(repeating-linear-gradient)

4、重复径向渐变(repeating-radial-gradient)

4、渐变的语法

属性:background-image

取值:

1、线性渐变

background-image:linear-gradient();

2、径向渐变

background-image:radial-gradient();

3、重复线性渐变

background-image:repeating-linear-gradient();

4、重复径向渐变

background-image:repeating-radial-gradient();

详解:

1、线性渐变

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

1、angle:表示渐变的方向 或 角度

1、可以取值为关键字

1、to top

从下向上填充所有的渐变色

2、to right

从左向右填充所有的渐变色

3、to bottom

从上向下填充所有的渐变色

4、to left

从右向左填充所有的渐变色

2、可以取值为具体的角度值

范围 0deg ~ 360deg

1、to top

对应 0deg

2、to right

对应 90deg

3、to bottom

对应 180deg

4、to left

对应 270deg

2、color-point :表示 色标

色标:颜色的值及其出现的位置

语法:将 颜色 以及 位置 中间用 空格隔开即可

1、red 0%

2、green 50%

3、blue 100px

background:linear-gradient(to top,blue 100px,red 200px)

4、background:linear-gradient(to top,red,green,blue);

2、径向渐变

background:radial-gradient([size at position,]color-point1,color-point2,...);

1、size at position

可以省略不写

size : 表示的是圆的半径

at : 关键字,在此处不能省略

position : 圆心位置

3、重复线型渐变

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

5、浏览器兼容性问题

渐变是CSS3新特性

到目前位置,各款浏览器的较高的版本都已经支持渐变,对于不支持渐变的版本,可以尝试着添加浏览器的前缀,让其支持渐变。如果加了前缀还不支持的话,那么该浏览器则无法正常显示渐变了。

Google Chrome :-webkit-

Mozilla Firefox : -moz-

Apple Safari : -webkit-

Opera Opera : -o-

浏览器前缀如何加???

1、如果浏览器不支持属性的话,则将前缀增加在属性名称前

animation: 值;

-webkit-animation:值;

-moz-animation:值;

-o-animation:值;

2、如果浏览器不支持属性值的话,则将前缀增加在属性值的前面

background:linear-gradient();

background:-webkit-linear-gradient();

background:-moz-linear-gradient();

bakcground:-o-linear-gradient();

2、文本格式化属性

1、字体

1、字体系列

属性:font-family

取值:以 , 隔开的字体值的列表

ex:

font-family:"微软雅黑",Arial,"华文彩云";

2、字体大小

属性:font-size

取值:px,pt,em,rem

ex:

font-size:12px;

注意:两个英文字符的宽度 等同于 一个中文字符

3、字体加粗

属性:font-weight

取值:

1、normal

非加粗显示

2、bold

加粗显示文本

3、value

400 ~ 900

400 :normal

900 :bold

4、字体样式

属性:font-style

取值:

1、normal

非斜体显示

2、italic

斜体显示

5、小型大写字母显示

Aa Cc Bb

作用:将小写字母变为大写,但是大小跟小写字母一样

属性:font-variant

取值:

1、normal

正常

2、small-caps

6、字体属性 - font

font:style variant weight size family;

注意:使用简写方式时,必须要设置font-family的值,否则无效

ex:

font:12px;

font:12px "宋体";

2、文本属性

1、文本颜色

属性:colo

取值:颜色值

2、文本排列

作用:控制文本,图像,行内块元素 在父元素中的水平排列方式

属性:text-align

取值:left/center/right/justify

3、文本修饰

属性:text-decoration

取值:

1、none :无修饰

2、underline :下划线

3、overline :上划线

4、line-through :删除线

4、行高

作用:一行数据所占的高度,如果行高高于文字高度的话,那么文字将在指定行高范围内垂直居中显示

属性:line-height

取值:px 或 当前字体的倍数-无单位的数字

ex:

div{

font-size:12px;

line-height:2;

}

5、首行文本缩进

作用:指定第一行的文本向右缩进多少距离

属性:text-indent

取值:缩进距离,以px为单位的数值

6、文本阴影

属性:text-shadow

取值:h-shadow v-shadow blur color;

3、表格

1、表格常用属性

1、边距属性 - 内边距(padding)

2、尺寸属性 - width ,height

3、边框属性 - borde

4、文本格式化属性

5、背景属性

6、垂直方向对齐

属性:vertical-align

取值:top / middle / bottom

2、表格特有属性

1、边框合并

属性:border-collapse

取值:

1、separate

默认值,即分离边框

2、collapse

边框合并

2、边框边距

作用:设置 相邻的两个单元格 或 表格之间的距离

属性:border-spacing

取值:

1、取1个数字

每个单元格之间的水平 和 垂直的间距是相同的

2、取2个数字

第一个数字表示水平间距

第二个数字表示垂直间距

注意:必须保证表格实在 分离边框(border-collapse:separate;) 模式下才能用该属性

3、标题位置

属性:caption-side

取值:

1、top

默认值,将标题放在表格之上

2、bottom

将标题放在表格之下

4、显示规则

1、作用

告诉浏览器如何布局一张表,指定表格的计算模式

2、语法

属性:table-layout

取值:

1、auto

自动,自动表格布局,默认布局方式,单元格的尺寸实际上是由内容来决定的

2、fixed

固定,固定表格布局,单元格的尺寸是以设定的值为准,不会通过内容而改变布局

3、自动表格布局 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、解决的问题

多个块级元素在一行内的显示问题

2、什么是浮动定位 & 特点

将元素设置为浮动定位的话,那么将具备以下几个特点:

1、浮动元素会被排除在文档流之外,即脱离文档流,不占据页面空间,后续元素要上前补位

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

3、浮动只会在当前行内完成

3、浮动的语法

属性:float

取值:

1、none

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

2、left

左浮动,让元素停靠在父元素的左边 或 左侧已有的浮动元素的边缘上

3、right

右浮动,让元素停靠在父元素的右边 或 右侧已有的浮动元素的边缘上

4、浮动引发的特殊效果

1、元素一旦浮动起来之后,那么都将变成块级元素

块级:

1、允许修改尺寸

2、能够正常的显示 margin 和 padding 效果的

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css应知应会 第七集

    rotate3D(x,y,z,ndeg) : 指定3个轴同时旋转的角度。x,y,z取值为1的时候,说明该轴要参与旋转,取值为0,该轴则不参与旋转

    李才哥
  • css应知应会 第四集

    3、当父元素中显示不下所有的已浮动子元素的话,那么最后一个将换行,依次类推。但有可能会被卡住

    李才哥
  • 浅谈JavaScript 数据属性和访问器属性

    创建自定义对象通常有两种方法,第一种就是创建一个Object的实例,然后再为其添加属性和方法,例如:

    李才哥
  • UWP基础教程 - XAML对象元素和属性

    元素 XAML的对象元素是指XAML中一个完整的节点,一个XAML文件始终只有一个根元素,在Windows 10 UWP 应用中通常是采用Page作为根元素,这...

    陈仁松
  • 漫话ES6:part10:面向过程与面向对象

    扩展:除了以上面向对象的方法,还有对象的静态方法,对象的静态属性,私有方法和私有属性 new.target 属性等。我们以后会给大家再聊聊这些使用方法。

    舒克
  • win10下vs2015+python3+theano+keras+cuda8.0安装教程

    1. 安装vs2015及以下版本 将c++有关选项选中安装完毕 CUDA需要C++的编译器,Windows下可以使用Visual C++,我们可以直接下...

    李智
  • HTML5学习笔记(一)

    1.什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,...

    用户1667431
  • SQL反模式学习笔记6 支持可变属性【实体-属性-值】

    反模式:使用泛型属性表。这种设计成为实体-属性-值(EAV),也可叫做开放架构、名-值对。

    张传宁老师
  • 基于 CGLIB 库的动态代理机制

    之前的文章我们详细的介绍了 JDK 自身的 API 所提供的一种动态代理的实现,它的实现相对而言是简单的,但是却有一个非常致命性的缺陷,就是只能为接口中的方法完...

    Single
  • 英特尔推出自然语言处理开源库,代号“NLP Architect”

    几天前,英特尔宣布推出开源库NLP Architect——这是一个用于自然语言处理(NLP)的库,帮助开发人员为聊天机器人和虚拟助手等会话应用提供所必需的功能,...

    量子位

扫码关注云+社区

领取腾讯云代金券