DHTML【8】--CSS

    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性。上一节我们也说过,先不用管那个Style标签,那么这一节,我们就单独来解决这个Style标签。

    看一看帮助文档,他是怎么说Style的,指定页面的样式表,Style 元素只能在 HTML 文档的 Head节内使用,那么究竟该怎么指定呢?

有三种方式,看下图:

 

    最常用的要数第一层,外部引用,这样的化程序员和美工设计者分工非常明确,便于分开操作,也可以增加代码的复用性,后来需要补充的属性可以页面嵌入,很少用内联的形式。其实除了外部引入方式,我们没有接触过,页面嵌入和内联形式都接触过了,就再都介绍介绍吧。

     1. 内联引入

      思想:通过标签的Style属性设置当前标签的样式。

       例子:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html>

<head>

</head>

 

<body>

 

<table
align=
"center"

border=
"10px"

bordercolor=
"#0000FF"

cellspacing=
"0">

 

<caption>DHTML技术</caption>

 

<tr
style=
"background-color:#FF0000;
font-size:18px"
><th>名称</th><th>HTML</th><th>CSS</th><th>JavaScript</th><th>DOM</th><th>Jquery</th><th>Ajax</th></tr>

<tr
style=
"background-color:#00FF00;
font-size:36px"
><td>难易程度</td><td>非常容易</td><td>特别容易</td><td>比较容易</td><td>较容易</td><td>容易</td><td>相当容易</td></tr>

<tr
style=
"background-color:#FF0000;
font-size:18px"
><td>独立新技术</td><td>是</td><td>是</td><td>是</td><td>是</td><td>否</td><td>否</td></tr>

<tr
style=
"background-color:#00FF00;
font-size:36px"
><td>深度要求</td><td>很深</td><td>深一点</td><td>更深一点</td><td>深</td><td>较深</td><td>最深</td></tr>

<tr
style=
"background-color:#FF0000;
font-size:18px"
><td>是否学过</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td><td>Yes</td></tr>

</table>

</body>

</html>

      红色的代码是嵌入在tr标签内,输入内联形式。

      2. 页面嵌入

      思想:在Head标签内定义选择器,美化当前页面。

      例子:


1


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<html>

<head>

<style
type=
"text/css">

