CSS字体和文本样式详细说明
学习导航
1.css中的长度和颜色
2.css中的文本属性
3.css中的文本属性
1.文本样式属性
字体系列字体属性
功能:使用什么字体来显示元素中的文本?
语法:font-family:[font1],[font2],[...];
注意:包含空字体名称和汉字,用英文引号(")括起来;多种字体用英文逗号分隔;嵌套的引号,外面用双引号,里面用单引号。
字体大小文本大小
角色:元素中的文本大小
语法:font-size:绝对单一单位,相对单位。
颜色文本颜色
语法:颜色名称十六进制RGB
字体粗细文本粗细
语法:font-weight:normalnormalboldboldboldboldlightthin100-900
注意:默认值:正常400相当于正常,700相当于粗体。
字体样式文本样式
角色:样式化元素中的文本。
语法:字体样式:正常正常显示斜体文本斜体倾斜文本斜体(基本不使用)
字体变体字体变形
角色:将元素中的文本设置为小型大写字母。
语法:font-variant:normalnormaldisplaysmall-caps将英文大写和小写字母调整到相同的宽度。
字体属性缩写
语法:font:font-stylefont-variant字体粗细字体大小/行高字体系列;
注意:值之间用空分隔,所以要注意书写顺序。
2.CSS文本样式
文本对齐
函数:设置元素中文本的水平对齐方式。
语法:tex-align:leftleftalign右对齐右对齐居中对齐两端对齐
注意:该属性对设置块级元素有效。
行高
功能:设置元素中中文线的高度。
语法:line-height:长度值百分比
注意:一行文字的高度。行高是指一行文本的基线之间的距离。
文本基线
注意:基线不是汉字的下缘,看图片就明白了。
行高和行距
行高:从基线到基线的距离
行距:从底线到顶线的距离。
注:看图自己理解。
行框和行内框
注:看图自己理解。
垂直对齐
作用:设置元素内容的垂直模式。
语法:vertical-align:baselinesubsupertoptext-topmiddlebottomtext-bottom长度百分比
注:看图自己理解。
文本缩进首行缩进
3.文本样式属性
文本转换:资本化大写字母大写大写字母小写小写不正常
正文-装饰:下划线下划线划线直通线路删除行无正常
综合实践案例
如果觉得有用,记得在下面点赞、关注并留言,我会定期奉上更多惊喜。你的异常支持是我继续努力的动力,那又怎样?
分享学习心得,学习笔记,笔试试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等。每天在学习过程中总结出来的。希望你能以学习为目的,每天看一篇文章,了解一下身边的技术。和有梦想的人一起成长!
html字体颜色楷体怎么设置?
我们可以用font-family来设置HTML网页字体的类型,比如这里我设置为“华文楷体”。
html如何更换列表字体?
font-family属性应该设置几个字体名称作为一种后备机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
注意:如果字体系列的名称超过一个字,它必须用引号,如FontFamily:宋体。
cssfont-style属性
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值:
正常-正常显示文本
斜体-以斜体字显示的文字
倾斜的文字-文字向一边倾斜(和斜体非常类似,但不太支持。
htmlform字体大小怎么调整?
htmlform字体大小可通过定义一个表单字体css样式来调整,CSS属性是font-size,属性值可以是任意的数字大小加px单位,下面用16px做例子,.fontform{font-size:16px;}。form直接套用该样式,通过样式来调整表单字体大小。
cssfont属性设置字体顺序?
对font的定义参数必须按照如下的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值:
font:font-style||font-variant||font-weight||font-size||line-height||font-family
例子:p{font:italicsmall-caps60012pts/18pts宋体;}
css外部样式表怎么写?
1、首先我们我们新建一个记事本,并将记事本的名字改为“引入外部css文件和外部js文件.html”,并回车键确定,以使文件转化为浏览器可以打开的html网页文件。
2、我们编写一个html5的声明标签—!DOCTYPEhtml>,以使浏览器能认识到我们的文档是一个html5的文件,这样就可以快速的正确解读,以提高浏览的体验。
3、我们写一个title>的标签,将网页的题目写入进去,让网页的标题显示为“引入外部css文件和外部js文件”。
4、我们用meta>标签设置字符的编码格式为:UTF-8,以使浏览器能够正确的显示我们的网页。
5、我们写一个body>标签,用来包含网页的主体部分。
6、我们写几个标签以便在外部css文件样式表中,为其设置样式。
7、我们新建一个css文件,把txt的文件后缀名改为css即可,之后打开就可以写入css代码了。
8、我们用标签选择器为p>标签、p>标签和span>标签的内容设置样式。
9、我们使用,link>标签将我们编写的css文件样式表文件其引入到我们当前的html文件中来。
10、我们鼠标右击在弹出的下拉菜单中,我们选择“在浏览器中打开”这一项。
11、我们看到我们编写的样式被应用到了标签中文字上,说明我们的css外部样式表文件引入成功。