怎么把css放到html中?

发布网友发布时间：2022-04-23 06:10

共5个回答

懂视网时间：2022-04-06 15:28

在进行页面布局时，必然会用到CSS和HTML，因为HTML是页面的主体内容部分，CSS是页面的表现，通俗的讲，CSS是给HTML进行化妆的。那CSS的样式怎么在HTML中实现呢？这时候就需要在HTML中引入CSS文件，今天就和大家聊聊如何将CSS导入HTML中，有需要的可以参考一下。

将CSS导入HTML的方式有四种，分别是行内式，嵌入式，外部样式。外部样式又分为import导入式，link链接式。

一、行内式，即在HTML标签中直接加上css样式，用style添加。

比如：将div中的字体设置为40px，颜色设为红色。代码如下：

<div style="font-size: 40px;color: red;">今天星期一</div>

效果图：

样式1.jpg

二、嵌入式，即将CSS样式写在<style type="text/css"></style>中，然后将style放在<head></head>之间。

比如：在<style>中写入样式，将div的颜色设为橙色，字体为40px。代码如下：

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 div{font-size: 40px;color: orange;}
 </style>
 </head>
 <body>
 <div>今天星期二</div>
 </body>
</html>

效果图：

样式2.jpg

三、外部样式（外部样式又分为import导入式，link链接式）

外部样式就是把css样式代码写在一个单独的外部文件中，这个外部文件以“.css”为扩展名，然后将其引入需要的HTML中。import导入式和link链接式的引入方法不一样，接下来一一介绍。

1、import导入式，即在<style type="text/css"></style>中用@import的URL引入。

比如：用import导入式将div的字体设为40px,颜色为黄色。代码如下：

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 @import url("css/import.css");
 </style> 
 </head>
 <body>
 <div>今天星期三</div>
 </body>

效果图：

样式3.jpg

2、link链接式，即在<head></head>中添加<link rel="stylesheet" type="text/css" href="css/index.css"/> 调用外部css文件来实现样式效果。

比如：用外部样式link将div的颜色设置为绿色，字体为40px。代码如下：

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/index.css"/> 
 </head>
 <body>
 <div>今天星期三</div>
 </body>
</html>

效果图：

样式44.jpg

总结：

1、行内式这种方式麻烦，查找不方便，也没有体现CSS的优势，因此不推荐使用。
2、嵌入式对于大的页面不推荐使用，对于小的样式少的网页可以使用。
3、同样是外部样式，import导入式和link链接式的区别在哪里？使用link链接式，会在加载页面主体内容之前加载CSS样式文件，这样用户看到的网页一开始就是带有样式效果的。如果使用import导入式，会在整个页面加载完成后再加载CSS样式文件，所以有时候会出现显示无样式情况，闪烁一下后再出现设置样式后的效果。因此从用户体验来说，还是建议使用link链接式来引入CSS样式。

以上介绍了4种方式将CSS导入到HTML中，具体用什么方式，还需要看情况决定，但是用的最多的还是link链接式，正在学习的小伙伴可以多去练习尝试，希望对你有帮助！

热心网友时间：2022-04-06 12:36

有3种方式可以将css定义的样式加到HTML里。
1.外联
在HTML里加一个超连结连到外在的CSS文档，这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开，只需要在一个CSS文档内定义好网页的外观风格，所有参考连结到此 CSS 档的网页，便会依照指示，反应出定义好的风格。
它的写法是： <HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL="stylesheet" HREF="http://www.xyz.com/xyz.css" TYPE="text/css">
</HEAD>
2. 嵌入
在 HTML的<HEAD></HEAD>标签间，加一段CSS定义
这个方法适用于指定某个网页，除了展现外在的 CSS 档定义好的网页风格外，同时还要展现本身HTML内定义的CSS样式。
如果内在定义的CSS定义与外在连结的CSS定义相冲突的话，网页的样式将以内在定义的CSS定义为主。
它的写法是： <HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
div{
font: 12pt
font: 16pt
font-weight: bold;
color: green
}
</STYLE>
</HEAD>
<BODY>
<div>内容</div>
</BODY>
</HTML>
3.内联
在HTML的字里行间中加入CSS定义。
这个方法适用于指定网页内的某一小段的样式。
如果内联CSS定义与<HEAD>内在定义的CSS或外在连结的CSS定义相冲突的话最终的样式将以内联的CSS定义为主。
它的写法是： <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P STYLE="color: red">内容 </P>
</BODY>
</HTML>
上面的3种CSS引入方式可以同时并用，也可以单一或成双地使用。如果各CSS间的定义相冲突，则嵌入定义的CSS会盖过外联连结的CSS，内联的CSS会盖过嵌入定义的CSS。

热心网友时间：2022-04-06 13:54

1、使用链接式

<link href="style.css" rel="stylesheet" type="text/css" />

2、使用导入式

<style type="text/css">

@import "style.css"

</style>

热心网友时间：2022-04-06 15:29

热心网友时间：2022-04-06 17:20

你发的图片效果不是挺好吗？
还想咋做追问

这才是我做出来的 ><

追答

哦哦，你想要图片上的效果是吧，只能告诉你，，

十分钟的活，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>竖版菜单</title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
list-style-type:none;
list-style-position:outside;
}
a {
color:#fff;
text-decoration: none;
}
#menu {
width:100%;
height:50px;
line-height:50px;
background:#286a46;
}
#menu ul {
width:1000px;
margin:0 auto;
}
#menu li {
float:left;
padding:0 10px 0 10px;
color:#fff;
}
#menu li.on {
background:#2e9057;
}
</style>
</head>
<body>
<div id="menu">
  <ul>
    <li class="on"><a href="#">首页</a></li>
    <li><a href="#">TED</a></li>
    <li><a href="#">国际名校公开课</a></li>
    <li><a href="#">中国大学视频公开课</a></li>
    <li><a href="#">赏课</a></li>
    <li><a href="#">公开课策划</a></li>
    <li><a href="#">可汗学院</a></li>
    <li><a href="#">态度公开课</a></li>
  </ul>
</div>
</body>
</html>

只用了七分钟来修改答案，，你要的效果不就是如此吗？