div{
background:#00ff00}

.Waring{
background:#ff0000;
cursor:help}

#OnePerson{font-size:36px;color:#F0F}

</style>

</head>

 

<body>

<div>半路</div>

<hr/>

<p
class=
"Waring">薛凯琪</p>

<hr/>

<input
id=
"OnePerson"

type=
"text"

value=
"一个人失忆" 

/>

 

 

</body>

</html>

      这回懂了上一节的遗留问题,其实看看就能知道,太简单了。

      3. 外部引入

       思想:单独建立一个Css文件,在Css文件中写Css代码样式,在HTML代码中通过Link标签导入,效果和页面嵌入一样。

例子:

        Css文件名css1.css,文件代码:

p{ font-size:24px;color:#00ff00}

div{font-size:xx-large;background-color:#F0F;color:#FFF}

 a:active{color:Green}

        a:hover{cursor:move}

        a:link{color:Red}

        a:visited{color:#FF0}

                       HTML页面代码:

<html>

<head>

<link type="text/css"rel="Stylesheet" href="css1.css"/>

</head>

<body>

<div>如烟</div>

<hr/>

<p class="Waring">五月天</p>

<hr/>

<a href="www.baidu.com">百度首页</a>

 

</body>

</html>

      Css文件代码和页面嵌入类型代码格式一样。注意link标签的引入。

      按照我的进度,今天应该是CSS的最后一节了,下一节将介绍JavaScript,JavaScript在目前非常火,具有跨平台性,甚至因为JavaScript技术诞生出好多综合技术,相当了得,敬请期待下一节吧。

时间: 2024-09-30 15:48:38

DHTML【8】--CSS的相关文章

DHTML【7】--CSS

    本节将要介绍CSS的选择器,CSS有三种常用的选择器,还有三种扩展选择器,说到选择器,那么选择器是做什么用的呢?       上一节我们介绍CSS常用属性的时候,我们都是通过在标签内定义Style属性来介绍的,但是如果Style中的属性有很多,并且我们还要把相同类型的标签用同一个CSS样式来美化,我们总不能Copy代码吧,首先页面太乱,再者代码量大,在大型的网站开发中会影响执行效率,最后自己操作起来也很麻烦,遇到这个问题,我们改怎么解决呢?       这就是选择器要做的事情,我们可以先

【译】CSS 才不是什么黑魔法呢

本文讲的是[译]CSS 才不是什么黑魔法呢, 原文地址:CSS Isn't Black Magic 原文作者:aimeemarieknight 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:吃土小2叉 校对者:薛定谔的猫.LeviDing CSS 才不是什么黑魔法呢 一起来揭开 CSS 的神秘面纱 如果你是一名 web 开发者,你可能会时不时地写一些 CSS. 当你第一次接触 CSS 时,似乎觉得 CSS 轻而易举.加边框,改颜色,小菜一碟.Java

【译】CSS 十六进制颜色揭秘

本文讲的是[译]CSS 十六进制颜色揭秘, 原文地址:CSS Hex Colors Demystified 原文作者:Dave Gash 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:Cherry 校对者:薛定谔的猫.lampui.undead25.undead25 简介 作为一个长期在世界各地主持技术峰会的主持人,我有机会和许多技术传播者交流,我将这些人称为"专业的技术作者",忙于他们的工作. 一个主题反复出现的是 CSS 中的颜色 --

DHTML【1】

        什么是DHTML呢?英文全称(Dynamic Hypertext Markup Language),即动态超文本标记语言,DHTML不是一个独立的新技术,而是多种技术的综合,它能使HTML变的更灵活.    DHTML都包括什么技术?DHTML包括HTML.Css.Javascript.DOM.    各个技术都负责什么东东呢?HTML负责将数据进行标签的封装:css负责美化标签:DOM负责将标签以及标签中的数据封装成对象:Javascript负责通过程序设计方式来操作这些对象.

DHTML【9】--Javascript

      大家好,好长时间不见了,因为博主最近在驾校学习开车,所以耽误了DHTML的更新日程,对此实感愧疚.       好了,不再得瑟了,接下来该介绍DHTML中比较核心的一个东东-Javascript. 初看Javascript有点头晕,因为名字中有个Java,Java似乎很难啊,学好那东东没有个几年是学不好的的啊,如果你有这样的心理那你就错了,Javascript是一种动态网页脚本语言,他和Java的关系就如同加州牛肉面和马华牛肉面之间的关系,虽然名字里都有牛肉面,都是做面起家的,但是两

DHTML【2】--HTML

    通过题目,大家已经明确知道,从这一节开始介绍DHTML中的最基础的部分HTML,对于HTML等概念上一节已经做了概述,这一节不再赘余.在学习HTML之前,先告诉大家一个好消息,HTML不难,比C++.Java等语言的面向对象简单很多,并且你也不用安装庞大的Eclipse和Visual Studio,只要有浏览器就可以运行,哈哈哈,慢慢得意去吧,当然你也会慢慢发现的.     HTML是DHTML中最基础的部分,也是DHTML中最先出现的内容,因为只有有了HTML标签内容,DOM才会产生D

DHTML【5】--HTML

    今天将介绍HTML的一些零碎知识,当然这些也很重要了,下面就一一介绍,虽然零碎,但是你以后肯定都会用得上,本来学习就是一点点的积累吗.       1.Select标签     Select标签一般都是用在省市选择的下拉列表,方便用户操作,也减少了(天津与天津市)种种错误的存在,既然这么常见,那么怎么用呢?用就看代码呗,千万别在Dreamweaver里拖控件,你可以利用里面的代码提示功能,但是代码一定要自己写,否则Java程序员又要说你只会拖控件了,好了不说废话了,见下面代码.    

【原】css实现两端对齐的3种方法

说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面的文本或模块.   响应式网页设计出现以来,更多是使用百分比布自适应布局,特别是在移动端,两端对齐的方式显得越来越重要.那么,如何使用css实现两端对齐,相信很多同学会文本对齐的text-align:justify,这是今天要讲的其中一种方式,另外还有两种更精彩的实现方式,请往下看~ 下图是需要实现

【原】CSS实现背景透明,文字不透明,兼容所有浏览器

11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成为了所谓的"购物节",双11也算了,后面还要搞双12,不得不吐槽下. 于是呢,熬夜加班做了11.11的活动,在PC端遇到了透明背景和透明图片的问题,其实以前也遇到过,只是没有总结起来,就忘记了,这次又撞墙了,