、

ホームページ

ウェブフロントエンド

htmlチュートリアル

いくつかのCSS要素の簡単な説明 div ul dl dt oldiv_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:28 PM

几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好

ol 有序列表。

……

……

……

表现为：

1……
2……
3……

ul 无序列表，表现为li前面是大圆点而不是123

……

……

很多人容易忽略 dl dt dd的用法

dl 内容块
dt 内容块的标题
dd 内容
可以这么写：

标题: 内容1; 内容2

dt 和dd中可以再加入 ol ul li和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局

由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，就需要统一class与id的名称，前天花了一点时间，按照大多人的习惯，制定了下面的常用关键字：
容器：container/box
头部：header
主导航：mainNav
子导航：subNav
顶导航：topNav
网站标志：logo
大广告：banner
页面中部：mainBody
底部：footer
菜单：menu
菜单内容：menuContent
子菜单：subMenu
子菜单内容：subMenuContent
搜索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　题：title
内容：content
列表：list
当前位置：currentPath
侧边栏：sidebar
图标：icon
注释：note
登录：login
注册：register
列定义：column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)

代码精简

　　使用DIV CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点：一是提高spider爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到spider喜欢，这样对收录数量有一定好处。

　　表格的嵌套问题搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

　　使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，spider爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

　　而DIV CSS布局基本上不会存在这样的问题，从技术角度来说，XHTML在控制样式时也不需要过多的嵌套。搜索引擎优化及营销都是非常有利的。搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但?思蜀本人保持这样的观点，有异议者可以拿三组以上基本同等质量的网站对比观察。内容来自中国站长资讯网(www.chinahtml.com)

　　我想，这样的情况可能不是排名规则，最大的可能还是spider爬行网站时，出现以上差异导致收录质量的不同。

　　毕竟廖胜于无，建议建站或改版的朋友们，技术许可的情况下，还是选择DIV CSS布局为好。

CSS布局常用的方法：float:none|left|right
取值：
none:　默认值。对象不飘浮
left:　文本流向对象的右边
right:　文本流向对象的左边

它是怎样工作的，看个一行两列的例子
xhtml:

这里是第一列

这里是第二列

CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

position:static|absolute|fixed|relative
取值：
static:　默认值。无特殊定位，对象遵循HTML定位规则
absolute:　将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed:　未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative:　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

它来实现一行两列的例子
xhtml:

这里是第一列

这里是第二列

CSS:
#wrap{position:relative;width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他们的区别在哪?
显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

CSS常用布局实例

单行一列
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}

两行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}

单行两列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

两行两列
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}

三行两列
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

单行三列

绝对定位
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

float定位
xhtml:

这里是第一列

这里是第二列

这里是第三列

CSS:
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}

float定位二
xhtml

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

CSS
body{
margin:0;
padding-left:200px;
padding-right:190px;
min-width:200px;
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;
right:200px;
margin-left:-100;
}
#right{
width:190px;
margin-right:-100;
}

*html#left{
left:190px;
}

这样的一个指令：(position)，在DreamWeaver中文版中翻译为“定位”，常用的属性有两个：relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚，这里做一些细致的讲解。

　　position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。

　　position:absolute; 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。

　　于是产生了一个问题：现在大家做的网页大部分是居中的，如果我需要这个元素跟着网页中的某个元素位置，不论屏幕的分辨率是多少它的位置始终是针对页内的某个元素的，靠单纯的absolute是不行的。

　　正确的解决方法是：在元素的父级元素定义为position:relative;(这里可以是祖父级，也可以是position:absolute;，多谢谢old9的提出)需要绝对定位的元素设为position:absolute;

　　这样再设定top,right,bottom,left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧。

一.选择符模式

模式/含义/内容描述

匹配任意元素。(通用选择器)

匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)

E F

匹配元素 E 的任意后代元素 F 。(后代选择器)

E > F

匹配元素 E 的任意子元素 F 。(子选择器)

E:first-child

当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)

E:link E:visited

如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)

E:active E:hover E:focus

在确定的用户动作中匹配 E 。(动态伪类)

E:lang(c)

如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)

E F

如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)

E[foo]

匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)

E[foo="warning"]

匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)

E[foo~="warning"]

匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)

E[lang|="en"]

匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)

DIV.warning

仅 HTML。用法同 DIV[class~="warning"]。(类选择器)

E#myid

匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

我们用下面的例子来解释“父元素”、“子元素”、“父/子”及“相邻”这几个概念。

这是是h1的内容

这是一个段落p的内容！这里是strong的内容这是一个段落p的内容！

上記のコードから、次の関係がわかります:

h1 と p は両方とも div の「子」であり、それぞれ div と「親/子」関係を形成します。

