`
Virgo_S
  • 浏览: 1151095 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

1、CSS的应用

    博客分类：
  • CSS
CSSHTMLXHTMLWeb 
阅读更多
一、In-line 行内

　　行内样式是在html标签里直接使用style属性 
<p style="color: red">text</p>

　　设定段落文字红色。
　　但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。
二、Internal 内部
　　使用于整个页面的植入内部样式在head标签里面，style标签包围样式。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
    p {
        color: red;
    }
    a {
        color: blue;
    }
</style>

所有段落文字红色，链接蓝色。
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下就行。

三、外部

　　外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样： 
p {
    color: red;
}
a {
    color: blue;
}

如果上面保存为“web.css”，HTML里面的链接就像下面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" type="text/css" href="web.css" />
后面教程里会讲到其他外联样式的方法，现在已经足够了。

　　从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，保存为"web.css"在html目录。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" type="text/css" href="web.css" />
</head>

保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。
分享到：
| form表单提交数据编码方式和tomcat接受数据 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css高级应用与技巧

    css高级应用与技巧css高级应用与技巧css高级应用与技巧

    简单css应用

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

    CSS3高级应用

    CSS3高级应用

    CSS及其应用 书籍

    ##### 示例1：基本CSS应用 ```html &lt;style type="text/css"&gt; .REDCOLOR { color: red; } #SHOWCOLOR { color: blue; } 这段文字将显示为红色。 这段文字将显示为蓝色。 ``` - **解析**：通过`.REDCOLOR`和`#...

    css样式应用实例基础实例

    本篇将深入探讨"CSS样式应用实例基础实例"，旨在帮助初学者和有一定经验的开发者更深入地理解并掌握CSS在实际项目中的应用。 首先，我们需要了解CSS的基本概念。CSS允许我们将样式信息与结构内容分离，使得网页的...

    快应用CSS动画库.zip

    1. **CSS动画源码**：可能包含一个或多个CSS文件，其中定义了各种动画效果。开发者可以通过引入这些CSS文件，利用类名将动画应用到快应用的元素上。源码通常会使用CSS3的关键帧动画（@keyframes）来创建复杂的过渡...

    javafx应用不同的css文件

    本示例重点是探讨如何在JavaFX中应用不同的CSS（层叠样式表）文件来改变应用程序的样式和外观。 在JavaFX中，CSS被用来控制UI组件的视觉样式，包括颜色、字体、布局和其他视觉属性。这使得开发者可以轻松地为应用...

    CSS的高级使用技巧和和应用

    CSS（Cascading Style Sheets）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。在网页设计中，CSS 是不可或缺的一部分，它能够帮助我们实现布局的精确控制、视觉效果的增强以及内容和表现的分离。 CSS...

    CSS与AJAX的综合应用 - CSS与其他技术

    CSS与AJAX的综合应用 - CSS与其他技术 CSS与AJAX的综合应用 - CSS与其他技术 CSS与AJAX的综合应用 - CSS与其他技术

    DIV.CSS应用教程

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

    HTML/CSS应用与使用

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

    CSS的高级应用实例

    CSSchange Ajax的局部更新。 CSSglass 用CSS制作会发光的字体。 CSSmenu 用Ajax+CSS制作动态菜单。 CSSshadow 用CSS制作投影效果。

    SPA.css 单页面应用

    纯css html实现的单页面应用

    45个非常奇妙的CSS3 特性应用示例

    1. **CSS3 Transform**：Transform属性允许元素在空间中进行旋转（rotate）、缩放（scale）、平移（translate）和倾斜（skew）。例如，3D Cube That Rotates Using Arrow Keys利用transform: rotateX()和rotateY()...

    CSS应用相册V2.0

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

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...

    CSS样式首页应用

    1. 媒体查询：`@media`规则允许我们根据设备特性（如视口宽度）应用不同的CSS样式，实现响应式设计。 2. 弹性图片和单位：使用`max-width: 100%;`确保图片不超出容器，使用相对单位如`em`和`rem`保持布局比例。 3....

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

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

Magicbox
Global site tag (gtag.js) - Google Analytics