HTML+CSS入门笔记一之HTML+CSS基本思想

最新推荐文章于 2022-04-22 13:15:16 发布

原创最新推荐文章于 2022-04-22 13:15:16 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML+CSS基础 #HTML #HTML入门笔记

Web前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Div+CSS布局的基本思想和技术细节，包括数据与样式的分离、CSS语法及使用方法，并通过实例展示了如何利用CSS滤镜实现图片的黑白显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Div + css 基本思想：

数据和样式分离。Div + css是一种目前比较流行的网页布局技术，div来容纳需要显示的数据，需要显示的数据可能是数据、图表。Css用来指定怎样显示，从而做到数据与显示相分离的效果。原理图如下：

Div元素是用来为html文档内大块的内容提供结构和背景。Css是cascading style sheets（层叠样式表）的缩写，用来表现html或xml等文件式样的计算机语言。

可以这样理解div+css：

Div是用于存放内容的容器

Css适用于指定放在div中的内容如何显示，包括这些内容的位置和外观。

Css使用的基本语法

选择器{

属性1：属性值

属性2：属性值

}

案例1：

<span style="color:#000000;"><html>
<!--css部分可以单写一个文件-->
<link rel = "stylesheet" type = "text/css" href = "demo2.css">
<body>
<!--span元素通常用于存放小块内容-->
<span class = "s1">栏目一</span>
<span class = "s1">栏目二</span>
<span class = "s1">栏目三</span>
<span class = "s1">栏目四</span>
<span class = "s1">栏目五</span>
</body>
</html></span>

/*.s1类选择器*/
.s1{
 color : green;
 font-size : 30px;
 font-style:italic;
 text-decoration : underline;
}
.s2{
 color :yellow;
 font-size : 12px;
}
.s3{
 color :blue;
 font-style:italic;
}
.s4{
 color: green;
 font-weight: bold;
}
.s5{
  color : black;
}

Css滤镜技术：

所有的图片变成黑白色。

案例：

所有图片变成黑白色，当鼠标放上时变正常;

<html>
<head>
<!--如何把css直接嵌入到html文件(内联css)-->
<style type = "text/css">
       a:link img
	   {
       filter:gray;
       }
	   a:hover img
	   {
	   filter:"";
	   }
</style>
</head>
<body>
<a href= "2"> <img src ="me.jpg"></a>
<a href= "2"> <img src ="图片1.jpg"></a>
</body>
</html>