网页设计设置文本属性,网页设计怎么添加文字样式

首页 > 实用技巧 > 作者:YD1662024-01-07 04:46:56

属性名:ling-height。用于设置文本的行高。即行与行之间的距离。

行间距=文本高度 上间距 下间距。(上间距=下间距)

行间距调整就是设置的上下间距的高

属性值:px或em。

代码示例:

<head> <style> /* 行间距 */ .lH { line-height: 3em; } </style> </head> <body> <!-- 行间距 --> <p class="lH"> 我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。 我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。 我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。 我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。 我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。 我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。我是段落标签,测试行间距属性。 </p> </body>

运行界面:

网页设计设置文本属性,网页设计怎么添加文字样式(5)

网页设计设置文本属性,网页设计怎么添加文字样式(6)

CSS引入方式

分为三类:行内样式表(行内式)内部样式表(内嵌式)外部样式表(链接式)

位置:直接写在元素的开始标签中。

特点:书写内容少,权重级别高,只能控制一个标签,结构样式混乱。

语法:style=”color: red;”

注意:多个属性之间使用空格分隔。

代码示例:

<p style="color: red;">行内样式表:在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性。</p> <p style="color: red; font-size:28px;">行内样式表:在使用属性的元素开始标签中直接设置属性。如给字体设置红色属性和字体28px。</p>

位置:在head标签下,和title标签并列。样式属性均包含在style标签中。

特点:部分结构与样式相分离,还是在同一html文件上。

语法:

<style> p { color: red; font-size: 28px; } </style>

代码示例:

<head> <title></title> <style> .styleP { color: red; font-size: 32px;; } </style> </head> <body> <!-- 内部样式表 --> <p class="styleP">内部样式表:样式属性写在同一个html文件中的head标签里,和title标签并列。</p> </body>

第一步:创建index.css文件,在文件中输入样式属性,不用任何标签。

第二步:在html文件的head标签中,添加link标签,引入css文件。

第三步:给html文件中需要添加属性的元素添加选择器名称。

特点:结构和样式全局分离,一个css文件可以控制多个html页面。

注意:在css文件中只有样式没有标签,即直接书写标签器和属性,不要写style标签。

代码示例:

第一步:新建index.css文件,设置样式属性。

* { margin: 0; padding: 0; } .linC { font-size: 32px; color: blue; }

第二步:在html文件的head标签中添加link标签引用css文件。

<head> <title>CSS样式引入方式</title> <!-- 外部样式表 --> <link rel="stylesheet" href="./index.css"> </head>

第三步:在标签中调用属性。

<body> <!-- 外部样式表 --> <p class="linC"> 外部样式表:<br> 第一步:新建一个css文件,文件中直接编辑样式属性,不需要添加style标签。<br> 第二步:使用css文件的html文档,应该在其head标签中添加link标签选择css文件的存储位置,<br> 第三步:调用css文件中的样式。 </p> </body>

运行界面:

网页设计设置文本属性,网页设计怎么添加文字样式(7)

以上就是今天学习的内容,明天继续学习CSS的相关内容,今天就到这里了,各位晚安!

上一页12末页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.