h1,p,strong はすべて div の「子要素」です。 (3 つはすべて div 内に含まれます)

div は h1 と p の「親要素」です。

strong と p は「親/子」関係を形成し、strong の「親要素」は p です。

しかし、strongとdivの関係は「父と子」の関係ではなく、「祖父母と孫」の関係ですが、Strongはdivの「子（孫）要素」であることに変わりはありません。

div は h1 p Strong の「祖先」であり、3 つは div の「子 (孫) 要素」です。

h1 と p は隣接しています。

上記の例を継承して、E と F の関係を具体的に示します。strong の内容を Green に変更する必要がある場合、どのような方法を使用できますか?

div Strong {color:green;}

p >strong {color:green;}

div >strong {color:green;}

近接セレクターとユニバーサルセレクター: ユニバーサルセレクターにはアスタリスクが付いています。 *" は、任意のタグを置き換えるために使用できることを意味します。

例:

h2 * { color:green }

2. セレクター分類の概要

1. ワイルドカードセレクター

構文:

* { sRules }

説明:

ワイルドカードセレクター。選択したドキュメントツリー (DOM) 内のすべてのタイプの単一オブジェクト。

ワイルドカードセレクターが単一セレクターの唯一のコンポーネントではない場合は、「*」を省略できます。

例:

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none;

2. 型セレクター

E { sRules }

説明:

タイプセレクター。ドキュメント言語オブジェクト (Element) タイプをセレクターとして使用します。

例:

td { font-size:14px; width:120px; }

a { text-decoration:none; }

疑似クラスは、特殊なクラスと見なすことができます。 CSS をサポートするブラウザで自動的に認識できる特別なセレクター。その最大の用途は、さまざまな状態のリンクに対してさまざまなスタイル効果を定義できることです。

1. 構文

疑似クラスの構文は、元の構文に疑似クラス（疑似クラス）を追加します。

selector:pseudo-class {property: value}

(selector: pseudo-class) {property: Value})

疑似クラスは、CSS によってすでに定義されており、クラスセレクターのような他の名前で任意に使用することはできません。上記の構文によれば、オブジェクト (セレクター) として解釈できます。特別な状態 (疑似クラス) スタイルで。

クラスセレクターと他のセレクターは、疑似クラスと混合することもできます:

selector.class:pseudo-class {property: value}

(selector.class:pseudo-class{property: value})

2 。アンカー疑似クラス

最も一般的に使用されるのは、a (アンカー) 要素の 4 つの疑似クラスです。これらは、動的リンクの 4 つの異なる状態を表します: リンク、訪問済み、アクティブ、ホバー (未訪問のリンク、訪問済みのリンク、アクティブなリンク、およびマウスオーバーリンク)。それぞれに異なる効果を定義します:

