找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › 技术交流区 › 前端技术交流 › 查看内容
发新帖

断天涯大虾

社区贡献组

269

主题

272

帖子

1655

积分

社区贡献组

积分
1655

微信认证勋章

最新发帖

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

断天涯大虾
社区贡献组   /  发表于：2016-12-28 10:04  /   查看：4212  /  回复：0
本帖最后由 断天涯大虾 于 2016-12-28 10:19 编辑

介绍
我们已经使用基本的 HTML 编写了一个网页。但是，写出来的 HTML 代码的网页看起来很平淡，没有吸引力。
如何改善这种很平淡的页面呢？
让我们开始使用网页的基本样式来改善页面效果，我们将会使用到 CSS 的功能。
正式开始 CSS 是层叠样式表的缩写，它是为网页添加样式的通用语言，在所有浏览器中都支持。最新的标准是 CSS3，这与早期版本完全向后兼容。CSS3 的规范是由 W3C 开发的，目前仍处于开发阶段，其最新的版本是 CSS Snapshot 2010。

打开你的文本编辑器，键入下图上半部分中显示的 HTML 代码。完成时，保存成 .htm 或 .html 文件，并将其拖入到浏览器中，你将会在网页中看到下图的下半部分。
如果说，你的客户看到了网页，要求最大标题设为蓝色，并且放置在网页的中心，你可以做到吗？单独使用 HTML，毫无疑问是做不到的。别着急！添加以下 CSS 代码（下图中蓝色的部分）到 HTML 代码中，就能满足客户的需求。

基本的CSS语法
刚才，我们已经添加了一个 CSS 样式到我们的网页中。让我们来看看基本的 CSS 语法。

步骤1 -在 head 部分，添加开始标签 <style> 和结束标签 </style>。这部分区域将用来设计 CSS 样式规则。
  1. <style>
  2.     /* Add CSS rule set here */
  3. </style>
复制代码
需要注意的是，/ *和* /用于封装 CSS 中的注释。注释是用来解释代码的，浏览器会将其忽略。

第2步 -选择我们想要添加样式的 HTML 元素。这个例子中是 <h1> 标签，在 CSS 的专业术语中，我们将h1称为选择器。h1 后面的 {  }，用于将 h1 的样式声明括起来。
  1. <style>
  2.     h1 /* This is the selector */
  3.     {
  4.        /* Add style declarations here */
  5.     }
  6. </style>
复制代码

第3步-添加2个样式声明，一个用于将 <h1> 的内容设置为 blue ，另一个设置为居中显示。
  1. <style>
  2.     h1
  3.     {
  4.          color:blue;        /* This is a declaration */
  5.          text-align:center; /* This is another declaration */
  6.     }
  7. </style>
复制代码
每个声明包含一个属性和一个值，用冒号分隔（：），并以分号结束（;）。在我们的例子，color 是属性，blue 是值。
介绍完 CSS 的基本语法。让我们一起来看看：
  1. <style> /* Start of CSS block */
  2.     h1  /* This is the selector */
  3.     {
  4.          color:blue;        /* This is a declaration */
  5.          text-align:center; /* This is another declaration */
  6.     }
  7. </style> /* End of CSS block */
复制代码
要添加样式到一个 HTML 元素中，比如 <p>，简单的为选择器 p 添加样式声明，其后的 h1 也是。顺序并不重要。
  1. <style>
  2.     h1
  3.     {
  4.          color:blue;
  5.          text-align:center;
  6.     }
  7.     p
  8.     {
  9.          color:green;
  10.          text-align:right;
  11.     }
  12. </style>
复制代码
看到你完成的很好，你的客户又有了新的需求：需要将第二行字设为红色、左对齐。
CSS选择器
CSS 选择器能够帮助我们查找，选择，声明 HTML 元素的样式描述。

元素选择器
在前面的例子中，我们已经通过 HTM L标签使用了 CSS 选择器，就像对 h1，h3 和 p 元素应用相应的样式。请记住，一个网页可以包含很多这样的标签，尤其是 <p> 标签。P 选择器会将相同的样式应用到整个网页中的所有 <p> 标签中，无一例外。这意味着，所有的 <p> 标签将是绿色和右对齐的。这种地毯式的样式应用将会让单独段落的定制化样式无法实现，因为所有的段落都受 p 选择器的影响。
（将下面的代码添加到 HTML 文档的描述部分。）
为了克服这种局限性，我们将引入另外2种选择器- ID选择器和类选择器。

