现在的位置: 首页 > 综合 > 正文

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

2014年09月05日 ⁄ 综合 ⁄ 共 5739字 ⁄ 字号小中大 ⁄ 评论关闭

内容介绍
- 初识 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>

【上篇】07-DIV+CSS-选择器深入-通配符选择器-父子选择器-选择器分组
【下篇】01-C语言概述

作者: mourpistots

该日志由 mourpistots 于10年前发表在综合分类下，最后更新于 2014年09月05日.
转载请注明: 06-DIV+CSS-CSS的必要性和基本选择器 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

1. 使用CSS的必要性

1.1 语法

1.2 统一相同元素样式

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

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

1.3 滤镜技术

1) 应用场景

2) CSS的滤镜示例

2. 基本选择器

2.1 种类

2.2 类选择器

1) 语法

2) 示例

2.3 id选择器

1) 语法

2) 示例:

2.4 元素选择器

1) 语法

2) 示例:

2.5 选择器的优先级

3. 涉及到的示例网页

作者: mourpistots

书签

最新文章New

本站推荐

返回首页