9-[CSS]-字体、文本、背景图片
1、字体相关CSS属性介绍
p{
width: 300px;
height: 60px;
/* 等价于
font-size: 14px;
line-height: 30px;
font-family: '宋体';
*/
font:14px/30px "Arial","Hanzipen SC","微软雅黑";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体</title> <style>
p{
width: 300px;
height: 60px;
/* 等价于
font-size: 14px;
line-height: 30px;
font-family: '宋体';
*/
font:14px/30px "Arial","Hanzipen SC","微软雅黑"; }
</style>
</head> <body>
<!--
使用font-family注意几点： 1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman 2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体"; 4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun"; 5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体” --> <p> 我是文本</p> </body>
</html>
font-family
常见字体：https://blog.csdn.net/cddcj/article/details/70739481
如果设置成inherit，则表示继承父元素的字体。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>字体样式</title> <!--内链式 -->
<style type="text/css">
p{
/*设置字体大小*/
font-size: 30px; /*推荐设置斜体的时候使用oblique*/
/*font-style: italic;*/
font-style: oblique; /*设置字体的粗细*/
font-weight: bolder; /*设置字体的类型*/
font-family:"微软雅黑"; /*设置字体的颜色*/
color: red;
}
</style> </head>
<body>
<!--
默认字体大小是 16px = 1em
0.75em = 12px
-->
<p>这里是个p!!</p> </body>
</html>
2、文本属性
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>文本样式</title> <style type="text/css">
.box1{
width: 500px;
height: 200px;
background-color: red; color: rgba(85,26,139,0.73); /*上下删除线 overline line-through */
text-decoration: underline; /*设置鼠标的形状*/
cursor: pointer; /*设置首行缩进*/
text-indent: 20px; font-size: 20px; /*left right center justify 两端对齐只针对英文 */
text-align:justify; /*设置阴影 左右 上下 0-1 color */
text-shadow:0px 0px 1px #fff; /*行高
规律： 当行高=盒子的高度时，文本会垂直居中
*/
line-height: 200px;
text-align: center; } </style> </head>
<body> <div class="box1">
my name is alice
</div> <a href="">天空飘个五个字</a> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> div{
width: 300px;
height: 100px;
/*background-color: red;*/
border: 1px solid red;
/*设置字体大小 px：像素 rem em %*/
font-size: 20px;
font-weight: 700;
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
text-align: center;
text-decoration: none;
color: blue;
cursor: pointer;
/*line-height: 100px;*/
/*1em = 20px*/
/*设置首字缩进 单位：em为准*/
text-indent: 2em;
}
</style>
</head>
<body> <div>
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文本居中</title>
<style type="text/css"> div{
width: 300px;
height: 50px;
border: 1px solid red;
/*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/
line-height: 50px;
font-size: 18px; }
</style>
</head>
<body> <div>
内容国家
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多行文本垂直居中</title>
<style type="text/css"> div{
width: 300px;
height: 175px;
border: 1px solid red;
padding-top: 25px;
/*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/
line-height: 30px;
font-size: 17px; }
</style>
</head>
<body> <div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div> </body>
</html>
3、backgroud背景属性
示例：
body {
background-color: red;
backgraound-image: url(xx.png);
background-size: 300px 300px;
background-repeat: no-repeat;
background-position: center
}
简写：
body {
background: red url(xx.png) no-repeat fixed center/300px 300px;
}
（1）backgrou-color：背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*background-color: rgb(0,0,0);*/
background-color: #f00; /* 颜色表示方法有哪些？
一共有三种：单词、rgb表示法、十六进制表示法 rgb:红色 绿色 蓝色 三原色
光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值，是255，那么就说明是纯色： 黑色：
background-color: rgb(0,0,0);
光学显示器，每个元件都不发光，黑色的。 白色：
background-color: rgb(255,255,255); 颜色可以叠加，比如黄色就是红色和绿色的叠加：
background-color: rgb(255,255,0); 再比如：
background-color: rgb(111,222,123);
就是红、绿、蓝三种颜色的不同比例叠加。 16进制表示法
红色：
background-color: #ff0000;
所有用#开头的值，都是16进制的。
#ff0000：红色
16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的？我们介绍一下
我们现在看一下10进制中的基本数字（一共10个）:
0、1、2、3、4、5、6、7、8、9 16进制中的基本数字（一共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 16进制对应表：
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f 16 10
17 11
18 12
19 13
……
43 2b
……
255 ff 十六进制中，13 这个数字表示什么？
表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。 16进制中的2b等于10进制多少？
答：2*16+11 = 43。 16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175 16进制中的ff等于10进制多少？
答：15*16 + 15 = 255 所以，#ff0000就等于rgb(255,0,0) background-color: #123456;
等价于：
background-color: rgb(18,52,86); 所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。 十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
比如：
background-color:#ff0000;
等价于
background-color:#f00; 比如：
background-color:#112233;
等价于
background-color:#123; 只能上面的方法简化，比如
background-color:#222333;
无法简化！
再比如
background-color:#123123;
无法简化！ 要记住：
#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰 */ }
</style>
</head>
<body> <div> </div> </body>
</html>
backgrou-color:背景颜色
（2）background-repeat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css"> div{
width: 1500px;
height: 1600px;
background-image: url(./bojie.jpg); /*平铺*/
/*background-repeat*/
/*不平铺*/
/*background-repeat: no-repeat;*/
background-repeat: repeat-x;
/*padding: 100px;*/ }
</style>
</head>
<body>
<div> </div> </body>
</html>
（3）background-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css">
*{
padding: 0;
margin: 0;
} div{
width: 1500px;
height: 1600px;
background-image: url(./bojie.jpg);
background-repeat: no-repeat; /*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/
background-position: -100px -100px; }
</style>
</head>
<body>
<div>
波姐波姐
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css"> div{
width: 1500px;
height: 1600px;
border: 1px solid red;
background-image: url(./bojie.jpg);
background-repeat: no-repeat; /*水平方向 left center right
垂直方向 top center bottom
*/
background-position:right bottom; }
</style>
</head>
<body>
<div> </div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图技术</title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
.box1{
width: 48px;
height: 48px;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: 0 -528px;
}
.box2{
width: 48px;
height: 48px;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: 0 -440px; }
</style>
</head>
<body> <div class="box1"></div> <div class="box2"></div>
</body>
</html>
（4）background-attachment：固定背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 1200px;
height: 2000px;
border: 1px solid red;
background: url(./bojie.jpg) no-repeat 0 0 fixed;
/*固定 背景*/
/*background-attachment: fixed;*/
color: white;
}
</style>
</head>
<body>
<div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p> </div> </body>
</html>
9-[CSS]-字体、文本、背景图片的更多相关文章
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
- css如何使背景图片水平居中
CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- css代码添加背景图片常用代码
css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...
- CSS 关于文本 背景 边框整理
文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...
- 用CSS让网页背景图片居中的方法
网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...
- css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
随机推荐
- Hive的介绍及安装
简介 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件 映射为一张数据库表,并提供类 SQL 查询功能. 本质是将 SQL 转换为 MapReduce 程序. Hive组件 ...
- RHEL7系统管理之资源管理
1. CGroup(控制群组).slice(切片).scop.service 控制群组(control group)是linux kernel的一项功能, 该功能允许linux对RHEL7中syste ...
- 连接AWS Ubuntu服务器
1.在AWS上创建了Ubuntu实例后,在实例里点连接.点使用PuTTY连接,下载PuTTY软件. 2.在所有程序里找到PuTTYgen并打开,点Load选择创建实例时的pem文件,点save pri ...
- 发现微信支付bug
第一张银行卡支付金额不足无法付款,选择另一张同样密码的银行卡,居然不用重新输入密码即可直接付款成功!
- 网络编程--Socket(套接字)
网络编程 网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中 有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后 如何可靠高效的进行数据传输.在 ...
- 【教程】【FLEX】#004 反射机制
总结: 目前用到反射的主要有两个方法 1. getDefinitionByName //根据类名,返回对象(反射实例化对象) 2. describeType ...
- 关于第三次寒假作业之C++Calculator项目的情况：
一.仓库地址: object-oriented: 二.作业要求: Calculator: 三.完成本次作业的情况及感受: 刚接触到这个题目的时候,自己就是那丈二的和尚,摸不着头脑,由于自己视频找得比较 ...
- Spring读取资源的接口Resource笔记
这个是Resource接口的继承体系图.这个接口就是一个资源描述符,抽象的描述了类路径下或者是文件系统中的文件.比如一个Resource接口的实现类的一个实例就代表一个的资源,比如用一个Resourc ...
- 【转】 android中的文件操作详解以及内部存储和外部存储
摘要 其实安卓文件的操作和Java在pc环境下的操作并无二致,之所以需要单独讲解是因为安卓系统提供了不同于pc的访问文件系统根路径的api,同时对一个应用的私有文件做了统一的管理.根据我的经验,初学者 ...
- PHP常用功能块_错误和异常处理 — php（32）
一.错误和异常处理 1.1 错误类型和基本的调试方法PHP程序的错误发生一般归属于下列三个领域: 语法错误:语法错误最常见,并且也容易修复.如:代码中遗漏一个分号.这类错误会阻止脚本的执行. 运行时错 ...