ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

day5——使用CSS美化网页

2021-09-19 14:33:54  阅读:161  来源: 互联网

标签:行内 网页 内嵌式 day5 语法 样式表 CSS 属性


1.CSS规则

选择器{属性1:属性值;属性2:属性值2;属性3:属性值3;}

例如:h2{font-size:20px;color:red;}

2.引入CSS样式表

(1)行内式

语法:<标记名 stayle="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>

【demo1】行内式基本语法练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS行内式</title>
</head>

<body>
	<h2 style="font-size:20ox;color:red;">使用CSS行内式修饰二级标题的字体大小和颜色</h2>
</body>
</html>

图1 行内式

 (2)内嵌式:写在<head></head>之中,<title>之后

语法:

        <head>

        <style type="text/css">

                选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

        </style>

        <head>

【demo2】内嵌式基本语法的练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用CSS内嵌式</title>
<style type="text/css">
h2{text-align:center}
p{font-size:16px;color:red;text-decoration:underline;}
</style>
</head>

<body>
	<h2>使用CSS内嵌式</h2>
    <p>使用style标记可定义内嵌式CSS样式表,style标记一般位于head头部标记中,title标记之后。</p>
</body>
</html>

图2 内嵌式

 (3)链入式:也放在头部标记中

语法:

        <head>

        <link href="CSS文件路径" type="text/css" rel="stylesheet"/>

        </head>

其中,href:定义外部链接文件的URL。

           type:定义外部链接文件的类型,指定为“text/css”,表示外部文件是CSS样式表。

           rel:定义当前文档与外部链接文件之间的关系,指定为“stylesheet”

标签:行内,网页,内嵌式,day5,语法,样式表,CSS,属性
来源: https://blog.csdn.net/jumao555/article/details/120378934

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有