HTML5/CSS3 入门指南 - 样式化您的第一个网页

引言

本文是 HTML5/CSS3 大赛的延续。您可以阅读第一部分 https://codeproject.org.cn/Articles/751542/Beginners-Guide-to-HTML-CSS-Building-the-Basics

层叠样式表 (CSS) 是一种用于指定文档如何呈现给用户的语言。CSS 主要设计用于将文档内容与文档呈现（包括布局、颜色和字体等元素）分离开来。

CSS 中的层叠是什么意思？

样式是通过从更通用的规则向下层叠到所需的特定规则来选择的。选择最具体的规则。样式信息的三种主要来源构成了一个层叠。

1. 浏览器为标记语言提供的默认样式。
2. 用户在阅读文档时指定的样式。
3. 文档作者链接到文档的样式。这些可以指定在三个地方：

• 在外部文件中。
• 在文档开头的定义中。
• 在文档正文的特定元素上。

为什么使用 CSS？

1. CSS 帮助您将文档的信息内容与其显示方式的详细信息分开。
2. 将样式与内容分开，以便您可以：
• 避免重复
• 使维护更容易
• 对相同内容使用不同的样式以达到不同目的

现在，我们知道了 CSS 是什么以及它对 Web 应用程序有多大用处，那么让我们开始学习 CSS 基础吧。

设置 CSS 文档

CSS 文档可以使用任何文本编辑器创建，文件扩展名为“.css”。让我们为本文创建一个“Styles.css”。

CSS 基础

CSS 声明。：如上所述，每个规则或声明都将在 CSS 文档中提及。属性和值对称为 声明。声明也分为两部分，用冒号分隔：属性和值，下面是 CSS 规则声明的示例。

下面是使用 CSS 的基本示例：

<h1>This is heading with Red color </h1> 

Styles.css 中的 CSS 样式声明

h1{
    color:red;
} 
 

CSS 选择器

选择器是用于选择要设置样式的元素（们）的模式。

• 基本选择器

• 类型选择器
• 类选择器
• ID 选择器
• 通用选择器
• 属性选择器

让我们逐一了解每种选择器类型。

• 类型选择器：如果您想根据元素的类型来定位页面上的所有元素，例如：您想为所有锚点（<a>）标签应用蓝色样式的规则。类型选择器将为指定类型的每个元素应用规则。

<div> 
    <a href="#">CodProject</a>
    <ul>
        <li><a href="#"> Style can be applied at any levl</a></li>
    </ul>
</div> 
/*style.css */
a{
    color:blue;
    text-decoration:underline;
} 

• 类选择器：类用于可重用性。如果您想为所有具有相同类名的通用元素声明一个通用规则怎么办？类选择器是通过在类名之前使用“.”来声明的。

 <div>
    <ul>
        <li><a href="#" class="MenuItems"> Home</a>
        </li>
        <li><a href="#" class="MenuItems"> About us </a>
        </li>
        <li><a href="#" class="MenuItems"> Contact </a>
        </li>
    </ul>
</div>
in styles. css
.MenuItms { /* . followed by the class Name
    color:red;
    text-decoration:underline;
} 

• ID 选择器：ID 选择器有助于为具有 ID 的特定元素应用样式规则。ID 选择器用于应用唯一的规则。ID 选择器通过在元素 ID 前面使用“#”来声明。

<p id="para1">
    text for styling the paragraph tags. ID selectors
</p> 
#para1{
        font-size:25pt;
        font-weight:bold; 
} 

• 属性选择器：我们可以根据属性来样式化我们的网页。属性选择器接受 [attribute=valueToMatch]。

a[title]{ color:red;} 

img[alt="txt"]{color:yellow;} 

a[href^="http"] { 
margin:5px; padding:2px; 
} 

img[src$=".gif"]{border:1px solid red;}     

背景和文本

在 CSS 中，我们可以为文本做很多样式，有很多 CSS 规则，我们在此列出它们：

tr>>

p{font-family:"Times New Roman", Times, serif;} 

#p1{font-style:normal} 
#p2{font-style:italic} 

font-size: xx-small  /* absolute<absolute-size> values */
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large

font-size: larger    /* relative<relative-size> values */
font-size: smaller

font-size: 12px      /* lentgh<length> values */
font-size: 0.8em

font-size: 80%       /* <percentage> percentage values */   

font-weight: normal
font-weight: bold

font-weight: lighter
font-weight: bolder

background-color: red
background-color: rgb(255, 255, 128)
background-color: hsla(50, 33%, 25%, 0.75)
background-color: currentColor
background-color: transparent
background-color: #bbff00

 background-image: nonebackground-image: url(http://www.example.com/images/bck.png)

background-repeat: repeat-x     
background-repeat: repeat-y
background-repeat: repeat
background-repeat: no-repeat

#someDiv{
  background-image: url("logo.png");
  background-position: top;
} 

CSS 样式指南以有效使用

1. 使用 ID 选择器：与类和其他选择器相比，ID 的速度更快。
2. 使用 CSS Sprites：CSS Sprites 对于减少服务器请求次数非常有用。将您的背景图像合并为单个图像，然后使用 CSS background-image 和 background-position 属性显示所需的图像。
3. 使用 CSS Reset：浏览器附带不同的默认样式：http://meyerweb.com/eric/tools/css/reset/
4. 最小化 CSS（删除多余的空格）或者您可以使用在线最小化工具。
5. 尝试使您的选择器更短，这将提高可读性。

参考文献

1. Mozilla Developer Network https://mdn.org.cn/en-US/docs/Web/CSS/Reference
2. CSS 工作原理 http://www.slideshare.net/webdevninja/how-css-works
3. CSS 样式指南 https://css-tricks.cn/css-style-guides/
4. Google CSS 样式指南 http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

关注点

在撰写文章时，我了解了 CSS Reset 以及 CSS 在浏览器中的工作原理

历史

版本 1.0 - 初始版本