CSS-背景-渐变-文本格式化
1.背景
1.背景色
属性:background-color
取值:合法的颜色值
注意:背景颜色和背景图片默认都从边框位置处开始填充
2.背景图片
属性:background-image
取值:url(图片的路径);
ex:
background-image:url(a.jpg);
3.背景图片平铺
属性:background-repeat
取值:
1.repeat 平铺
2.no-repeat 不平铺,只显示一次
3.repeat-x 只在横向平铺
4.repeat-y 只在纵向平铺
4.背景图片尺寸
属性:background-size
取值:
1.value1(宽) value2(高)
2.x% y%
3.cover 将背景图等比放大,直到背景图完全覆盖到元素的所有区域为止。
4.contain 将背景图等比放大,直到背景图碰到元素的某一个边缘为止。
5.背景图片的固定
属性:background-attachment
取值:
1.scroll 默认值,滚动
2.fixed 固定
6.背景图片定位
作用:改变背景在元素中的位置
属性:background-position
取值:
1.x y
x:背景图在水平方向的偏移距离
取值为正,向右移动
取值为负,向左移动
y:背景图在垂直方向的偏移距离
取值为正,向下移动
取值为负,向上移动
2.x% y%
0% 0% 背景在左上角
100% 100% 背景在右下角
50% 50% 背景在正中间
3.关键词
x:left/center/right
y:top/center/bottom
7.背景的简写属性
在一个属性中指定多个属性值
background:color url() repeat attachment position;
ex:
background:red;
background:url(a.jpg) no-repeat fixed center center;
2.渐变
1.什么是渐变
渐变指的是多种颜色平缓变化的一种显示效果。
2.渐变的主要因素
1.色标:一种颜色 及其 出现的位置
一个渐变是由多个色标组成(至少两个)
3.渐变的分类
1.线性渐变
以直线的方向来填充渐变色
2.径向渐变
以圆形的方式来填充渐变色
3.重复渐变
将线性渐变 或 径向渐变 重复几次实现渐变填充
4.线性渐变
属性:backgrond-image
取值:linear-gradient(angle,color-point1,color-point2,...);
angle:表示渐变填充的方向或角度
取值:
1.关键词
to top 从下向上填充渐变色
to bottom 从上向下填充渐变色
to left 从右向左填充渐变色
to right 从左向右填充渐变色
2.角度值
0deg 从下向上(等同于to top)
180deg 从上向下(等同于to bottom)
color-point:色标
表示颜色及其位置
取值:颜色和位置的组和,中间用空格隔开。
ex:
red 0px;
blue 100px;
green 200px;
5.径向渐变
属性:background-image
取值:radial-gradient([size at position],color-point1,color-point2,...);
size:半径,以px为单位的数字
position:圆心所在位置
1.x y:具体数字
2.x% y%:元素宽和高的占比
3.关键词
x:left/center/right
y:top/center/bottom
6.重复渐变
1.重复线性渐变
background-image:repeating-linear-gradient(angle,color-point,...);
color-point:位置一定要给绝对数值(px),不要用百分比。
2.重复径向渐变
backgrond-image:repeating-radial-gradient([size at position],color-point);
练习:
给一个div设置高宽各400px,然后设置重复线性渐变背景色。
7.浏览器兼容性
各浏览器的新版都支持渐变属性
对于不支持的浏览器版本,可以通过增加浏览器前缀的方式,让浏览器支持渐变。
Firefox:-moz-
Chrome&Safari:-webkit-
IE:-ms-
opera:-o-
ex:
background-image:-webkit-linear-gradient();
www.caniuse.com
3.文本格式化属性
1.字体属性
1.指定字体
属性:font-family
取值:用逗号隔开字体名称列表
ex:
font-family:"微软雅黑","黑体",Arial;
2.字体大小
属性:font-size
取值:以px或pt为单位的数值
3.字体加粗
属性:font-weight
取值:
1.bold 加粗(b标记)
2.normal 正常
3.value 整百倍的数字 400-900
4.字体样式
属性:font-style
取值:
1.italic 斜体(i标记)
2.normal 正常
5.小型大写字母
将小写字符变为大写,但大小与小写字符一致。
属性:font-variant
取值:
1.normal 正常
2.small-caps 小型大写字符
练习:
在网页中定义一个div元素,并设值id为main,内容随意,中英文结合
设置以下格式:
1.字体:微软雅黑
2.文字大小:24px
3.加粗并且倾斜显示文本
4.将所有小写字符转为小型大写字符
6.字体属性的简写方式
属性:
font:style variant weight size family;
注意:使用简写方式时,必须要设置family的值,否则无效。
ex:font:24px;//错误
font:24px "微软雅黑";//正确
2.文本格式化
1.文本颜色
属性:color
取值:合法的颜色值
2.文本排列
作用:指定文本(行内,行内块)在水平方向的对齐方式。
属性:text-align
取值:left/center/right/justify(两端对齐)
3.线条修饰
属性:text-decoration
取值:
1.none 无任何线条修饰
2.underline 下划线
3.overline 上划线
4.line-through 删除线
4.行高
作用:一行数据所占的高度
如果行高大于字体本身的大小,那么改行文本将在指定的行高内呈现垂直居中的效果。
属性:line-height
取值:以px为单位的数值
5.首行文本缩进
属性:text-indent
取值:以px为单位的数值
6.文字阴影
属性:text-shadow
取值:h-shadow v-shadow blur color;
练习:
在上面文本练习的基础上,增加以下效果:
1.文本排列方式为两端对齐
2.文本的修饰为下划线
3.行高设为100px,并观察设完行高后的文本效果
4.文本阴影,水平和垂直偏移0px,模糊距离为3px,颜色红色
4.表格
1.表格的常用属性
1.边距属性:padding
2.边框属性:border
3.尺寸属性:width,height
4.文本格式化属性:font-*,text-*,line-height
5.背景属性:颜色,图片,渐变
6.vertical-align
作用:指定单元格数据的垂直对齐方式
取值:
top:上对齐
middle:居中对齐
bottom:下对齐
CSS-背景-渐变-文本格式化的更多相关文章
- CSS——背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很 ...
- CSS背景渐变支持transition过渡效果
background-image 是不支持 CSS3 的transition过渡效果的,而CSS3 gradient 渐变作为背景图片存在的时候, 下面的CSS不会有过渡效果 <div clas ...
- CSS背景以及文本
css设置背景: <style type="text/css"> /*background-image: 直接设置x,y重复而且平铺整个body*/ /*下面两句的功能 ...
- CSS3——边框 圆角 背景 渐变 文本效果
边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...
- Css背景渐变
语法: background:linear-gradient( 渐变方向,起点颜色,终点颜色 ) 参数说明: 渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而 ...
- css背景渐变兼容(兼容所有ie)
css3里面一行可以搞定的事,换到ie里,要用滤镜,在网上找了很多,不知道什么原因都没用,终于找到个有用的,放在这里,方便大家用,自己也找得到~ 完整型代码,兼容所有浏览器: background: ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- css实现动态阴影、蚀刻文本、渐变文本
css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...
随机推荐
- BGRA与BGR的相互转换
BGRA转BGR void BgraToBgr(BYTE *bgraData,int *bgraSize) { ,j=; j<*bgraSize; i+=,j+=) { *(bgraData+i ...
- 安装scrapy时遇到的问题
会报错,安装这个试试: pip install cryptography --force-reinstall
- CSS3实现图片循环旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Springboot学习01- 配置文件加载优先顺序和本地配置加载
Springboot学习01-配置文件加载优先顺序和本地配置加载 1-项目内部配置文件加载优先顺序 spring boot 启动会扫描以下位置的application.properties或者appl ...
- ubuntu系列-很好用的截图工具shutter
直接在ubuntu软件市场中搜索“shutter”下载即可
- 使用插件和不使用插件实现select的框
# 1.select框单选 # 方式1 select1 = fields.ChoiceField( choices=[ (1,"select框方式1_1"), (2,"s ...
- java类封装成dll
@参考文章1,@参考文章2,@参考文章3 1,建立测试类,注意英文注释部分,用汉语直接编译会乱码 public class Hello { //native method is used for ca ...
- VS2008水晶报表变两页(重装系统后)
找到水晶报表中的设置-打印机设置,发现打印机名称是 Microsoft XPS Document Writer (已重定向2),
- android 开发概述以及相关背景知识
参考链接:http://www.runoob.com/android/android-architecture.html http://www.runoob.com/android/android-a ...
- hdu 5693 && LightOj 1422 区间DP
hdu 5693 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=5693 等差数列当划分细了后只用比较2个或者3个数就可以了,因为大于3的数都可以由2和3 ...