- 浏览: 57361 次
- 来自: 北京
最新评论
-
泛泛evil:
总结的很好,谢谢分享
JavaScript -
wanxkl:
哇!总结的太好了。。凤哥哥,你好强大啊。。请问您跟凤姐什么关系 ...
css应用
CSS
本章目标
1、CSS的定义、优势
2、css的基本语法
3、引入css的方式
4、css的选择器
重点与难点
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-->发表评论
-
lucene3.0 例一
2012-09-11 20:18 649package com.lucene;import java. ... -
lucene3.0
2012-09-11 20:15 870全文搜索 核心:创建索引——查询索引--分词器 索引引擎: ... -
分布式存储(转载)
2012-06-05 15:42 1200L1、HTML静态化其实大家都知道,效率最高、消耗最小的 ... -
java设计原则
2012-04-05 16:50 822原则1:DRY(Don't repeat ... -
java静态、动态代理
2012-04-04 18:51 848JAVA的动态代理 代理模式 代理模式是常用的java设计模式 ... -
Hibernate声明事务
2011-09-17 16:25 896事务处理 第一种方式: 首先配置datasoure: ... -
javascript应用3
2011-09-10 15:14 952打开一个新页面:{ <script t ... -
javascript应用2
2011-09-10 15:09 897日期插件的应用:{ <script type=& ... -
javascript应用1
2011-09-10 15:00 972javascript {<!-- 1.j ... -
Html
2011-09-10 14:56 920HTML 超链接:{ <a href=”http:/ ... -
jsp、el、jstl.doc
2011-09-10 14:53 1324serlvet和jsp区别和联系 jsp从本质上讲也是s ... -
Jdbc
2011-09-10 14:49 922jdbc操作数据库插入、更新、删除、查找 mysql数据 ... -
文件上传步骤
2011-09-10 14:47 759文件上传的简单方法:(原理性的实验) 1. <b ... -
中文乱码问题解决
2011-09-10 14:43 7491. post方式提交的数据 采用request.setCha ... -
事务传播特性与隔离级别
2011-09-10 14:38 796事务传播特性了解事务的几种传播特性 ... -
监听器
2011-09-10 14:36 889监听器概述 1.Listener是Servlet的监听器 ... -
过滤器
2011-09-10 14:35 12411. Servlet过滤器基础 Servlet过滤器是Se ... -
web编程常用配置2
2011-09-10 14:35 712c3p0.jar:C3PO是一个数据库连接池,Hibern ... -
web编程常用配置1
2011-09-10 14:33 980mysql数据库jdbc驱动 jdbcDriver = co ... -
sql练习
2011-09-10 14:28 22651.oracle数据库启动的服 ...
相关推荐
这个"简单CSS应用"的主题旨在介绍如何利用CSS来美化和控制网页的布局与设计。在http://blog.csdn.net/svitter/article/details/23965491这篇博客中,作者可能会分享一些基础到进阶的CSS技巧,帮助读者更好地理解和...
《CSS应用相册V2.0》是一款完全基于CSS技术构建的相册应用,它展示了CSS在网页设计和用户体验优化中的强大潜力。这个项目对于学习和掌握CSS的高级技巧,尤其是布局、过渡、动画和响应式设计等方面的知识,具有极高的...
总的来说,《CSS速成手册》是一本全面覆盖CSS基础知识和高级技巧的实用指南,无论是初学者还是有一定经验的开发者,都能从中受益,快速提升CSS应用能力。通过阅读和实践书中的例子,你将能够独立完成各种复杂的网页...
DIV+CSS的经典教程2 历史可大幅减少离开打飞机离开时间的法律思考角度飞
HHTML/CSS应用与使用HTML/CSS应用与使用HTML/CSS应用与使用TML/CSS应用与使用
“自带生成png转css应用”是指这套图标资源不仅提供了PNG图片格式,还支持转换为CSS(层叠样式表)代码。在Web开发中,将图标转化为CSS可以带来诸多优势:减少HTTP请求,提高页面加载速度;通过CSS控制图标的大小和...
css应用多div,搜索引擎,图片悬浮,有源代码,希望大家学习,不要照抄。
本项目为Java学习笔记与CSS应用设计的源码集,共计382个文件,涵盖256个Markdown格式笔记、107个PNG格式图片、10个JSON格式数据、3个CSS样式表、3个JPG格式图片、2个Java源文件以及1个Obsidian工作空间配置文件。...
根据给定的部分内容,下面分析几个具体的CSS应用场景: ##### 示例1:基本CSS应用 ```html <style type="text/css"> .REDCOLOR { color: red; } #SHOWCOLOR { color: blue; } 这段文字将显示为红色。 这段文字...
在React开发中,我们经常需要根据组件的状态或条件来应用不同的CSS样式,这不仅可以提高代码的可维护性,还能让我们的应用更具动态性。本文将深入探讨如何在React组件中有条件地应用CSS,让你如同老板一样,灵活地...
staticfile-buildpack, 将 static HTML/JS/CSS 应用部署到云 云铸造 Staticfile Buildpack 请加入我们。用于诸如网站 (HTML/JS/CSS). 等 static 内容的Cloud Foundry buildpack Buildpack用户文档官方buildpack文档
详细讲解了CSS+DIV的各个方面。 包括:语法、应用、代码编写、实例等,细致,实用,是一部难得的教程。
在“tugboat”这个文件名中,虽然没有具体说明,但可能是指一个示例项目或案例,它可能包含了一个完整的CSS应用实例,用于展示上述技术的实践应用。这个例子可能包括HTML结构、相应的CSS样式以及最终的预览效果,供...
使用div+css做得网页,与大家分享我的成果
div+css关于简单blog制作思路布局,以及部分知识讲解。 配套优酷视频解说http://v.youku.com/v_show/id_XNjA3OTc1ODY0.html
接着,"CSS特效"是CSS应用的亮点之一。它们可以增强网页的视觉吸引力,比如悬停效果、滑动门、轮播图、粒子背景、3D效果等。CSS3引入了许多新的选择器、伪类和属性,使得创建这些特效变得更加简单。例如,`...
主要介绍如何CSS能使你的网页更加简炼以及使用CSS中的一些小经验.
8. **网页集成**:将GitHub的Markdown CSS应用到自己的网页中,可能需要考虑与其他CSS样式冲突的问题,合理使用CSS的`!important`属性和权重规则来解决此类问题。 通过学习和应用GitHub的Markdown CSS,开发者可以...