整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用 CSS 选择器和属性为网页设置主题样式

叠样式表 (CSS) 是一种编程语言,可用于确定电子文档的设计。 借助简单说明(以清晰的源代码形式呈现),可以根据需要调整布局、颜色和版式等网站元素。 由于级联样式表,文档的语义结构和内容不受影响。 CSS 出现于 20 世纪 90 年代中期,现在被认为是万维网上的标准样式表语言。

什么是 CSS?

CSS 与 HTML 一样,是万维网的核心语言之一。 当您使用 HTML 将文本添加到网站并按语义构建其结构时,您可以使用 CSS 定义其内容的设计。 虽然 HTML 和 CSS 结合使用,但 CSS 设计指令和 HTML 元素是分开存在的。 这意味着即使没有 CSS,机器也可以读取电子文档。 在 CSS 的帮助下,浏览器内容可以在视觉上准备好并以吸引人的方式呈现。

CSS 是一种“生活标准”,由万维网联盟继续开发。 因此,总是有新的功能和实际应用有待发现。 广泛应用的样式表语言出现于 20 世纪 90 年代。 使用样式表来显示 Web 内容的想法在当时已不再是全新的。 但 CSS 与 HTML 中已存在的其他面向显示的元素在一个重要方面有所不同:用户现在可以选择为跨多个文档和单个样式表的元素组定义设计规则。

定义:CSS(层叠样式表)
用于网站视觉设计的编程语言。 例如,使用层叠样式表,您可以确定显示 HTML 元素的字体、大小或颜色。

CSS 的优点和应用领域

一个成功的网站不仅取决于内容,还取决于良好的设计。 用户很快就会对不用户友好或结构良好的网站失去兴趣。 在这里,CSS 提供了一系列纯 HTML 中不提供的设计选项。

例如,CSS 允许您集中控制某些规范。 这意味着可以使用单个命令来识别单个文档中的相似元素(例如所有超链接或图像)并对其进行格式化。 设计指令不必采用 HTML 文档本身内部样式表的形式。 如果将 CSS 指令保存在外部样式表(即单独的文件)中,则这也可以用于其他文档。

除了与 HTML 元素的颜色、形状和排版相关的基本显示指令外,CSS 中现在还有更复杂的模块。 例如,使用这些,您可以根据输出媒体定义动画或不同的表示形式。 这样,可以为所有可能的媒体以相同的方式准备相同的 HTML 文档。 由于本文档中的内容和设计是分开的,因此网站的代码更加清晰。 相关的样式语言 SASS 提供了更多的可能性,但它并没有完全取代 CSS。

CSS 语句的结构

CSS 语句确定电子文档中的元素应具有的值或属性。 在其基本结构中,该指令由选择器和大括号组成。 声明列在括号内,并用分号分隔。 每个声明由名称、冒号和特定值组成。 在最终声明之后和右括号之前,可以添加另一个分号,但这不是强制性的。 例如,下面示例中的 CSS 指令要求标题 h1 以蓝色显示,字体大小为 12:

h1 {color:blue; font-size:12px}

如何将 CSS 集成到您的网站中?

可以使用内部和外部样式表将 CSS 合并到电子文档中。 此外,可以使用内联样式将属性直接放置在元素的 HTML 源代码中。 下面,我们概述了将 CSS 集成到 HTML 中的三种方法。

外部样式表

在外部样式表中,CSS 指令通过“.css”结尾在外部文件中定义,并通过“link”标签集成到 HTML 文件中。 这是最常见的方法,因为内容和设计完全分开,并且可以轻松进行更改。 该链接在 HTML 文档的“head”区域中创建,如下所示:

<!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" href="stylesheet.css">
    </head>
<body>
    <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</body>
</html>

内部样式表

您可以在此处将所有 CSS 指令添加到 HTML 文件中。 请注意,这些仅适用于相关文件。 对于内部样式表,将“style”元素插入 HTML 文档的“head”区域,如下所示:

<!DOCTYPE html>
  <html>
  <head>
  <style>
  h1 {color:blue; font-size:12px;}</style></head>
  <body>
  <h1>这是一个标题</h1>
<p>这是一个段落</p>
  </body>
</html>

内联样式

与内部样式表一样,CSS 指令包含在 HTML 文件中。 然而,有一个重要的区别:相应的属性直接位于元素的开始标记中,并且不适用于任何其他元素。 如果您不想进行一般设计说明,则此方法特别有用。

<!DOCTYPE html>
  <html>
  <body>
  <h1 style="color:blue; font-size:12px;">这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>

CSS 和 HTML 的交互

