开始学习使用CSS

DebugUsery
66 阅读4分钟

开始使用CSS

在这篇文章中，我将解释如何使用不同的样式来选择元素，如何对所选择的元素进行各种操作，改变元素的字体和宽度，以及如何使用CSS来为HTML样式。

CSS是层叠样式表（cascading style sheets）的缩写。它是一种用于为用HTML等标记语言编写的文档的显示样式的语言。与HTML和JavaScript一样，CSS是全球网络的一项基础技术。

CSS的功能

CSS帮助开发者改变网页的表现形式，使其对不同类型的小工具作出反应。它还可以帮助他们在整个网站页面中统一应用列表和标题等元素。

1.选择元素

使用元素的名称

开发人员选择元素的一种方法是使用它的标签，例如p,h2,h1 等，如下例所示。

<style>
   p{}
</style>

p 在这种情况下是选择器。它针对HTML文档中的所有段落。

使用一个类名

要使用一个元素的类作为选择器，你需要在样式块中的类名前加一个句号，例如.red-text ，然后是声明块{} ，如下图所示。

<style>
   .red-text{}
</style>

使用一个id选择器

要使用一个元素的id作为选择器，你需要在它前面加上# ，然后再加上该元素的id。重要的是，id属性只适用于一个元素。

与类的声明相比，id也更具体，因此，如果它们碰巧发生冲突，它将被优先考虑。Id选择器的一个例子是#Properties-of-CSS 。

它可以像这样在HTML中设置。

<h2 id= "Properties-of-CSS">

然后你可以像这样通过id来选择一个元素。

 <style>
  #Properties-of-CSS{}
 </style>

使用内联样式

虽然不鼓励使用内联样式，但你可以使用内联样式为元素添加样式。在下面的例子中，我们使用内联样式将h2 元素的颜色设置为红色。我们通过向h2 标签添加style 属性来实现这一目的。

<h2 style=" color: red;">Properties of CSS </h2>

2.在CSS中操作颜色的不同方法

使用颜色的名称

使用CSS，你可以改变文本的颜色。要做到这一点，你需要用适当的选择器来定位你需要修改文本的元素。

然后，你可以使用color 属性来指定你希望的文本颜色，如下图所示。这可以在一个单独的样式表中完成，也可以在你的HTML文件中，像我在下面的例子中那样，添加style 元素。

<style>
 h2{
     color: red;
 }
 </style>

这将把所有的h2元素改为红色。

使用十六进制代码

十六进制是十六进制代码的简称。十六进制代码使用六个十六进制数字来指定CSS中的颜色。请看下面根据ComputerHope提供的不同颜色的十六进制值。

  • 黑色 #000000
  • 栗色 #800000
  • 黄色 #FFFF00
  • 紫色 #800080

如何用十六进制代码表示颜色，如下所示。

<style>
   p{
   color: #800080;
   }
</style>

但由于很难记住十六进制代码，所以可以将其缩短。这些是来自freshersnow的例子。

  • 黑 #000
  • 红色 #F00
  • 青色 #0FF

使用RGB颜色

RGB是红、绿、蓝的意思。它是另一种在CSS中表示颜色的方式。每个值都可以有一个从0到255的值。

0的值意味着没有使用任何颜色，而255的值意味着使用了所有的颜色。所有的值（红、绿、蓝）都是0就会产生黑色，而所有的值都是255就会产生白色。

根据rapidtables，以下是一些RGB值。

  • 黑色 Rgb(0, 0, 0)
  • 红色 rgb(255, 0, 0)
  • 灰色 Rgb(128, 128, 128)

如何在CSS中表示RGB值，如下所示。

<style>
   p{
   color: rgb(128, 128, 128);
   }
</style>

让我们用RGB值来表示一个Id属性。

       #Properties-of-CSS{
                color: rgb(128, 128, 128);
                }

3.改变一个元素的字体大小和字体家族

为了改变一个元素的字体大小，我们利用字体大小属性，如图所示。

h2{
    font-size: 15px;
}

例如，我们想把一个段落的字体大小改为17px，在样式元素中，它看起来就像。

p{
    font-size: 17px;
}
</style>

为了改变一个元素的字体名称，要利用font-family属性，如图所示。

<style>
 p{
     font-family: Helvetica;
 }
</style>

4.确定图像的大小

CSS使用一个名为width的属性来操作元素的宽度。

宽度属性的使用如下所示。

<style>
 .smaller-image{
     width: 120px;
 }
 </style>

为了使其发挥作用，smaller-image 类也应该被纳入你的HTML元素中，如图所示。

<img class= "smaller-image">

5.使用CSS对HTML进行造型

让我们创建一个HTML元素，并使用我们到目前为止学到的几个CSS元素对其进行造型。

使用id名称

<html>
<head>
<h1>Getting Started With CSS</h1>
</head>
<body>
  <style>
 #description {
     color: black;
     background-color: blue;
     font-family: monospace;
     font-size: 16px;
 }
  </style>
  
  <p id="description">This is a description </p>
  
 </body>
 </html>

使用元素的名称

 <html>
 <head>
 <h1>Getting started with CSS</h1>
 </head>
 <body>
   <style>
   p {
      background-color: blue ;
      color: black
   }
   </style>
   
   <p id="description">This is a description </p>
   
  </body>
  </html>

这些只是让你开始学习CSS的一些指南，但还有很多东西需要学习。

avatar
文章
阅读
粉丝