ID选择器
每个 HTML 标签都有一个 id 属性，具有和其它不一样的命名。例如，HTML 文档中有2个 <p> 标签，我们可以将它们中的一个命名为“para1”，而另一个命名为“ para2”。要在 CSS 代码中选择它们，需要在 ID 名称之前添加“＃”。命名为“para1”和“ para2”的选择器，将会通过“ #para1”和“ #para2”进行区分。我们可以通过 ID 名称作为选择器，来为它们应用不用的 CSS 样式。
你可能已经注意到具有 ID 名称 para1 和 para2 的两个段落保持居中属性，即使在各自的选择器中并未设置居中属性。在这种情况下，他们都继承了父级元素的 text-align 属性。

注意以下关于 id 选择器的几点：你可能已经注意到具有 ID 名称 para1 和 para2 的两个段落保持居中属性，即使在各自的选择器中并未设置居中属性。在这种情况下，他们都继承了父级元素的 text-align 属性。
  • 不要以数字开头一个 ID 名称
  • ID 名称应该是一个页面内唯一的
  • 如果想要对页面中的单个元素使用样式时，可以使用 ID 选择器


类选择器
类似地，每个 HTML 标签都有一个class属性，具有和其它不一样的命名。例如，如果 HTML 文档中有4个 <p> 标签，我们将其中的两个命名为“group1”。要在 CSS 代码中选择它们，需要在其类名之前添加一个点字符（.）。我们可以通过类选择器名将一组 CSS 样式共享给相同类名的一组 HTML 元素。
类名不要以数字开头注意以下关于类选择器的几点：
  • 类名不要以数字开头

  • 当你想要选择网页中的一组元素时，请使用类


选择器的链接
如果一些元素需要设置为相同的样式，我们可以通过最少量的代码将它们一起设置。

CSS的位置
目前，我们都是将 CSS 样式放置在 HTML 文档的头部，这种样式被称为内部样式。实际上还有另外2种放置 CSS 样式表的方式- 外部样式和内联样式。

内部样式表
我们已经很熟悉了内部样式表。当一个 HTML 文档具有独特的风格时，可以使用内部样式。然而，当许多 HTML 文档共享同一个样式的情况时，这种方式是非常低效的。为此，我们应该去使用外部样式表。

外部样式表
顾名思义，外部样式表放置在所有 HTML 文档的外部。每个文档都会通过头部的 <link> 标签链接到外部样式表。下面，让我们一起看看是如何实现的。

我们会将 HTML 文件中 <style> 和 </style> 标签之间的代码剪切并粘贴到一个文本编辑器中。将这个文件命名为“mystyle.css”并保存在 HTML 文档的同一文件夹中。请注意，.css 是外部样式表的文件扩展名。
  1. h1,h2,p
  2. {
  3.    color:red;
  4.    text-align:right;
  5. }
复制代码
CSS 样式已经从 HTML 文件中转移出来了。要在 HTML 文件中添加“mystyle.css”链接，需要在 HTML 文档的头部添加如下的代码：
  1. <link rel="stylesheet" type="text/css" href="mystyle.css">
复制代码
将 HTML 文件拖入浏览器中，将会看到和之前相同的网页。
当我们想要在站点的多个网页中应用相同的样式时，使用外部样式表是很理想的。我们可以在外部样式表中做一个改动，就能改变整个站点的外观和感觉。这大大有助于网站的维护。

内联样式表
内联样式是通过以下代码中 HTML 标签的属性来声明样式的：
  1. <p style="color:red;text-align=center;">Inline Style Sheet</p>
复制代码
然而，这种在 HTML 标签中内嵌 CSS 也导致了内容呈现的混乱，不利于 CSS 的引进。所以，应该尽可能避免使用内联样式表。

样式表的优先级
不难想象，一个 HTML 元素具有内联、内部和外部样式这三种样式的情形。在这种情况下，其风格应该是混乱的。
下面是起作用的优先级顺序（从高到低）：
  • 内嵌样式表（内部 HTML 元素）
  • 内部样式表（内部 head 部分）
  • 外部样式表（外部的 .css 文件）
  • 浏览器默认的（没有指定任何样式表）


请记得我的这个经验法则-“ 最接近元素的样式，优先级最高 ”。

CSS属性
在前面的例子中，我们已经使用了“color”和“ text-align" 属性。它们只是众多 CSS 属性中的2个。CSS 属性的名称是相当直观的，也就是说，它们会起到它们名称的作用。
下面，我们讨论以下的三种属性（背景/文本/字体）。

CSS背景
可以通过以下的 CSS 背景属性设置网页的背景：
  • 背景颜色

我们使用 backgrounf-color 属性来设置任何 HTML 元素的背景颜色，包括 <body> 标签。
  • 背景图

我们使用 backgroung-image 属性将背景图像嵌入到任何 HTML 元素，添加以下代码片段到 HTML 文件中，修改 url 参数使其指向一个图像文件：
  1. body{background-image:url("logo250x135.gif");}
