搬运自己的html学习笔记2-css的入门

最新推荐文章于 2024-08-14 12:22:11 发布

冯子玉

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量255

点赞数

分类专栏：前端文章标签： html web页面 css 选择器

本文链接：https://blog.csdn.net/qq_35488769/article/details/71106089

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css:层叠样式表,用于渲染html文档的显示

css与html的整合,有内联和外部导入两种方法

新建一个.css文件

#div3{
background-color:#0ff;
}

在html页面中可以通过如右标签导入<div id="div3">天佑中华</div>

在html页面中创建如右下标签

在html页面中可以通过如右标签导入<div id = "div2">天佑中华</div>

也可以直接在标签中设置style属性如右<div style = "background-color:brown">天佑中华-内联</div>

如下html页面在浏览器中显示效果如图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2{
background-color:black
}
</style>
<link rel="stylesheet" href="../css/1.css" type = "text/css"/>
</head>
<body>
<div>天佑中华</div>

<div style = "background-color:brown">天佑中华-内联</div>

<div id = "div2">天佑中华</div>

<div id="div3">天佑中华</div>
</body>
</html>

css选择器:这里就直接引入自己的一篇文章

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/外部导入测试用例.css" type="text/css"/>
<style>
#test1{
background-color:olive;
font-size:1cm;
}
.classtest{
background-color:blue;
font-size:3cm;
}
span{
background-color:yellow;
font-size:1cm;
}
a[a = "atest"]{
font-size: 6cm;
}
div font{
background-color: #808000;
}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

</style>
</head>
<body>
<font id="test1">内连方式导入测试用例</font>
<hr />
<font id="test2">外联方式导入测试用例</font>
<hr />
<div id="test3" class="classtest">class选择器测试用例</div>
<hr />
<p>
<span>元素选择器测试用例1</span>
</p>
<p>
<span>元素选择器测试用例2</span>
</p>
<a href="#" a = "atest">属性选择器测试用例</a>
<div>
<font>后代选择器测试用例</font>
</div>
</body>
</html>

测试用.css文件

#test2{
background-color:#FF0000;
font-size:3cm;
}

冯子玉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搬运自己的html学习笔记2-css的入门

css:层叠样式表,用于渲染html文档的显示css与html的整合,有内联和外部导入两种方法新建一个.css文件#div3{background-color:#0ff;}在html页面中可以通过如右标签导入&lt;div id="div3"&gt;天佑中华&lt;/div&gt;在html页面中创建如右下标签&lt;style&gt;#div2{backgroun...
复制链接

扫一扫

专栏目录