您的位置：首页 > Web前端 > CSS

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

2014-12-04 23:15 597 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航