复制代码
背景显示在浏览器中，整个网页的背景是图像的平铺效果。
  • 背景重复

需要背景图像水平重复的，使用 background-repeat:repeat-x。
  1. body
  2. {
  3.     background-image:url("logo250x135.gif");
  4.     background-repeat:repeat-x;
  5. }
复制代码
需要背景图像垂直重复的，使用 background-repeat 属性repeat-y。
  1. background-repeat:repeat-y;
复制代码
如果不需要左上角的 backgroung-image 有任何重复，改变背景重复属性值为 no-repeat。
  1. background-repeat:repeat-y;
复制代码

背景位置
需要固定背景图像到屏幕的某些位置上，设置 backgroung-position属性为“top right”。
  1. body
  2. {
  3.     background-image:url("logo250x135.gif");
  4.     background-repeat:no-repeat;
  5.     background-position:top right;
  6. }
复制代码

CSS文本
网页上的任何文本效果，都可以通过以下的 CSS 属性来设置：
  • 颜色

color属性用于设置任何 HTML 元素的文本颜色。
  • 文本对齐

text-align 属性用于设置文本的水平对齐方式。可以采用以下的四个值的一个：center、left、right、或 justified。
  • 文字修饰

text-decoration 属性用于设置或者取消任何 HTML 内容元素的装饰。可以采用以下的四个值的一个：overline、line-through、underline、none.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.     #overline{text-decoration:overline;}
  6.     #strikethrough{text-decoration:line-through;}
  7.     #underline{text-decoration:underline;}
  8. </style>
  9. </head>
  10. <body>
  11.     <p id="overline">Under one roof</p>
  12.     <p id="strikethrough">Cancel an appointment</p>
  13.     <p id="underline">On solid footing</p>
  14. </body>
  15. </html>
复制代码

  • 文本转换

none 值用于移除超链接的默认下划线。
text-transform 用于将任何 HTML 元素的文本内容转换为大写，小写，或根据值设置是否大写。
  • 文本缩进

text-index 属性是用于指定文本的首行缩进量。
CSS字体
文本的字体效果可以通过以下的 CSS 属性来设置：

字体系列
font-family 属性用于 HTML 文档中的文本的字体。有两种类型的font-family：



    • 指定的系列名称，如Times New Roman、 Verdana、arial等。
    • 通常字体系列名称，如sans-serif、Serif、fantasy、monospace等。


以下是常见的几种 font-family 属性的风格名称。字体列表用逗号分隔。对于名称中有空格的字体，使用引号将其括起来，如"Times New Roman"：
  1. font-family:"Times New Roman",Cambria,Serif;
复制代码
如果浏览器不支持第一个字体，则会尝试下一个。经验法则是，你应该总是以你想要的字体风格名称开始，并以通常字体系列结尾。这将允许浏览器在所有字体不可用的情况，选择近似的字体集合。
试试下面的例子，并在浏览器上查看结果。

字体样式
font-style 属性可以采用以下三个值中的一个- normal，italic 或 oblique。将以下 CSS 代码添加到之前的例子中查看各自的效果。
  1. .serif
  2. {
  3.     font-family:"Times New Roman",Georgia,serif;
  4.     font-style:normal;
  5. }
  6. .sansserif
  7. {
  8.     font-family:Arial,"Century Gothic",sans-serif;
  9.     font-style:italic;
  10. }
  11. .monospace
  12. {
  13.     font-family:"Courier New",Monaco,monospace;
  14.     font-style:oblique;
  15. }
复制代码

字体大小
我们可以使用 font-size 属性并通过以下三个不同的测量单位来设置文本的大小：pixel、em 或 percentage。
让我们一起检查一下浏览器的输出。第一段是100%的字体大小，默认使用 CSS 中的 body 选择器。相比较，第二段为50％的字体大小。对于第3段和第4段，他们的字体大小相同。查看他们各自的 CSS 声明，它们被设置为 16px 和 1em。换句话说，1em 等同于 16px。
注意事项
让我们一起回顾一下今天的学习要点：
  • CSS 不区分大小写
  • 选择器名称不能以数字开头
  • 尽可能避免使用内嵌样式表

第二次的学习就到这里。


学习了第二节CSS3的选择器和基本样式知识，能够帮助我们更好的进行前端开发。同时，还可以借助一些前端开发工具。如Wijmo，这是一款大而全面的前端 HTML5 / JavaScript UI控件集，能为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。

原文链接：https://www.codeproject.com/Articles/756614/Beginners-Guide-to-HTML-CSS-Styling-Your-First-W
   
关于葡萄城：全球最大的控件提供商，世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商，为超过75%的全球财富500强企业提供服务。

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部