4.4 样式表的3类应用


CSS是3个字母，恰巧CSS的种类也有3种，分别是内嵌样式表、行内（嵌入）样式表和外部样式表文件。

本节单词记忆：标签 1.link 2.import 属性 1.rel

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

一、内嵌样式表

内嵌样式表使用格式如下：

<HEAD>
<STYLE type="text/css">
    样式规则
</STYLE>
</HEAD>

如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。

示例1:

<STYLE type="text/css">
P
{ font-family:"隶书";
font-size:18px;
color:#FF0000;
}
</STYLE>
</HEAD>
……
<P>床前明月光，</P>
<P>疑是地上霜。</P>
<P>我是郭德刚，</P>
<P>低头思故乡。</P>
……

所有的段落都采用 P 样式，保证样式统一。

二、行内（嵌入）样式表

如果希望某段文字和其他段落文字显示风格不一样，该如何解决？ 使用行内（嵌入）样式表可以解决。

语法:

<P style = "color:red;font-size:30px;font-family:隶书;"> 
本段<P>标签采用了行内样式
<P>

 示例2:

<HTML>
<HEAD>
<TITLE>行内样式表</TITLE>
</HEAD>
<BODY style=" background-color:#CCCCCC">
<P><IMG src="libai.jpg" width="140" height="170" align="left"></P>
<H2>静夜思</H2>
<H3>作者：李白</H3>
 <P style="color:#FF0000; font-size:18px; font-family:隶书; border-bottom-style:dashed ">床前明月光，<BR>
 疑是地上霜。<BR>
 我是郭德刚，<BR>
 低头思故乡。</P>
 <P>注释：
静夜思：宁静的夜晚所引起的乡思。
疑：怀疑，以为。
举：抬、仰。</P>
</BODY>
</HTML>

行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用。效果如图1所示：


图1 行内样式表

三、外部样式表

如果希望一个网站中多个页面的样式保持一致，如何解决？使用外部样式表文件样式表可以解决。

根据样式文件与网页的关联方式又分为：

● 链接（LINK ）外部样式表

● 导入（@import）外部样式表

链接（LINK ）外部样式表使用LINK（链接）标签，使用步骤为：

第一步：创建样式表文件newstyle.css

第二步：把样式文件和网页绑定

第三步：浏览查看各网页

语法:

<HEAD>
<LINK href="newsyle.css" rel="stylesheet" type="text/css">

<!--引入的样式文件-->
</HEAD>

使用@import导入 ，语法:

<HEAD>
<STYLE TYPE="text/css">
@ import newstyle.css;
</STYLE>
</HEAD>

本节作业：

使用外链样式表制作如下图网页。

注意事项：

1.第一行的背景为平铺的背景图片，按钮为背景图片。

2.注意文本框边框样式，超链接样式的使用。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第四章案例及作业资源 返回《HTML入门经典》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/html/jc/523.html

4.4 样式表的3类应用,布布扣,bubuko.com

时间： 2024-07-28 12:25:41

4.4 样式表的3类应用的相关文章

jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div").css("background","pink"); 类操作 .addClass添加类   $("div").addClass("class"); .removeClass删除类   $("div).removeCla

DOM 操纵样式表

CSS对应的JavaScript样式属性:background—color/style.backgroundColor,color/style.color,font/style.font,font-family/style.fontFamily,font-weight/style.fontWeight. 一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”

Qt样式表使用注意项

<1>.StyleSheet的使用StyleSheet文件的默认后缀名为qss,可以通过命令行参数-stylesheet filename.qss来设置样式表,也可以通过QApplication::setStyleSheet 或 QWidget::setStyleSheet来设置应用程序或特定控件要使用的样式表::setStyleSheet函数的参数是字符串(不是qss文件的名字,而是样式表的内容),所以直接使用的话,不方便一次设置大量的规则,但是可以使用资源文件将qss样式表嵌入到程序中,然

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

QWidget 直接派生类的样式表不起作用的解决办法

从 QWidget 派生一个窗口,使用 stylesheet 设置背景,designer 设置没有问题,或者,通过 setStyleSheet() 设置,代码操作是正确的,编译运行后,却没有背景. 下面为验证例子(通过代码验证,没有使用 designer ): 工程目录结构如下: mywidget.h 示例代码如下: #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> class MyWidget : public QWidget

通过Qt4.2样式表定制程序外观

通过Qt4.2样式表定制程序外观 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为Qt样式表 Qt 样式表的思想很大程度上是来自于

HTML 样式表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

QT开发（六十五）——QT样式表编程实例

QT开发(六十五)--QT样式表编程实例 一.QComboBox组合框样式定制 1.基本定义 QComboBox  {     border: 1px solid gray;     border-radius: 3px;     padding: 1px 2px 1px 2px;  # 针对于组合框中的文本内容     min-width: 9em;   # 组合框的最小宽度 } QComboBox::drop-down {     subcontrol-origin: padding;