在新建文档的对话框中，如果需要建立一个又CSS样式表的页面，应该选哪个（） A、示例

软件 2024-10-27

在“新建css样式”对话框中可用的选择器有哪四种？

最常用的四种选择器是：元素选择器、类选择器、ID选择器、派生选择器

1、元素选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为：属性名：属性值。如下图所示：

每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。

我们也可以同时对多个html元素进行声明：

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。如果我们希望一锅粥地选取所有的元素，可以使用通配符”*”： * { font-size: 20px;}

这样所有的元素都将被选中，虽然font-size属性对于某些元素是无效的，那么它将被忽略。

2、类选择器

(1)单类选择器

单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器(class selector)。

要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

...

这样我们就可以用以下方式使用类选择器了：

p.deadline { color: red;}

h2.deadline { color: red;}

点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。

如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：

.deadline { color: red;}

通常情况下，我们会组合使用以上2者得到更加有趣的样式：

.deadline { color: red;}

span.deadline { font-style: italic;}

以上代码首先会对所有的包含deadline的元素字体设置为红色，同时会对span元素中的文本添加额外的斜体效果。这样，如果你希望某处文本拥有额外的斜体效果将它们放在中就可以了。

(2)多类选择器

在实践的做法中，元素的calss属性可能不止包含一个单词，而是一串单词，各个单词之间用空格隔开。

比如某些元素包含一个”warning”类，某些元素包含一个”important”类，某些元素同时包含”warning important”类。属性名出现的顺序没有关系：

class = "warning important"

class = "important warning"

以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体，包含important属性的元素有一个加粗的字体显示，而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css代码：

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { background: blue;}

当然，第三条你也可以写成： .important.warning { background: blue;} 和词序没有关系。说明一下，.warning会匹配所有包含warning属性的元素，不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上2种属性的元素，不管该元素还包含多少其他的类，也不管他们在类列表中出现的顺序，只要其中含有这2个属性，则会被选择进来！

同样地，多于多类选择器，在前面加上元素名，则会匹配包含指定类名的指定元素，例如：p.warning.important {}

将会匹配同时包含warning和important属性的p元素，其他同样包含以上2类的元素则不会被选中。

3、ID选择器

ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

...

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如：

#top-para {} #foot-para {}；

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。

4、属性选择器

属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：

(1)简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素： img[alt] { ...}

选择带有title属性的所有元素：*[title] { ...}。同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：

a[href][title] { ...}

组合使用类选择器使我们的选择更加富于灵活性。

(2)具体属性值选择器

如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为http://www.baidu.com的锚元素：

a[href="http://www.baidu.com"] { font-weight: bold;}

要特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于class属性而言，词条的顺序是有关系的。

p[class="warning important"] { ...}

将不会匹配到

，也不会匹配到

，这里就是一个生硬的字符串匹配。

另外，想要同时匹配多个属性的值也是可以的：

p[class="warning"][title="para"] { ...}

将匹配到类为warning(仅有warning)，title属性为para的p元素。

(3)部分属性值选择器

根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以使用以下的部分值匹配选择器：

p[class~="warning"] { ...}

该选择器在等号”=”前面添加了一个波浪号~，含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题，它和以下的选择器是等价的：

p.warning { ...}

当然~=不仅仅只是用在class属性上，这只是一个示例。

再比如说，我们的文档中包含一系列人物介绍的div元素：

...

我们可以使用以下的方式选择所有人物简介div：div[title~="intro"] { ...}

不过遗憾的是

也将会被选择进来，这是需要我们特别注意的地方。

关于部分值选择器也有其局限性，它匹配的是由空格分隔的单词，如果我们将上面的div写成下面的样子就会匹配失败：

...

对于这种情况，我们可以使用子串匹配属性选择器。规则如下：

l div[title^="intro"] {...} //title以intro开头的div元素

l div[title$="intro"] {...} //title以intro结尾的div元素

l div[title*="intro"] {...} //title中包含"intro"子串的div元素

举例来说：

a[href*="google."] {...}

将包含所有链接中包含”google.”的a元素。

div[title$="y"] {...}

将包含以下所有div元素：

...

可以看出部分值属性选择器的功能是十分强大的。

5、派生选择器

派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题，我们这里给出一个DOM树作为参考：

(1)后代选择器(descendant selector)

如上图，如果想要选择body元素的所有li子元素，方法如下：

body li { ...}

这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。同理，如果想要选择h1元素下的span，可以使用以下代码：

h1 span { ...}

如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：.warning li { ...}

