CSS学习笔记之在HTML中导入CSS的三种方式

最新推荐文章于 2024-06-05 16:49:46 发布

秋忆夏伤

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量617

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52471237

版权

<!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>
        <title>在html中写入CSS代码的三种方式</title>
    	
		<!-- CSS：Cascading Style Sheet，“层叠样式表”的意思。
			CSS能让网页制作者有效的定制、改善网页的效果。CSS是对HTML的补充。 
			CSS实现了网页内容和页面效果的彻底分离。
			
			共有三种方式把CSS写入HTML代码中：
			（1）、外部样式表：在项目里添加一个“样式表(.CSS文件)”，然后关联到本项目中; 
			（2）、嵌入样式表：在head标签内设置元素的样式;
			（3）、内联样式表：在标签内设置元素的样式。优点：比较灵活，想给谁设置就给谁设置。
				缺点：如果多个标签需要同一种设置，就需要写多行重复的代码。
				
			CSS的语法有三部分构成：选择器、属性、值。
		-->
		
        <!-- 1、导入外部样式表 -->
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

        <!-- 外部样式表和嵌入样式表，谁放在下面，最终显示效果就是谁的。-->

        <!-- 2、嵌入样式表（type属性：声明样式为CSS） -->
        <style type="text/css">  
            p
            {
                background-color:Fuchsia;
                font-size:x-large;
            }     
        </style>

    </head>

    <body>
        <!-- 3、内联样式表(优先级最高) -->
        <p style="background-color:Blue;font-size:xx-large">我是标题1</p> 
        <p>我是标题2</p>
        <p>我是标题3</p>
        <p>我是标题4</p>
        <p>我是标题5</p>
        <p>我是标题6</p>
    </body>
</html>

CSS代码：

p 
{
    background-color:Green;
    font-size:large;
}

页面效果：

秋忆夏伤

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记之在HTML中导入CSS的三种方式

在html中写入CSS代码的三种方式 <!-- CSS：Cascading Style Sheet，“层叠样式表”的意思。 CSS能让网页制作者有效的定制、改善网页的效果。CSS是对HTML的补充。 CSS实现了网页内容和页面效果的彻底分离。共有三种方式把CSS写入HTML代码中：（1）、外部样式表：在项目里添加一个“样式表(.CSS文件)”，
复制链接

扫一扫