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:下对齐

原文地址:https://www.cnblogs.com/QiliPING9/p/9027760.html

时间: 2024-10-13 19:39:03

CSS-背景-渐变-文本格式化的相关文章

css中的背景、渐变 文本格式化和表格的常用属性

一.背景属性background background属性在一个生命中设置所有的背景属性 scroll:随着页面的其余部分滚动 fixed:固定在窗口的某个位置 语法结构: background:url(背景图像地址) 1.背景定位(background-position) 值:(1).x% y%第一个值为水平位置,第二个值为垂直位置 (2).xpx  ypx(同上) (3).left在页面或者包含元素的左边显示; (4).center在页面或者包含元素的中间显示; (5).right在页面或者

第十六天学习:CSS特性之文本格式化

关键字:文本格式化 学习计划: 文本格式化 color特性 text-align特性 vertical-align特性 text-decoraton特性 text-indent特性 text-shadow特性 text-transform特性 letter-spacing特性 word-spacing特性 white-space特性 direction特性 unicode-bid特性 学习记录: color特性 用于指定文本的颜色,这个属性设置了一个元素的前景色(在HTML表现中,就是文本的颜色

css背景-边框-文本

一.CSS3背景 属性列表 background background-color background-image background-repeat background-attatchment background-position background-origin background-clip background-size 1.CSS3背景原点属性 background-origin 设置或检索对象的背景图像计算background-position时的参考原点位置 IE8 Fir

css背景和文本样式

字体与颜色: font-family:宋体,楷体,微软雅黑,; font-size:10px;  改变字体的大小 font-style:normal|italic(斜体); font-weight:bold;  加粗 背景: background-color:red; 背景颜色 background-image:url("图片的路径") background-repeat:no-repeat|repeat-x|repeat-y;  图片不平铺|图片向X轴平铺|图片向Y轴平铺 backg

CSS背景、文本属性

一.背景属性 1.背景颜色 background-color: red; 2.背景图片相关 1)设置背景图片:background-image : url("路径"); 设置背景图片,指定图片路径,如果路径中出现中文或空格,需要加引号 2)设置背景图片的重复方式 默认背景图片从元素的左上角显示,如果图片尺寸与元素尺寸不匹配时,会出现以下情况: 1. 如果元素尺寸大于图片尺寸,会自动重复平铺,直至铺满整个元素 2. 如果元素尺寸小于图片尺寸,图片默认从元素左上角开始显示,超出部分不可见

css背景渐变

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#f2f2f2); /*IE旧版本*/ background: -ms-linear-gradient(top,#ffffff,#f2f2f2);/* IE 10 */ background:-moz-linear-gradient(top,#ffffff,#f2f2f2);/*火狐*/ backg

CSS——背景渐变

在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧.从右侧到左侧.从顶部到底部.从底部到顶部或着沿任何任意轴.如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生. 兼容性问题很严重,我们这里之讲解线性渐变 语法格式:  background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色):  background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色位置....): 原文地址:htt

CSS属性定义 文本修饰 边框效果 背景修饰

一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) hslhsla(h:色相,色环上(ppt78页)的角度值,0-360 s:饱和度,0-100% l:明度,0-100% a:不透明度,0-1之间的小数)color:hsla(30,100%,50%,0.8); 十六进制(一般格式为#ffffff)(字母范围从A-F,数字从0-9 ) opacity

css之为文本添加线性渐变和外描边

css之为文本添加线性渐变和外描边  一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before中添加文本,设置字体描边,绝对定位在文本下方 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<