06-DIV+CSS-CSS的必要性和基本选择器
内容介绍
- 初识 CSS
- 块级元素 和 行级元素
- CSS核心内容
- 标准流
- 盒子模型
- 浮动
- 定位
- CSS综合案例
- 盒子模型经典案例
- 放sohu首页布局
<元素名 style="属性名1:属性值1;属性名2:属性值2;">
注:
① 元素名: 为任意元素
② 属性值与属性值请参考 w3cSchool 文档
汶川大地震后,默哀的那几天,所有网站的图片都变成黑白了.
即 将彩色图片变黑白图片.
① 类选择器, 又叫class选择器
② id选择器
③ 元素选择器
选择一类
定义:
.类选择器名 {
属性名:属性值;
... ...
}
引用:
选择一个
定义:
#选择器名 {
属性名:属性值;
... ...
}
引用:
<元素名 id="选择器名">
选择所有该类型的元素
定义:
元素名 {
属性名:属性值;
... ...
}
引用:
<元素名>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
- 初识 CSS
- 块级元素 和 行级元素
- CSS核心内容
- 标准流
- 盒子模型
- 浮动
- 定位
- CSS综合案例
- 盒子模型经典案例
- 放sohu首页布局
1. 使用CSS的必要性
1.1 语法
<元素名 style="属性名1:属性值1;属性名2:属性值2;">
注:
① 元素名: 为任意元素
② 属性值与属性值请参考 w3cSchool 文档
1.2 统一相同元素样式
1) 使用span时为每个元素指定style的值
<span style="font-size:30px;color:blue;">栏目一</span>
<br>
<span style="font-size:10px;color:red;font-style:italic;">栏目二</span>
<br>
<span style="font-size:40px;color:pink;font-weight: bold;">栏目三</span>
<br>
<span style="font-size:20px;color:green;font-weight:lighter;">栏目四</span>
<br>
<span>栏目五</span>
2) 使用CSS统一相同元素的样式风格
<style type="text/css">
.spanStyle {
font-size: 20px; /*字体大小*/
color: red; /*字体颜色*/
font-weight: bold; /*字体粗细*/
font-style: italic; /*文本,正常normal,倾斜italic*/
text-decoration: underline; /*给文本加下划线*/
}
</style>
<body>
<span class="spanStyle">栏目一</span><br>
<span class="spanStyle">栏目二</span><br>
<span class="spanStyle">栏目三</span><br>
<span class="spanStyle">栏目四</span><br>
<span class="spanStyle">栏目五</span><br>
</body>
1.3 滤镜技术
1) 应用场景
汶川大地震后,默哀的那几天,所有网站的图片都变成黑白了.
即 将彩色图片变黑白图片.
2) CSS的滤镜示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css2.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*使用滤镜 将彩图变为黑白*/
.imgStyle {
filter: gray; /*注:此种滤镜方式仅IE支持*/
}
a:link img {
filter: gray;
}
/*当鼠标移动到该图片上时变为彩色*/
a:hover img {
filter: "";
}
</style>
</head>
<body>
<img src="1.jpg" class="imgStyle"/>
<img src="2.jpg" class="imgStyle"/>
<a href="#"><img src="3.jpg" /></a>
</body>
</html>
2. 基本选择器
2.1 种类
① 类选择器, 又叫class选择器
② id选择器
③ 元素选择器
2.2 类选择器
选择一类
1) 语法
定义:
.类选择器名 {
属性名:属性值;
... ...
}
引用:
<元素名 class="类选择器名">
注意:
可以通过 " 元素名.类选择器名 " 的方式限定类选择器的使用范围
如, p.cls{ color:red; } 类选择器".cls"只作用于 元素p
2) 示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css3.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*类选择器*/
.newsStyle {
font-size: 20px;
background: blue;
}
</style>
</head>
<body>
<span class="newsStyle">新闻一</span>
<span class="newsStyle">新闻二</span>
<span class="newsStyle">新闻三</span>
</body>
</html>
2.3 id选择器
选择一个
1) 语法
定义:
#选择器名 {
属性名:属性值;
... ...
}
引用:
<元素名 id="选择器名">
2) 示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css3.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*id选择器*/
#newsId {
font-size: 50px;
background: silver;
}
</style>
</head>
<body>
<span id="newsId">这是一则非常重要的新闻</span>
</body>
</html>
2.4 元素选择器
选择所有该类型的元素
1) 语法
定义:
元素名 {
属性名:属性值;
... ...
}
引用:
<元素名>
2) 示例:
注:a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css3.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*元素选择器*/
a {
color: black; /*字体黑色*/
font-size: 24px; /*字体大小24px*/
text-decoration: none; /*不出现下划线*/
}
/*当鼠标移动到超链接上时,自动出现下划线并变大,移开后又消失*/
a:hover {
text-decoration: underline;
font-size: 34px;
}
/*点击以后超链接变为红色*/
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="#">百度</a>
<a href="#">新浪</a>
<a href="#">搜狐</a>
<a href="#">腾讯</a>
</body>
</html>
2.5 选择器的优先级
ID > class > element
3. 涉及到的示例网页
<!-- 文档类型,用于指定DTD(说明当前这个HTML版本) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<!-- 给搜索引擎看的 -->
<meta http-equiv="keywords" content="value1,value2,...">
<!-- 告诉浏览器以什么编码来解析该HTML文件 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!--引入CSS文件
<link rel="stylesheet" type="text/css" href="">
-->
</head>
<style type="text/css">
.spanStyle {
font-size: 20px; /*字体大小*/
color: red; /*字体颜色*/
font-weight: bold; /*字体粗细*/
font-style: italic; /*文本,正常normal,倾斜italic*/
text-decoration: underline; /*给文本加下划线*/
}
</style>
<body>
<span style="font-size:30px;color:blue;">栏目一</span>
<br>
<span style="font-size:10px;color:red;font-style:italic;">栏目二</span>
<br>
<span style="font-size:40px;color:pink;font-weight: bold;">栏目三</span>
<br>
<span style="font-size:20px;color:green;font-weight:lighter;">栏目四</span>
<br>
<span>栏目五</span>
<hr>
<span class="spanStyle">栏目一</span><br>
<span class="spanStyle">栏目二</span><br>
<span class="spanStyle">栏目三</span><br>
<span class="spanStyle">栏目四</span><br>
<span class="spanStyle">栏目五</span><br>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css2.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*使用滤镜 将彩图变为黑白*/
.imgStyle {
filter: gray; /*注:此种滤镜方式仅IE支持*/
}
a:link img {
filter: gray;
}
/*当鼠标移动到该图片上时变为彩色*/
a:hover img {
filter: "";
}
</style>
</head>
<body>
<img src="1.jpg" class="imgStyle"/>
<img src="2.jpg" class="imgStyle"/>
<a href="#"><img src="3.jpg" /></a>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css3.html</title>
<meta http-equiv="keywords" content="value1,value2,...">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
/*类选择器*/
.newsStyle {
font-size: 20px;
background: blue;
}
/*id选择器*/
#newsId {
font-size: 50px;
background: silver;
}
/*元素选择器*/
a {
color: black; /*字体黑色*/
font-size: 24px; /*字体大小24px*/
text-decoration: none; /*不出现下划线*/
}
/*当鼠标移动到超链接上时,自动出现下划线并变大,移开后又消失*/
a:hover {
text-decoration: underline;
font-size: 34px;
}
/*点击以后超链接变为红色*/
a:visited {
color: red;
}
</style>
</head>
<body>
<span class="newsStyle">新闻一</span>
<span class="newsStyle">新闻二</span>
<span class="newsStyle">新闻三</span>
<br/><hr/>
<span id="newsId">这是一则非常重要的新闻</span>
<br/><hr/>
<a href="#">百度</a>
<a href="#">新浪</a>
<a href="#">搜狐</a>
<a href="#">腾讯</a>
</body>
</html>