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属性值: ...
随机推荐
- 【EasyNetQ】- 发布
EasyNetQ支持的最简单的消息传递模式是发布/ 订阅.这种模式是消除消费者信息提供者的绝佳方式.出版商简单地向全世界说,“这已经发生了”或“我现在有了这些信息”.它不关心是否有人正在倾听,他们可能 ...
- npm基本使用
常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服 ...
- mac 倍速播放
Mac的倍速播放,使用工具播放是quick time player,使用方式是,按住 “option” + “>>” 即可调整倍数:
- LeetCode -- Merge Two Sorted Linked List
Question: Merge two sorted linked lists and return it as a new list. The new list should be made by ...
- hihocoder 1323 回文字符串(字符串+dp)
题解: 比较水的题目 dp[i][j]表示[i...j]最少改变几次变成回文字符串 那么有三种转移 dp[i][j] = dp[i+1][j-1] + s[i] != s[j] dp[i][j] = ...
- 自定义CheckBox
自定义android的CheckBox按钮图形有两个步骤三种方式: 第一步: 新建Android XML文件,类型选Drawable,根结点选selector,放置在drawable文件夹内,指定各种 ...
- Codeforces Round #478 C. Valhalla Siege
C. Valhalla Siege time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- sls文件
http://www.ituring.com.cn/article/42238 只是数据而已 深入学习之前,明白SLS文件只是结构化的数据而已是很有用的.看懂和编写SLS文件不需要理解这一点,但会让你 ...
- c++ 公有继承的赋值兼容规则
赋值兼容规则是指在需要基类对象的任何地方都可以使用公有派生类的对象来替代.通过公有继承,派生类得到了基类中除构造函数.析构函数之外的所有成员,而且所有成员的访问控制属性也和基类完全相同.这样,公有派生 ...
- 【hdu1712】分组背包(每组最多选1个)
[分组背包] [题意]ACboy要开始选课了,上一门课能够获得的收益和他上这门课的时间是有关的,然后给你若干门课,让你帮他进行选课,每一门课自然是只能选择一个课程时长,问你如何选择,才能使ACboy获 ...