a:link {color: #FF0000; text-decoration: none}

a:visited {color: #00FF00; text-decoration: none}

a:hover {color : #FF00FF; text-decoration: 下線}

a:active {color: #0000FF; text-decoration: 下線}

(上記の例では、リンクにアクセスしていない場合、その色は赤色であり、下線はありません)アクセス後は緑色で下線が付きません。リンクがアクティブになると青色で下線が付きます。マウスがリンク上にあると紫色で下線が付きます)リンクにアクセスする前にマウスがそのリンクをポイントしても、リンクにアクセスした後にマウスが再びポイントすることはありません。これは、a:hover を a:visited の前に置くためです。この場合、後者の方が優先されるため、リンクにアクセスするときに a:hover の効果は無視されます。したがって、これらのリンクスタイルを定義するときは、積み重ね順序に従い、a:link、a:visited、a:hover、a:actived の順序で記述する必要があります。

3. 疑似クラスとクラスセレクター

疑似クラスとクラスを組み合わせることで、同じページ上に異なるリンク効果のグループを作成できます。たとえば、リンクのグループを赤く定義し、アクセスした後、それらは青になり、他のグループは緑になり、訪問後は黄色になります:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue: link {color: #00FF00}

a.blue:visited {color: #FF00FF}

現在、別のリンクに適用されています:

これは最初のリンクセット

これは 2 番目のリンクセットです

4. その他の疑似クラス

さらに、 CSS2 では、first-letter および first-line の疑似クラスも定義されており、要素の最初の文字または最初の行に異なるスタイルを設定できます。

以下の例を見てください。段落記号内のテキストの最初の文字サイズをデフォルトのサイズの 3 倍に定義します。

……

这是一个段落，这个段落的首字被放大了。

我们再定义一个首行样式的例子：

……

这是段落的第一行

这是段落的第二行

这是段落的第三行

(上記の例では、段落の最初の行は赤、2 行目と 3 行目はデフォルトの色です)

注: 最初の単語と最初の行の疑似クラスは IE5 でサポートされている必要があります。 .5以上。

1. Block要素とinline要素の比較

すべてのHTML要素はblockまたはinlineのいずれかに属します。

ブロック要素の特徴は次のとおりです:

常に新しい行で開始します。

高さ、行の高さ、および上下の余白はすべて制御できます。

設定されていない限り、デフォルトの幅はコンテナの 100% です。 width

、

はブロック要素の例です。

逆に、インライン要素の特徴は次のとおりです。

他の要素は同じ行にあります。

高さ、行の高さ、上下の余白は変更できません

width はテキストの幅です。または画像とは変更できません。
、、、、、、および はインライン要素の例です。

要素のこの機能を変更するには、display: inline または display: block コマンドを使用します。この属性を変更する必要があるのはどのような場合ですか?

インライン要素を新しい行で開始します。

ブロック要素と他の要素を 1 行に保ちます。

インライン要素の高さを制御します。要素;

設定する必要はありません固定幅を使用すると、テキストと同じ幅のブロック要素の背景色を設定できます。

2. 別のボックスハッキング方法

これほど多くのボックスハッキング方法がある理由は、6 より前の IE のボックスの幅にはエッジ幅と空白が含まれている必要があるためです。 IE5 を他のブラウザと一致させるには、次の CSS を使用できます。

padding: 2em;

border: 1em plain green;

width: 20em;

すべてのブラウザが認識します。ただし、IE5 では、行 2 で行 1 がカバーされるため、幅 14 が使用されます。

3. ページの最小幅

min-width は、レイアウトが常に正しいように、要素が少なくとも一定の幅である必要があることを指定できる非常に便利な CSS コマンドです。しかし、IE はこれを認識せず、実際には幅を最小幅として扱います。このコマンドを IE でも機能させるには、タグの下に
を入れて、div のクラスを指定します:

Then CSS は次のように設計します:

#container

{

min-width: 600px;

width:expression(document.body.clientWidth

}

最初の min-width は通常ですが、2 行目の幅は IE でのみ認識される Javascript を使用しているため、HTML ドキュメントの形式が低くなります。実際にはJavaScriptの判断により最小幅を実装しています。

同じ方法を使用して IE の最大幅を実現することもできます:

#container

{

min-width: 600px;

max-width: 1200px;

width:expression(document.body. clientWidth < "600px" : document.body.clientWidth > 1200px";
}

4. IE と幅と高さの問題
IE は min の定義を認識しません- ですが、実際には通常の幅と高さを min があるかのように扱います。これは、幅と高さのみを使用する場合、通常のブラウザではこの 2 つの値が変更されないことになります。 min-width と min. -height は、IE では幅と高さの設定がないことを意味します。たとえば、背景画像を設定したい場合は、この幅がより重要です。 :
{

幅: 80px;

高さ: 35px;

}

body .box

{

幅: 自動;

高さ: 自動;

最小幅: 80ピクセル;

分- height: 35px;

}

最初のボックス設定はすべてのブラウザで使用できますが、2 番目の設定はより特殊であるため、IE は 2 番目の設定を認識せず、最初の設定

を上書きします。
前回の Web 開発コラムでは、HTML テーブルを処理する多くの方法を紹介しましたが、テーブルを使用して Web ページをレイアウトする方法はもう流行っていませんが、テーブルを使用してテーブル列データを表示することはできます

表の表示とスタイルについて、この記事ではCSSを使って表の枠線をスタイリングする方法を紹介します

Links

CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行，表格模型包含以下的元素：表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。

边框

根据不同的需求，您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框：

TABLE { 5px solid black; }

除此以外，您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型：

l none: 指定表格没有边框，所以边框宽度为0。

l dotted: 由点线组成的表格边框。

l dashed: 由虚线组成的表格边框。

l solid: 由实线组成的表格边框。

l Double: 由双实线组成的表格边框。

l Groove: 槽线效果边框。

l ridge: 脊线效果边框，和槽线效果相反。

l inset: 内凹效果边框。

l outset: 外凸效果边框，和内凹效果相反。

每个边框类型都可以指定一种颜色，边框是绘制在背景颜色上的，列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。

HTML Table

Person
Sales
First Quarter Sales

Mr. Smith 600.00
Mr. Jones 0000.00
Ms. Williams 0000.00

Let's sale, sale, sale!

列表A

这个例子展示了很多可供使用的表格边框的选项，您可以使用您熟悉的度量单位（像素、磅，行长单位等）。设定边框的尺寸，您可以使用十六进制数值或颜色名称来指定边框颜色。以下的例子演示了定义边框的方法。

border: 5px solid red;

在这一条语句中融合了宽度、样式和颜色属性的定义，但是您也可以对这些元素进行单独定义，如下所示：

border-width: 5px;

border-style: solid;

border-color: red;

除了将表格作为一个整体进行定义，您也可以将表格边框的四个部分分别进行定义，包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。

CSS布局常用的方法

float:none|left|right

取值：

none: 默认值。对象不飘浮

left: 文本流向对象的右边

right: 文本流向对象的左边

它是怎样工作的，看个一行两列的例子

xhtml代码:

Example Source Code

这里是第一列

这里是第二列

CSS コード:

ソースコード例

#wrap{width:100;height:auto;}

#column1{float:left;width:40;}

#column2{float:right;width: 60;}

.clear{clear:both;}

position:static|absolute|fixed|relative

値:

static: デフォルト値。特別な配置はなく、オブジェクトは HTML の配置ルールに従います

absolute: オブジェクトをドキュメントフローの外にドラッグし、左、右、上、下、およびその他の属性を使用して、最も近い親オブジェクトを基準にして絶対配置を実行します。位置決めの設定。そのような親オブジェクトが存在しない場合は、body オブジェクトが使用されます。そして、そのカスケードは z-index 属性を通じて定義されます

修正済み: サポートされていません。オブジェクトの位置決めは絶対方式に従います。ただし、いくつかの仕様に従う必要があります

相対: オブジェクトは積み重ねることはできませんが、左、右、上、下およびその他の属性に基づいて通常のドキュメントフロー内でオフセットされます

1 行と 2 行の例を実装するために使用されます列

xhtml コード:

ソースコードの例

これが最初の列です

これが 2 番目の列です

CSS コード:

サンプルソースコード [www.52css.com]

#wrap{position:relative;width: 770px;}

# column1{position:absolute;top:0;left:0;width:300px;}

#column2{position:absolute;top:0;right:0;width:470px;}

何それらの違いは何ですか？

明らかに、float は相対的に配置され、ブラウザのサイズと解像度によって変化しますが、位置は機能しないため、通常の状況では、float レイアウトが引き続き使用されます。

これまで、Web ページの印刷用バージョンを作成するには、印刷時に見栄えが良くなるようにレイアウトと書式を変更して別のページをデザインする必要がありました。構造化された XHTML と CSS を使用することで、はるかに少ない労力で同じ効果を達成できるようになりました。

画面表示から印刷効果まで

ほとんどの Web ページはコンピューター画面で表示されるように設計されています。ただし、長期的な記録を保存したり、便利なオフライン参照として使用したりするために、ユーザーが特定のページを印刷する必要がある場合があります。

現在の問題は、コンピューターのカラー画面上で Web ページを人目を引くカラフルに見せる機能の多くが、印刷版の Web ページでは同じ効果が得られないことです (特にプリンターが白黒の場合)。グレースケール印刷にダウングレードすると、色の組み合わせが歪んで表示され、印刷に時間がかかりすぎます。また、Web ページで重要な役割を果たしているナビゲーションボタンも、ページ上で適切に印刷されません。

これらの問題を克服するために、Web クリエイターは多くの場合、訪問者が印刷したくなるようにページの印刷用バージョンをデザインします。印刷用バージョンには通常、メインの Web ページと同じコンテンツが含まれていますが、ほとんどのグラフィックス、背景、およびナビゲーション要素が省略されています。また、ページは色を何らかの形式に変換して、許容可能なグレースケール画像を生成します。

CSS ソリューション

構造化 XHTML マークアップと CSS フォーマットを使用してコンテンツとプレゼンテーションを分離する利点の 1 つは、CSS スタイルを変更することでコンテンツを簡単に再フォーマットできることです。したがって、印刷に適したページを作成するには、異なる CSS ファイルを同じ XHTML ページにリンクする必要があります。

画面スタイルシートと印刷スタイルシートの両方を同じ XHTML ファイルにリンクできるため、印刷用の別のページを作成する必要はなく、印刷用のスタイルシートを作成するだけです。リンクコードにマルチメディアタイプファイルを含めると、画面出力にどの CSS ルールに従うか無視するか、また印刷出力にどのルールを使用するかをブラウザに指示することになります。

CSS ファイルのペアへのリンクの例を次に示します。

/>
< ;link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />

古いバージョンのブラウザをサポートする必要がある場合は、次の手順に従う必要があります。 CSS1 メディア記述子の画面表示と印刷。これらは相互に排他的であるため、ブラウザは画面表示用のページを生成するときに印刷スタイルシートを無視し、その逆も同様です。したがって、各スタイルシートには同じスタイルセレクターが含まれている必要がありますが、異なる出力デバイス用のページスタイルを生成するための異なるルール宣言が含まれている必要があります。