上面的例子表明 CSS 只能与经典的 HTML 结构结合使用。 由于 HTML 通过段落、列表和表格构建内容,而 CSS 负责视觉设计,因此这两种网络语言相辅相成,并以这种方式紧密相连。 编写级联样式表通常围绕设计“盒子”进行。 HTML 文档的结构基于嵌套原则,其中各个元素像盒子一样相互叠放。 网站上占用空间的每个“盒子”都具有以下属性:

  • padding:元素内容周围的空间
  • border:位于 padding 外部的线
  • margin:边框外的空间

然后通过指定大小、形状和颜色来格式化这些“框”。 除了这些简单的属性之外,还有更复杂的 CSS 指令,用于在文本中插入阴影、添加图像过滤功能以及突出显示表单和其他元素。

一旦您了解了样式表语言的基本原理,它们的应用就足够简单了。 了解有关 CSS 顶级技巧的更多信息,这些技巧将使您的网站看起来更加专业。

片编辑:如何在Lightroom中创建HTML Web画廊?



随着iPad和iPhone的日益普及,我们大多数人不再适合创建基于Flash的Web画廊 - 它们无法在这些设备上轻松查看。如果您希望几乎每个人都能够看到您的画廊,那么您需要将它们创建为HTML画廊而不是Flash。

要在Lightroom中创建Web画廊,请首先将图像放入集合中。这使您可以更轻松地处理图像,并且可以保存图库,以便将来根据需要进行编辑。选择您的收藏并切换到Web模块。从“布局样式”选项中,您可以选择Lightroom HTML库,或者更简单地从屏幕左侧的“模板浏览器”面板中选择基于HTML的库。如果您在预览区域中查看,HTML图库模板的左下角都有字母HTML。选择要使用的模板。


从工具栏(如果不可见则按T键),如果您选择了一个集合,请选择所有胶片照片,这会将所有图像添加到您的图库。您在编辑区域的屏幕上看到的是您的网络图库的实时版本。您可以单击任何图像以查看它在Web上的外观。


打开“站点信息”面板,然后键入站点标题,集合标题和集合描述。如果您不想使用所有这些,只需删除您不想使用的项目的占位符文本,并且将释放它们在模板中占用的空间以用于您的图像。对于“联系信息”,请根据需要键入您的联系人姓名,然后填写“Web或邮件链接”,这将自动链接到Web画廊中的联系人姓名。


您可以在图库中添加标识牌,如果需要,它将位于网站标题上方。如果需要,您可以通过完成Web或邮件链接框将其链接回您的站点。


使用“调色板”选项可以更改网站模板中各种元素的颜色。

在“外观”面板中,您可以设置缩略图图像网格大小 - 默认为3 x 3,不能小于任何小,但可以大得多。如果要在图像上显示单元格编号,可以这样做 - 当您需要为查看者提供一种简单的方法来识别他们喜欢的图像时,这非常有用。图像按顺序编号,如果您有多个页面,则第二页上的图像将从第一页的编号顺序继续。


您可以通过调整“大小”滑块来控制“图像”页面上的完整大小图像的大小。您还可以将图片边框添加到图像页面中的图像。请注意,“外观”面板分为“通用设置”,“网格页面”和“图像页面”,允许您进行影响整个图库的更改,仅影响网格页面或仅影响图像页面。


在“图像信息”面板中,您可以选择为图像添加标签。它们仅出现在图像页面上。您可以选择图像上方显示的标题和图像下方显示的标题。例如,对于每一个,您可以从图像元数据中获取文本,并且没有理由不能将标题设置为标题元数据,而将标题设置为您的设备元数据。


在输出设置中选择较大尺寸JPG图像的质量 - 0是低质量,100是高质量。如果要在图像中包含元数据,请选择要包含的内容 - 您的选择是“仅限版权”还是“全部”。

如果需要,还可以添加水印。如果您选择添加水印,您将在图像页面和索引页面上看到它,以便您可以检查它是否是您想要的。选择是否锐化图像 - 此锐化仅在图像输出时应用,因此您不会在屏幕上看到它。如果您不确定要使用什么,请启用锐化并将其设置为标准。


完成后,单击“创建已保存的Web画廊” - 这是Lightroom 4中的新选项,它显示在主编辑区域的右上角。键入Web库的名称,然后单击“创建”。这样做可确保库已保存,一旦完成此操作,Lightroom将从现在开始跟踪您的更改。将来您可以通过单击Lightroom为您创建的特殊集合返回Web画廊。



配置好所有内容后,单击“上载”以呈现库图像,创建必要的html代码并将其全部自动上传到服务器。


Lightroom中的HTML画廊并不是城里最漂亮的画廊,但是几乎任何设备都可以使用画廊,这绝对是激励他们使用它们代替Flash画廊。

选按钮和复选按钮在网站的表单中经常用到

在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。

大家都知道,要覆写这两个按钮默认样式比较困难。

在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。

首先建立表单的html布局:

接着就是样式css创建

效果图如下:

是不是比默认的样式好看多了。当然实现这些自定义选择框和单选框还有很多其他方法,比如用背景图片实现等等