06-DIV+CSS-CSS的必要性和基本选择器

末蓝、 2022-09-18 01:59 61阅读 0赞

内容介绍  
\- 初识 CSS  
\- 块级元素 和 行级元素  
\- CSS核心内容  
\- 标准流  
\- 盒子模型  
\- 浮动  
\- 定位  
\- CSS综合案例  
\- 盒子模型经典案例  
\- 放sohu首页布局

# 1. 使用CSS的必要性 #

##  1.1 语法 ##

<元素名 style="属性名1:属性值1;属性名2:属性值2;"> 
 
注: 
① 元素名: 为任意元素 
② 属性值与属性值请参考 w3cSchool 文档

##  1.2 统一相同元素样式 ##

###  1) 使用span时为每个元素指定style的值 ###

![SouthEast][]

栏目一
 
 栏目二
 
 栏目三
 
 栏目四
 
 栏目五

###  2) 使用CSS统一相同元素的样式风格 ###

![SouthEast 1][]

##  1.3 滤镜技术 ##

###  1) 应用场景 ###

汶川大地震后,默哀的那几天,所有网站的图片都变成黑白了.  
即 将彩色图片变黑白图片.

###  2) CSS的滤镜示例 ###

![SouthEast 2][]

<!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) 示例 ###

##  2.3 id选择器 ##

选择一个

###  1) 语法 ###

定义: 
 
\#选择器名 \{ 
属性名:属性值; 
... ... 
\} 
 
引用: 
 
<元素名 id="选择器名">

###  2) 示例: ###

##  2.4 元素选择器  ##

选择所有该类型的元素

###  1) 语法 ###

定义: 
 
元素名 \{ 
属性名:属性值; 
... ... 
\} 
 
引用: 
 
<元素名>

###  2) 示例: ###

注:  
a:link \{color:\#FF0000;\} /\* 未被访问的链接 \*/  
a:visited \{color:\#00FF00;\} /\* 已被访问的链接 \*/  
a:hover \{color:\#FF00FF;\} /\* 鼠标指针移动到链接上 \*/  
a:active \{color:\#0000FF;\} /\* 正在被点击的链接 \*/

##  2.5 选择器的优先级  ##

ID > class > element

# 3. 涉及到的示例网页 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>css1.html</title>
 
 <meta http-equiv="keywords" content="value1,value2,...">
 
 <meta http-equiv="content-type" content="text/html;charset=UTF-8">
 
 </head>
 
 <style type="text/css">
 
 .spanStyle {
 font-size: 20px; /*字体大小*/
 color: red; /*字体颜色*/
 font-weight: bold; /*字体粗细*/
 font-style: italic; /*文本,正常normal,倾斜italic*/
 text-decoration: underline; /*给文本加下划线*/
 }
 
 </style>
 
 <body>
 
 栏目一
 
 栏目二
 
 栏目三
 
 栏目四
 
 栏目五
 
 <hr>
 栏目一 
 栏目二 
 栏目三 
 栏目四 
 栏目五 
 
 </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>
 
 新闻一
 新闻二
 新闻三
 
 <hr/>
 
 这是一则非常重要的新闻
 
 <hr/>
 <a href="#">百度</a>
 <a href="#">新浪</a>
 <a href="#">搜狐</a>
 <a href="#">腾讯</a>
 
 </body>
 </html>

[SouthEast]: /images/20220828/6fb1163ecfbf47fba3675b2380c33bba.png
[SouthEast 1]: /images/20220828/c41522d234d847378256a1e1aae725aa.png
[SouthEast 2]: /images/20220828/0f63bb53a9974a37b5447a4adac52847.png