CSS基本属性—文本属性和背景属性
【css中的颜色表示方式】
1、直接使用颜色的单词表示:red、green、blue
2、使用颜色的十六进制表示:#ff0000,#00ff00;
六位数,两两分组,分别表示红、绿、蓝
3、使用RGB(0~255,0~255,0~255);三位数,分别表示红绿蓝的配比。
4、RGBa();第四位数表示透明度。
【字体】
1、font-weight:字体粗细;400表示norml,700表示加粗;
bold:加粗;lighter:细体;也可以使用100-900数值。
2、font-style:字体样式;
italic:倾斜;norml:正常;
3、font-size:字体大小;可以写像素单位px;也可以写%;
200%表示浏览器默认大小(16px)的两倍=32px;
4、font-family:字体系列;可以直接写字体名,也可以写字体系列名。
常用子体系列:serif:衬线体;sans-serif:非衬线体;
可以写多个值,用多个逗号隔开。表示优先使用第一个,如果没有这个字体,依次向后使用。通常最后一个放字体系列名。
5、font缩写形式:
顺序必须是:font-weight font-style font-size
A[Y)I~](ZC9Z[3Y)IDK7LK.gif)
不同属性之间,用空格分隔;
font-size
A[Y)I~](ZC9Z[3Y)IDK7LK.gif)
font-family:多个字体之间,用逗号分隔。
color:字体颜色,可以是单词,RGB,十六进制等。
opacity:透明度,可选值0-1
RGBA本身可以设置颜色,而opacity必须配合其他属性来用,
rgba仅仅是当前元素设置的颜色透明;
opacity会让当前元素里面的所有文字,背景,子元素都透明。
line-height:行高;可以写px单位,可以写数字(表示默认行距的几倍),可以写%(表示默认行距的百分比)
行高的重要作用:让单行文字在div中垂直居中。
设置行高=div的高度,既可以让文字垂直居中。
text-align:设置区域内行级元素水平对齐方式,对块级元素无效。
letter-spacing:字符间距。字与字之间的距离。
text-decoration:文本修饰;
under-line:下划线;over-line:上划线;line-through:删除线;none:去除下划线;
text-overflow:设置行末多余文字的显示方式;
clip:多余文字裁剪掉;ellipsis:多余文字显示省略号(需要配合white-space:nowrap;使用);
white-sapce:nowrap;设置中文行末,不断行显示。
【重点】设置行末显示省略号(三行代码,缺一不可)
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-shdow:2px(水平往右2像素) 2px(垂直2像素) 2px(模糊程度,0表示不模糊) blue;文字阴影,
水平阴影距离正数表示阴影右移,负数表示阴影左移。
垂直阴影距离:正数表示阴影下移,负数表示阴影上移。
text-indent:首行缩进。
-webkit-text-stroke:0.5px blue;文字描边。
-webkit:表示只有webkit内核的浏览器生效,常见的chrome,safari
二、CSS常用背景属性
1、background-color: 背景色。
2、background-image:url( ); 背景图片.背景图和背景同时存在时,背景图覆盖背景色。
3、background-repeat:背景图重复方式
no-repeat:不平铺;
repeat-x:X轴平铺;
repeat-y:Y轴平铺;
repeat:平铺;
4、background-size:背景图大小;
指定宽度高度:可以写px,也可以写%(父容器宽高的%)
写两个属性时,分别表示宽度高度
写一个属性时,表示宽度,高度将会等比缩放
contain: 图片等比缩放,直到宽或高较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
cover: 图片灯笔缩放,直到宽或高较小的一边缩放到100%为止。(可能导致较长的一边>100%,导致图片无法显示)
5、 background-position:背景图偏移量.
指定位置: left/center/right top/center/bottom
当写一个值时,另一个默认居中。
指定坐标:两个属性分别表示水平位移,垂直位移。
坐标的值可以是像素单位,也可以是%
当写像素px单位时:正数右移,负数左移;垂直方向:正数下移,负数上移。
当写%时:一般只写正数。表示的是,去掉图片的宽高,剩余空白区域的分布比例。
background-position:30%;水平方向去掉图片宽度,剩余区域3:7分。
6、【列表】
list-style:修改列表小圆点的样式。
none:去掉小圆点
url();可以使用url导入一个小图片,作为列表的
float:浮动,可以实现让块级元素,在一行显示.
CSS基本属性—文本属性和背景属性的更多相关文章
- CSS属性:背景属性(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. background系列属性 常见背景属性 CSS样式中,常见的背景属性 ...
- css 02-CSS属性:背景属性
02-CSS属性:背景属性 #background 的常见背景属性 css2.1 中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff; 设置元素的背景 ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
- CSS属性(背景属性)
1.背景属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...
- css基础语法二(常用文本与背景属性)
[CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...
- 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)
text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...
随机推荐
- [剑指Offer] 36.两个链表的第一个公共结点
题目描述 输入两个链表,找出它们的第一个公共结点. [思路]找出两个链表的长度,然后让长的走两个链表的长度差,然后再一起走(因为两个链表用公共的尾部). /* struct ListNode { in ...
- WebService使用介绍(三)
jax-ws开发深入 JAX-WS注解 注解说明 WebService的注解都位于javax.jws包下: @WebService-定义服务,在public class上边 targetNamespa ...
- 第一个贴上XMT标签的Hadoop程序
距离老板留给我并行化做属性约简的任务开始到今天,已是一周有余,期间经历过各种呕心沥血,通宵达旦,终于运行出了一个结果.其中在配置过程中,浪费了爷大量的时间,有时回想自己上个周干的事情,会觉得分明的本末 ...
- Linux总结(二)
1. 虚拟机安装 a)双系统(不建议初学者一开始去装) b)般建议使用虚拟机来操作试验环境 c)好处:可以模拟真实的环境进行各种的试验和操作 d)在启动之后,在操作的时候会占用一部分的系统资源 1 ...
- gogole调试请求体的数据怎么知道
在network---->header->request payload中看 详细情况见下图所示:
- nginx压力测试和优化配置
115 yum -y install gcc automake autoconf libtool make 116 yum install ctags 117 mkdir -m 644 -p /usr ...
- VC++使用CImage在内存中Jpeg转换Bmp图片
VC++中Jpeg与Bmp图片格式互转应该是会经常遇到,Jpeg相比Bmp在图片大小上有很大优势. 本文重点介绍使用现有的CImage类在内存中进行转换,不需要保存为文件,也不需要引入第三方库. Li ...
- pip 使用国内源
常用国内的pip源如下:阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple ...
- Sed basic and practice
定义:Sed 是针对数据流的非交谈式编辑器,它在命令行下输入编辑命令并指定文件,然后可以在屏幕上看到编辑命令的输出结果. 好处:Sed 在缓冲区内默认逐行处理数据,所以源文件不会被更改和破坏. 格式: ...
- 解读dbcp自动重连那些事
转载自:http://agapple.iteye.com/blog/791943 可以后另一篇做对比:http://agapple.iteye.com/blog/772507 同样的内容,不同的描述方 ...