当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：div.warning li { ...}

由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下： ul li li { ...}

这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，参考我们的DOM树，会选择到文档树种最后一排li元素。

(2)子元素选择器(child selector)

子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：ul > li { ...}

两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。

但是，以下代码将不会选中任何元素：h1 > span { ...}

由于span是h1的”孙子元素”，h1没有直接的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择器不能隔代选取。

(3)相邻兄弟选择器(Adjacent sibling selector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。

相邻兄弟选择器在实践中有比较不错的应用，例如，你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。它的用法如下：

li + li { ...}

以上代码会选择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会选择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。

再比如：h1 + p { ...} 会选择所有紧跟h1后面的p兄弟元素。h1.warning + p { ...} 会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。

(4)几种派生选择器的结合使用

实际上，以上介绍的几种派生选择器可以结合使用，看下面的例子：

html > body li.warning + li { ...}

上面的选择器含义为：html元素的body子元素中，所有拥有warning类的li元素的相邻兄弟元素。

dreamweaver怎样创建新的CSS规则

步骤/方法 1 双击dreamweaver CS5图标 2 在菜单中单击“文件”选择“新建” 3 在新建文档窗口，选择“空白页”—“HTML”，文档类型选择“XHTML1.0 transitional”,单击“创建”按钮。 4 将插入点放在文档中，然后在菜单栏单击“格式”，在弹出的下拉菜单中选择“CSS样式”—“新建” 5 在“ 新建 CSS 规则” 对话框中，指定要创建的 CSS 规则的选择器类型：若要创建一个可作为 class 属性应用于任何 HTML 元素的自定义样式，请从“ 选择器类型” 弹出菜单中选择“ 类” 选项，然后在“ 选择器名称” 文本框中输入样式的名称。若要定义包含特定

dreamweaver如何建立cssdreamweaver如何建立css文件并导入HTML

dw如何创建一个新的css样式

方法一:新建一个记事本文档，修改后缀名为css。

方法二:在DW中选择菜单，文件-新建-选择CSS-创建。

dw中怎么定义新css？

1、在dreamweavercc中可以直接创建css文件，或在内面内手写输入css代码定义规则等等。

2、如果要使用可视化css编辑，可以使用css设计器，在默认的界面下，在软件窗口右侧的活动窗口内就可以找到css设计器。

例如：新建一个html文件，点击css设计器的“源”窗口的“+”号，选择创建css的方式，包括：新建css；附件已有的css或在页面内创建css样式。

3、点击“选择器“窗口的”+“号，选择body，可以看到下面的”属性“窗口内显示出可以编辑的属性列表，鼠标点击相应的属性就可以选择或填写数值进行编辑了，在编辑的时候在”设计“窗口会显示样式的变化。

4、最后如果是新建的css文件，保存路径要正确。

dw8p标签怎么加css样式？

1、创建css样式，点击窗口css样式，可以打开css样式编辑窗口，还可以直接在属性面板内创建。

2、点击属性面板的编辑规则，或者是css样式窗口的+号就可以打开新建css规则对话框。

3、选择要创建的css样式的内容。比如要为段落更改样式。

4、在弹出的定义对话框中，选择要更改的各种属性。比如把段落的字体大小改为16px，字体颜色改为红色。

5、点击确定，发现段落中的文字就出现了相应的效果。在head>中条件了css样式代码。

css设计器怎么用？

1、首先打开DreamweaverCC2018软件新建一个html文件，在右上角点击CSS设计器，并在下方点击加号，然后选择创建新的CSS文件：

2、在创建窗口中，点击浏览按钮。

3、然后选择站点创建好CSS文件夹，然后输入创建的CSS的名字，点击保存插件文件：

4、然后把添加为设置成链接，点击确定按钮：

5、添加完成后就可以在右侧的站点中的CSS文件夹下看到刚创建好的CSS样式表文件了：

6、此时在html文件中的head标签中，就多了一行链接到CSS文件的代码。在顶部tab标签中也可以看到链接的样式表：

7、接下来在html网页编辑页面，在body标签中输入一个p：

8、然后在顶部tab标签中选择刚才创建的CSS样式表，并在样式表中写一个样式，命名为aaa，并按下快捷键Ctrl+S保存样式表：

9、最后回到html编辑页面，在p标签中引入class，输入刚才写的样式的名称aaa并保存网页：

10、最后点击顶部的设计按钮，就可以看到实时效果了，此时css文件就成功链接进去了：

dw2020怎么新建css？

首先，新建一个HTML文档，这里以Divcss布局为例。

2.点击插入菜单下的“Div（D）”，弹出对话框。

3.点击“新建css规则”，定义一个选择器，“确定”完成。

4.设置大小及背景颜色，“确定”完成。

DW怎么设置超链接复合CSS样式？

1.打开文档,然后打开“CSS样式”面板。

2.在“CSS样式”面板中,点击右下角的“新建CSS规则”按钮,打开“新建CSS规则”对话框,在“选择器类型”中选择“复合内容(基于选择的内容)”项。在“选择器名称”中点击右边的下拉箭头,我们可以看到:a:link:未访问的超链接。a:visited:已经访问过的超链接。a:hover:鼠标指针移动到上面时的超链接。a:active:正在访问的超链接。

3.在“选择器名称”中选择“a:link”项,然后点击“确定”按钮,打开“CSS规则定义”对话框。

4.在“CSS规则定义”对话框中,在“分类”下拉框中选择“类型”,然后在右边“类型”部分设置链接字体的颜色、大小和修饰等。

Dreamweaver中CSS样式面板

本教程为大家介绍一下Dreamweaver中CSS样式面板，希望对大家有帮助。
一、打开CSS样式面板
使用“CSS样式”面板可以查看、创建、编辑和删除CSS样式，也可以将外部样式表附加到文档。
点击“窗口”菜单，选择“CSS样式”命令，即可打开“CSS样式”面板，如下图所示：
如果要调整“CSS样式”面板的宽窄与大小。
二、“正在”模式下的“CSS样式”面板
在“CSS样式”面板中点击“正在”按钮，使“CSS样式”面板处于“正在”模式下，在此模式下，“CSS样式”面板将显示三个窗格面板。如下图所示：
1. “所选内容的摘要”窗格
“所选内容的摘要”窗格显示当前正在编辑的文档中所选HTML元素的CSS属性的摘要以及它们的值。该摘要显示直接应用于所选HTML元素的所有规则的属性。并且只显示已设置的属性。
例如，下面创建两个样式：
p{ /* 标签样式：p规则 */ font-family:"宋体"; font-size:14px; Pne-height:24px; } .p1{ /* 类样式：.p1规则 */ font-size:18px; font-family:"微软雅黑"; }
分别应用于下面的p元素中：
p段落一/p p class="p1"段落二/p
（1）当我们将光标移动到“p段落一/p”上面时，会在“所选内容的摘要”窗格中看到p规则的所有属性出现在窗格中：
（2）当我们将光标移动到“p class="p1"段落二/p”上面时，会在“所选内容的摘要”窗格中看到.p1规则的所有属性出现在窗格中：
.p1规则的属性首先继承了p规则的全部，再用自身的相同属性替换了p规则中已经存在的属性，然后加上p规则中没有的属性，共同组合成了“所选内容的摘要”窗格中的属性列表。
提示：在“所选内容的摘要”窗格中如果双击某一个属性，则会打开“CSS 规则定义”对话框，可以修改该属性。
2. “规则”窗格
“规则”窗格显示在“所选内容的摘要”窗格中选择的CSS属性所在规则的规则名称，以及包含该规则的文件的名称。如，在“所选内容的摘要”窗格选择了“font-family属性”，在“规则”窗格中显示了此属性是在“.p1”规则中定义，这个规则处于“08代码测试.html”文件中。
在“规则”窗格中：
点击右上角的“显示所选属性的相关信息”按钮，可以查看所选属性的相关信息。
点击“显示所选标签的规则层叠”按钮，可以查看规则的层次结构，直接应用规则的标签显示在右列。
3. “属性”窗格
在“所选内容的摘要”窗格中选择某个属性时，这个属性所在的规则中的所有属性都会出现在“属性”窗格中。如果在“规则”窗格的“显示所选标签的规则层叠”视图中选择了某一个规则，这个规则的所有属性也会出现在“属性”窗格中。
在“属性”窗格中点击任意一个属性的属性值，都可以快速修改该属性。
在“属性”窗格中也可以点击左下角的“显示类别视图”、“显示列表视图”或“只显示设置属性”按钮，进行视图切换。
三、“全部”模式下的“CSS样式”面板
在“CSS样式”面板中点击“全部”按钮，使“CSS样式”面板处于“全部”模式下，在此模式下，“CSS样式”面板只显示两个窗格面板。如下图所示：
“所有规则”窗格显示当前文档中定义的CSS规则以及附加到当前文档的样式表中定义的所有CSS规则的列表。使用“属性”窗格可以编辑“所有规则”窗格中选择的任一规则的所有CSS属性。
当在“所有规则”窗格中选择一个CSS规则时，在“属性”窗格中会显示该规则中定义的所有属性，此时可以快速修改该规则的属性，不管它是嵌入到当前文档中还是链接到附加的样式表中，同样都可以修改。
在“全部”模式下，在“属性”窗格中同样可以点击左下角的“显示类别视图”、“显示列表视图”或“只显示设置属性”按钮，进行视图切换。
四、“CSS样式”面板右下角按钮
在“CSS样式”面板右下角有五个按钮，当鼠标停留每一个按钮上面时，会显示该按钮的名称。如下图所示：
从左到右依次是：
“附加样式表”按钮：打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。
“新建 CSS 规则”按钮：打开“新建 CSS 规则”对话框，在其中选择要创建的样式类型。
“编辑样式”按钮：打开“CSS 规则定义”对话框，在其中编辑当前文档或外部样式表中的样式。
“禁用/启用 CSS 属性”按钮：当在“所选内容的摘要”窗格或“属性”窗格选择一个属性时，点击此按钮，可以给这个属性加上注释标记（/* 和 */），表示暂时不起作用。如果想让该属性重新起作用时，再次选择该属性，并点击该按钮即可。
“删除 CSS 属性”按钮：当在“属性”窗格中选择一个已经设置属性值的属性时，点击此按钮，可以删除这个属性。

用FrontPage 2000做样式表

Dreamweaver以其强大的功能正在扩张到更多"网虫"的硬盘里，然而Dreamweaver并非每个功能都那么出色。至少，在样式表（CSS)设置方面就显得太专业，让这些英文不好的"虫虫"们大伤脑筋。经过N次下载、安装，到头来我才发现原来最好的早已在自己的手中，那就是被我封存很久的-- FrontPage2000。下面就让我带领大家一块来分享"傻瓜"化软件带来的快乐吧。
一、三种添加CSS的方式
在FrontPage 2000里可以通过三种方式给网页增加样式表。
1.页面链接一个外部的样式表文件，这种方法可以使多个页面使用同一个样式表文件，方便保持页面的主题。步骤：启动FrontPage 2000，然后依次点"文件"、"新建"、"网页"，打开FrontPage 2000的新建对话框，选择"样式表"选项。在这些样式表中有FrontPage 2000自带的很多样式表供你参考和修改。当然如果你对CSS熟悉的话，你也可以使用空白的样式表，自己重新创建一个。
2.通过在FrontPage 2000中创建一个样式表单，此时样式表就是网页的一部分，直接位于HTML文档的之间。这个实际上不算创建，只要把已经创建好的样式表直接复制下来，然后选择网页编辑的"html"选项，然后粘贴到〈 HEAD 〉之间就可以了。
3.通过使用内含样式表元素，单独指定样式表。在FrontPage 2000编辑一个页面的时候，只要选中要发生变化的文字，然后点击右键，选择"网页属性"就可以随时随地进行可视化操作了。
二、内含式样式表的使用
下面就以修改美化一个搜索框为例，给大家介绍一下内含式样式表的使用。
现在就开始我们的美化之路。打开FrontPage 2000，然后调入这个页面。接下来就先对输入框进行处理。用鼠标左键选中那个最长的输入框，然后点击右键，选择"表单域属性"，出现文本框属性。
然后点击"样式"，接着选择"格式"中的"边框"按钮，出现边框与阴影对话框。
因为要保持表格的统一，我们在"设置"中选择"自定义"，然后选择"样式"中的"实线"。最重要的就是应用边框的设置。点击方框，四周出现的四个小按钮分别代表着文本输入框的四条边框。为了和文本输入框外面的表格统一，这里的宽度也选择为"1"，然后"确定"。
接着用鼠标左键选中搜索按钮，点鼠标右键，选择"超链接属性"就会出现窗口。
选择"样式"按钮，再选择"浏览"插入我们事先作好的搜索图片。
仍旧用鼠标左键选中那四个字，然后再点击右键，选择"超链接属性"，弹出Windows窗口。
选择"背景"选项，然后选中"启用超链接翻转效果"，然后点"翻转样式"弹出新的Windows窗口.
在这里我们可以一目了然地设置要实现的翻转效果。为了突出"搜索帮助"四个字，我们把字体设置成12pt,这样当鼠标放上去的时候，字体就会从9pt变成12pt,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜色以及其他样式。通过内含式样式表的使用，我们很轻松地美化了搜索框。