怎样将下面这段代码中的css样式直接写在HTML中？
<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
@media all and (min-width:1031px) {
.thumbnail {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.thumbnail:hover {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.works-hex .thumbnail:hover, .gallery-hex .thumbnail:hover {
width: 110%;
margin: 0 0 0 -5%;
}
.works .thumbnail, .gallery .thumbnail {
-webkit-filter: grayscale(1) sepia(0.03);
}
.works .thumbnail:hover , .gallery .thumbnail:hover {
-webkit-filter: grayscale(0) sepia(0);
}
}
</style>
</head>
<body>
<section class="works-hex">
<a href="gallery-hex.html" class="category category-1">
<div class="wrapper"><!--A helper to keep the hexagon's aspect ratio-->
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
<img class="thumbnail" src="img/01.jpg" alt="thumbnail">
</div><!--hexagon-in2-->
</div><!--hexagon-in1-->
</div><!--hexagon-->
</div><!--wrapper-->
<div class="category-name"><h2 class="works-font">Logos</h2></div>
</a><!--category-1-->
</body>
</html> 展开
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
@media all and (min-width:1031px) {
.thumbnail {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.thumbnail:hover {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.works-hex .thumbnail:hover, .gallery-hex .thumbnail:hover {
width: 110%;
margin: 0 0 0 -5%;
}
.works .thumbnail, .gallery .thumbnail {
-webkit-filter: grayscale(1) sepia(0.03);
}
.works .thumbnail:hover , .gallery .thumbnail:hover {
-webkit-filter: grayscale(0) sepia(0);
}
}
</style>
</head>
<body>
<section class="works-hex">
<a href="gallery-hex.html" class="category category-1">
<div class="wrapper"><!--A helper to keep the hexagon's aspect ratio-->
<div class="hexagon">
<div class="hexagon-in1">
<div class="hexagon-in2">
<img class="thumbnail" src="img/01.jpg" alt="thumbnail">
</div><!--hexagon-in2-->
</div><!--hexagon-in1-->
</div><!--hexagon-->
</div><!--wrapper-->
<div class="category-name"><h2 class="works-font">Logos</h2></div>
</a><!--category-1-->
</body>
</html> 展开
4个回答
展开全部
1、首先可以直接把css代码写在现有的HTML标签元素的开始标签里面，并且css样式代码要写在style=""双引号中才可以，如：<p style="color:red">这里文字是红色。</p>。
2、如果想让HTML标签和css样式区分开来，可以采取将css样式代码写在<style type="text/css"></style>标签之间，并且这里的<style></style>可以写在<head></head>标签之间或者<body></body>标签之间，效果都是一样的。
3、以上两种HTML和css的结合都是在同个页面，代码量多的情况下就不好区分了，这时可以创建一个外部css样式文件。右键点击桌面先创建一个记事本文档，然后将文档的扩展名改为“.css”。将该css样式文件与HTML放在同个磁盘中以便调用。
4、将css样式文件创建好后，使用Sublime编辑器打开css样式文件，在文件里面编写相应的css样式。
5、准备好这个css样式文件后，回到HTML文件，在<head></head>标签内使用<link>标签将css样式文件链接到HTML文件内，就完成了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你好 css样式中的每个class都是对应 html代码中class="" 这个值的 你可以根据css文件的clss 在html中找到对应的 在对应的元素中加上 style=" "这里面加上对应的css中的样式代码 祝你学习进步 谢谢
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
@media all and (min-width:1031px) {}z这个东西不要就可以了！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在html中head标签里 加上<style ></style>
然后把css代码放进这对标签里就可以了
然后把css代码放进这对标签里就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
