CSS初识(三):CSS字体文本相关属性
属性
CSS属性有很多,不过常用的并不多,大概30个左右。请注意区别CSS属性和HTML属性。
按照功能大致分为以下几类:
字体有关属性
font-size: 设置字体大小,单位是px(像素);一些不常用的大小:small medium large x-large……,字体大小默认16px
font-style: 设置字体的样式,是否倾斜,normal正常,italic倾斜,oblique更加倾斜……
font-weight: 设置字体是否加粗,normal正常,bold加粗,lighter更瘦更细……
font-family: 设置字体的格式,设置字体格式,微软雅黑,宋体,黑体……注意:用户会看到什么样的字体,取决于用户的设备上安装的是什么字体,有的字体仅支持某种语言,可以设置多个字体,如果第一个字体没用,那么就用第二个……如果不设置字体,则是默认宋体。
注意:针对中文字体进行设置,需要加引号,针对英文的(单个单词),不需要加引号。如果英文是多个单词,那也需要加引号
font-family可以自定义字体,在style中使用@font-face,比如UI设计师给的字体,或者去网上找字体。
font,这个是集成了上面样式(font-style)、粗细(font-weight)、大小(font-size)、格式(font-family)的一个属性,一般这个比较常用。
注意:样式style和粗细weight,二者可以换位置,也可以不写,但是大小size和格式family必须写,且不能换位置
<style>@font-face{/* 给自定义的字体起一个名字 */font-family: "appleFont";/* 自定义字体的路径 */src: url("font/PingFang\ Medium.ttf");}p{/* 使用这个自定义字体 */font: normal normal 24px "appleFont";}
</style>
<body><p>这是一个尝试</p>
</body>
文本有关属性
text-decoration,overline(上划线),underline(下划线),line-through(删除线),none(文本默认,没有线)。
注意:上中下三条线可以同时使用,这样一段文字三条线都有了。
注意2:超链接 a 下面默认有underline,这时可以使用none来消除掉下划线。
注意3:color改变文字颜色的同时,也会改变线的颜色。
<style>.p1 {text-decoration: overline;}.p2 {text-decoration: line-through;}.p3 {text-decoration: underline;}.p4 {text-decoration: underline overline line-through;}.p5 {text-decoration: line-through;color: red;}
</style>
<body><p class="p1">这是上划线</p><p class="p2">这是下划线</p><p class="p3">这是删除线</p><p class="p4">这是三线全有</p><p class="p5">这是红色删除线</p>
</body>
text-align ,对齐,有right、left、center三种对齐方式,一般情况下用于块级元素。因为行级元素没效果。
对齐操作是针对于这个元素内所有子元素而言的,也就是将可以进行对齐操作的子元素整体对齐。
注意,使用对齐,必须保证有富余空间,比如span就不行,因为span只有其内容大小的空间,这样就没有对齐效果了。
vertical-align: middle;这是竖直居中,只适用于行级元素。
text-indent,文本缩进,可以使用px,还可以使用em等。
经典应用(1):text-indent:2em,就是首行缩进2个字符,em是代表着字体大小的单位,2em就是两个文字的大小。
经典应用(2):text-indent:-99999px,就是向前缩进99999px,这就相当于跑到屏幕外边了。
line-height
主要是对块级元素内的内容来进行行高设置(其实主要是p标签),设置每行的高度。
经典应用1:使用line-height将一行文本竖直居中。
经典应用2:line-height配合vertical-middle可以实现图片竖直居中。前提是line-height高度大于等于图片高度。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}div{background-color: gray;text-align: center;height: 300px;line-height: 300px;}img{vertical-align: middle;height: 200px;}</style> </head> <body><div><img src="img/2017-08-30_122538_03.jpg" alt=""></div> </body> </html>
litter-spacing,每个字符中间的间距。对中英文都有效。
word-spacing,每个单词之间的间隔。只对英文有效。
text-shadow,文本阴影。text-shadow:水平阴影位置 垂直阴影位置 模糊程度 阴影颜色。
text-shadow 中可以有很多个阴影,中间用逗号隔开,每个阴影都有上面的那4个属性值可以写。
注意1:水平阴影位置 和 数值阴影位置可以为负数,这样就有了上下方之分,可以制造凹凸效果
注意2:如果一个shadow后面有多个阴影的话,那么这个阴影是按照从前往后的顺序依次刷出来。
CSS的继承性
继承性就是对父元素设置的一些属性,子元素会继承这些属性。关于字体相关的设置、关于文本相关的设置都有继承性。
经典应用1:给body设置一个字体相关、或者文本相关的属性,子元素会继承。
注意:对于 a 标签来讲,color没法继承,必须对 a 进行单独设置
CSS的层叠性(优先级)
什么是层叠性?
对同一个元素,通过不同途径,设置了多种样式,哪一种样式有作用。
如果一个元素有id、class,那么优先级排序 id > class > 标签。如果一个元素有多种样式设置方案,那就看使用选择器的时候,用到的id、class、标签的数量,id数量多的优先,id一样看class,class数量多的优先,class也一样的话,那就看标签。可以将他们的id的值看作100,class看作10,标签为1,然后根据数量相加,计算大小。
对于不同的CSS引入方式,优先级排序是,行内样式 > 内部样式 = 外部样式,内部和外部优先级相同,代码自上而下执行,下方的样式(之后执行的CSS样式),会覆盖之前的样式,也就是就近原则。
如果使用谷歌浏览器,那么在网页上按F12,会弹出调试窗口(别的浏览器也有类似的功能),在这里可以看到,对于一个元素来说,他的样式分为三块——1、继承父元素的;2、默认样式。3、开发者写的样式。这三块样式的优先级是3>2>1。
CSS初识(三):CSS字体文本相关属性相关推荐
- CSS基础(基础选择器+字体文本相关样式)
文章目录 目录 前言 一.css的语法规则 二.css引入方式 三.基础选择器 四.字体和文本样式 字体样式 文本样式 line-height行高 前言 层叠样式表(Cascading Style S ...
- CSS样式字体与文本相关属性
CSS样式字体与文本相关属性 字体相关属性 基本属性 添加阴影 添加多阴影 微调字体大小 颜色表示 文本相关属性 文本基本属性 文本自动换行 长单词和URL地址换行 CSS3新增服务器字体 字体相关属 ...
- CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
- 【CSS基础】基础选择器+字体文本相关样式
目录 1.CSS基础选择器 1.1 标签选择器 1.2 类选择器 1.3 id选择器 1.4 通配符选择器 1.5 基础选择器总结 2.CSS字体样式 2.1 字体大小 2.2 字体粗细 2.3 字体 ...
- CSS3的字体和文本相关属性
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题.通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电 ...
- java样式是什么_java css样式 css样式的种类 选择器 文本相关样式 背景相关样式 边框 盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签 下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
- 【CSS3】CSS3文本相关属性大全
说明 本文的"文本"相关属性控制的是整段.整个div内文本的显示效果,包括文本文字的缩进.段内文字的对齐方式.文本中空白字符的处理等等,需要掌握. 网页源码 <!DOCTYP ...
- 阿ken的HTML、CSS的学习笔记_文本样式属性(笔记三)
前段时间国庆中秋那会儿学校放八天假 几乎所有人都选择回家或者是出去玩儿 而我选择留在学校这边儿 找一个晚七到早七的兼职去警醒一下浑浑噩噩的自己 整栋宿舍楼就剩下我和我的一个舍友 虽不过十月深秋 却让人 ...
- 前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框
1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性.继承性.优先性 1.1 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题. ...
最新文章
- 完胜BERT!谷歌NLP预训练利器:小模型也有高精度,单个GPU就能训练 | 代码开源...
- ffmpeg解码器优化
- Struts 1 和 Struts 2 的线程安全
- c#winform演练 ktv项目 制作歌曲播放列表
- html目录参数加密,从HTML文件中取出JS加密需要的参数,并调用js内的加密算法
- Axure高保真移动端电商app通用模板、axure高保真移动端教育app通用模板、旅游app通用模板、电商app、教育app、旅游app 、直播、在线教育、旅游、Axure原型、rp原型
- 剑指Offer之把数组排成最小的数
- 如何深入浅出地讲解麦克斯韦方程组
- HDU1166树状数组
- SECS/GEM封装库金南瓜平台(一)简介
- JavaScript分解质因数
- MindSpore: CV.Rescale(rescale,shift)中参数rescale和shift的含义?
- 计算机换色带技巧,安装与更换针式打印机的色带的详细方法(图文教程)
- 解决多线程编程中大并发数等待唤醒的问题
- 基于排序变换混沌置乱算法的图像加密系统
- 什么是脚本语言(python脚本是什么?)
- 人类的心理行为模式(几个心理学实验)
- Android App瘦身新姿势——Android App Bundle
- 使用Arduino UNO以及好盈电调控制无刷电机
- [渝粤教育] 南京信息职业技术学院 模拟电子技术 参考 资料