`
java风
  • 浏览: 57361 次
  • 来自: 北京
社区版块
存档分类
最新评论
  • 泛泛evil: 总结的很好,谢谢分享
    JavaScript
  • wanxkl: 哇!总结的太好了。。凤哥哥,你好强大啊。。请问您跟凤姐什么关系 ...
    css应用

css应用

    博客分类:
  • java
css 
阅读更多

CSS

本章目标

1CSS的定义、优势

2css的基本语法

3、引入css的方式

4css的选择器

重点与难点

1、 Css的引用方式和选择器

要讲的内容

1. 基本的语法 

选择器的名称{

属性名:属性值(有些情况要加上引号);

属性名:属性值(有些情况要加上引号);

}

比如 标记选择器的语法: 

div{

color:red;

font-size:20px;

}

2. 三种选择器的命名方式,引用方式以及适用的范围

a) 标记选择器  

命名方式: 

  tagname{

color:red;

font-size:20px;

}

Tagname指的是已有标签的名称 所以该选择器只能采用已有标签作为选择器的名称

适用范围:页面中所有该标签的元素都适用  页面中的标签不需要引用即可实现效果

b) 类型选择器

命名方式: 

  .anyname{

color:red;

font-size:20px;

}

Anyname指的是任意的名称 不受命名的限制

适用范围:页面中某些class属性值等于该选择器的名称的元素起作用  适用于单个的元素

只需在需要用到该选择器的元素加上class属性使其值等于该名称即可  可以在页面中多次使用同一个类型选择器

c)  ID选择器

命名方式

#anyname{

color:red;

font-size:20px;

}

其中anyname可以是任意的名称

适用范围:页面中的id属性值为该选择器名称的元素起作用 使用于单个的元素

注意:与类型选择器的区别 

1. 定义和引用方式不同

2. 类型选择器可以在页面中重复使用 而id选择器在页面中只使用一次

3. 引用css的三种方式

1. 第一种引用方式 定义内部样式块对象

head中写<style type="text/css"></style> 然后再改style标签中写css的代码

2. 内联定义

在制定的标签的style属性直接写该标签的css的样式

比如 <h3 style="color: orange;font-size: 40px">专题 扫描用户硬盘文件 股票1日缩水百亿 </h3>

        3.引入外部css文件  真正意义上实现表现形式和表现内容完全相分离 推荐使用的方式。

如何将CSS样式加入网页:{

1、 定义内部样式块对象;<style type=text/css>……</style>

2、 内联定义;<h1 style=font-size:20px;color:blue>Hello</h1>

3、 链入外部样式文件。<link rel=stylesheet href=03.css type=text/css>

   例如:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>firstcss.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<!-- css引用的第一种方式  定义内部样式快对象 -->

<style type="text/css">

input {

width: 170px;

height: 25px;

color: red;

}

</style>

<!-- css的第三种引用方式  引入外部css文件的形式  -->

<link rel="stylesheet" type="text/css" href="../css/first.css">

  </head>

  

  <body>

   <form action="testform.html" method="get">

<table align="center">

<tr>

<td>

邮箱 :

</td>

<td>

<input type="text" name="email"/>

</td>

</tr>

<tr>

<td>

密码 :

</td>

<td>

<input type="password" name="pwd"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<!-- css的第二种引用方式 内联定义  在 需要改变样式的元素 的style属性中进行编写 -->

<input type="submit" value="登录" style="width: 85px;height: 35px;color: blue"/> 

</td>

</tr>

</table>

</form>

  </body>

</html>

}

选择器:{

   <!-- css的第一种选择器 标记选择器  要选取已有标签作为该选择器的名称{}

     使用方式:无需引用

     适用范围:对于页面中所有的该选择器对应的标签都起作用

    

css的第二种选择器 类型选择器  定义的语法:.任意的名称 {}

使用方式:需要用到类型选择器的元素的class属性值等于该选择器的名称即可

适用范围:对于页面中所有的class属性等于该名称的元素都起作用  可以重复使用

css的第三种选择器  ID选择器  定义的语法  #任意的名称 {}

使用方式:需要使用到id选择器的元素的id属性值等于该选择器的名称即可

适用范围:对于页面中所有的id属性等于该名称的元素都起作用 但是由于id是代表该元素在页面的唯一标示 所有id选择器使用只建议使用一次

通常情况下id选择器 用类型选择器代替

     -->

<style type="text/css">

h1{

color: red;

font-size: 50px;

font-weight: lighter;

}

h2{

color: green;

font-size: 25px;

}

div { 

text-align : right;

layout-flow:vertical-ideographic;

color: orange;

font-size: 20px;

font-weight: bold;

background-image: url("../images/555.jpg"); 

    }

    input {

     height: 25px;

     width: 170px;

    }

    /*

     * 类型选择器

     */

    .first{

     color: blue;

     font-size: 100px;

    }

    /*

     * ID选择器

     */

    #second{

     color: olive;

     font-size: 50px;

    }

</style>

}

下拉列表分组:{

  <input type="button" value="注册新用户" class="but"/>

   <select name="question">

   <optgroup label="姓名">

   <option value="001">您的姓名?</option>

   <option value="002">您母亲的姓名?</option>

   <option value="003">您父亲的姓名?</option>

   </optgroup>

   <optgroup label="生日">

   <option value="001">您的生日?</option>

   <option value="002">您母亲的生日?</option>

   <option value="003">您父亲的生日?</option>

   </optgroup>

   <optgroup label="职业">

   <option value="001">您的职业?</option>

   <option value="002">您母亲的职业?</option>

   <option value="003">您父亲的职业?</option>

   </optgroup>

}

级联菜单:{

例如:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>testcity.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">

function createSecondLevel(obj){

var city = document.getElementById("city");

city.options.length = 1;//清空option的方式

var option1;

var option2;

var option3;

var option4;

if(obj == "001"){

option1 = new Option("石家庄市","001001");//创建option的方式

option2 = new Option("保定市","001002");

option3 = new Option("沧州市","001003");

option4 = new Option("承德市","001004");

}

if(obj == "002"){

option1 = new Option("郑州市","002001");

option2 = new Option("洛阳市","002002");

option3 = new Option("开封市","002003");

option4 = new Option("南阳市","002004");

}

if(obj == "003"){

option1 = new Option("济南市","003001");

option2 = new Option("青岛市","003002");

option3 = new Option("潍坊市","003003");

option4 = new Option("威海市","003004");

}

city.options.add(option1);//添加option的方式

city.options.add(option2);

city.options.add(option3);

city.options.add(option4);

}

</script>

  </head>

  

  <body>

   <select name="province" id="province" onchange="createSecondLevel(this.value)">

   <option value="000">请选择省</option>

   <option value="001">河北</option>

   <option value="002">河南</option>

   <option value="003">山东</option>

   <option value="004">山西</option>

   <option value="005">湖南</option>

   </select>

   <select name="city" id="city">

   <option value="000000">请选择市</option>

   </select>

   <select name="district" id="district">

   <option value="000000">请选择区</option>

   </select>

  </body>

</html>

}

背景图片:{

   

}

实例计算器:{

  <style type="text/css">

input{

width: 55px;

height: 36px;

font-size: 15px;

font-weight: bold;

}

.first {

width: 55px;

height: 80px;

font-size: 17px;

font-weight: bold;

}

#total{

width: 290px;

height: 40px;

font-size: 30px;

font-weight: bolder;

color: green;

text-align: right;

}

</style>

  </head>

  

  <body>

   <table align="center">

   <tr>

   <td colspan="5">

   <input type="text" name="total" id="total" readonly/>

   </td>

   </tr>

   <tr>

   <td colspan="5">

   算式提示:

   </td>

   </tr>

  

   <tr>

   <td>

   <input type="button" value="7"/>

   </td>

   <td>

   <input type="button" value="8"/>

   </td>

   <td>

   <input type="button" value="9"/>

   </td>

   <td>

   <input type="button" value="÷"/>

   </td>

   <td rowspan="2">

   <input type="button" value="清零" class="first"/>

   </td>

   </tr>

  

   <tr>

   <td>

   <input type="button" value="4"/>

   </td>

   <td>

   <input type="button" value="5"/>

   </td>

   <td>

   <input type="button" value="6"/>

   </td>

   <td>

   <input type="button" value="×"/>

   </td>

   </tr>

  

   <tr>

   <td>

   <input type="button" value="1"/>

   </td>

   <td>

   <input type="button" value="2"/>

   </td>

   <td>

   <input type="button" value="3"/>

   </td>

   <td>

   <input type="button" value="-"/>

   </td>

   <td rowspan="2">

   <input type="button" value="=" class="first"/>

   </td>

   </tr>

   <tr>

   <td>

   <input type="button" value="0"/>

   </td>

   <td>

   <input type="button" value="±"/>

   </td>

   <td>

   <input type="button" value="."/>

   </td>

   <td>

   <input type="button" value="+"/>

   </td>

   </tr>

   </table>

  </body>

}

<!--EndFragment-->
分享到:
评论
1 楼 wanxkl 2011-09-16  
哇!总结的太好了。。凤哥哥,你好强大啊。。请问您跟凤姐什么关系啊?

相关推荐

    简单css应用

    这个"简单CSS应用"的主题旨在介绍如何利用CSS来美化和控制网页的布局与设计。在http://blog.csdn.net/svitter/article/details/23965491这篇博客中,作者可能会分享一些基础到进阶的CSS技巧,帮助读者更好地理解和...

    CSS应用相册V2.0

    《CSS应用相册V2.0》是一款完全基于CSS技术构建的相册应用,它展示了CSS在网页设计和用户体验优化中的强大潜力。这个项目对于学习和掌握CSS的高级技巧,尤其是布局、过渡、动画和响应式设计等方面的知识,具有极高的...

    css速成手册教你学好css应用

    总的来说,《CSS速成手册》是一本全面覆盖CSS基础知识和高级技巧的实用指南,无论是初学者还是有一定经验的开发者,都能从中受益,快速提升CSS应用能力。通过阅读和实践书中的例子,你将能够独立完成各种复杂的网页...

    DIV.CSS应用教程

    DIV+CSS的经典教程2 历史可大幅减少离开打飞机离开时间的法律思考角度飞

    HTML/CSS应用与使用

    HHTML/CSS应用与使用HTML/CSS应用与使用HTML/CSS应用与使用TML/CSS应用与使用

    Ext JS 1713个icon图标 自带生成png转css应用

    “自带生成png转css应用”是指这套图标资源不仅提供了PNG图片格式,还支持转换为CSS(层叠样式表)代码。在Web开发中,将图标转化为CSS可以带来诸多优势:减少HTTP请求,提高页面加载速度;通过CSS控制图标的大小和...

    css应用多div

    css应用多div,搜索引擎,图片悬浮,有源代码,希望大家学习,不要照抄。

    基于Markdown文档的Java学习笔记与CSS应用设计源码

    本项目为Java学习笔记与CSS应用设计的源码集,共计382个文件,涵盖256个Markdown格式笔记、107个PNG格式图片、10个JSON格式数据、3个CSS样式表、3个JPG格式图片、2个Java源文件以及1个Obsidian工作空间配置文件。...

    CSS及其应用 书籍

    根据给定的部分内容,下面分析几个具体的CSS应用场景: ##### 示例1:基本CSS应用 ```html &lt;style type="text/css"&gt; .REDCOLOR { color: red; } #SHOWCOLOR { color: blue; } 这段文字将显示为红色。 这段文字...

    react-像老板一样有条件地将CSS应用于React组件

    在React开发中,我们经常需要根据组件的状态或条件来应用不同的CSS样式,这不仅可以提高代码的可维护性,还能让我们的应用更具动态性。本文将深入探讨如何在React组件中有条件地应用CSS,让你如同老板一样,灵活地...

    staticfile-buildpack, 将 static HTML/JS/CSS 应用部署到云.zip

    staticfile-buildpack, 将 static HTML/JS/CSS 应用部署到云 云铸造 Staticfile Buildpack 请加入我们。用于诸如网站 (HTML/JS/CSS). 等 static 内容的Cloud Foundry buildpack Buildpack用户文档官方buildpack文档

    DIV+CSS 应用祥解教程

    详细讲解了CSS+DIV的各个方面。 包括:语法、应用、代码编写、实例等,细致,实用,是一部难得的教程。

    css技术实例应用,简单的网页风格

    在“tugboat”这个文件名中,虽然没有具体说明,但可能是指一个示例项目或案例,它可能包含了一个完整的CSS应用实例,用于展示上述技术的实践应用。这个例子可能包括HTML结构、相应的CSS样式以及最终的预览效果,供...

    DW div+css应用

    使用div+css做得网页,与大家分享我的成果

    div+css应用文档

    div+css关于简单blog制作思路布局,以及部分知识讲解。 配套优酷视频解说http://v.youku.com/v_show/id_XNjA3OTc1ODY0.html

    CSS酷站CSS特效华丽CSS

    接着,"CSS特效"是CSS应用的亮点之一。它们可以增强网页的视觉吸引力,比如悬停效果、滑动门、轮播图、粒子背景、3D效果等。CSS3引入了许多新的选择器、伪类和属性,使得创建这些特效变得更加简单。例如,`...

    十四个CSS应用小技巧陈列

    主要介绍如何CSS能使你的网页更加简炼以及使用CSS中的一些小经验.

    使用了这个css后markdown展示效果和github的大致一样

    8. **网页集成**:将GitHub的Markdown CSS应用到自己的网页中,可能需要考虑与其他CSS样式冲突的问题,合理使用CSS的`!important`属性和权重规则来解决此类问题。 通过学习和应用GitHub的Markdown CSS,开发者可以...

Global site tag (gtag.js) - Google Analytics