CSS的基础

最新推荐文章于 2024-07-05 23:24:20 发布

小赖很可耐

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量489

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/likellzzyy/article/details/124393100

版权

我们需要修改 color 属性值。

以下是将 h2 元素设置为蓝色的方法：
```
<h2 style="color: blue;">CatPhotoApp</h2>
```
请注意，需要在内联 style 声明末尾加上 ;。
1. 这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。
  
  在代码的顶部，创建一个 style 声明区域，如下方所示：
```
<style>
</style>
```
  在样式声明区域内，可以为所有 h2 元素创建一个 CSS selector。如果想让所有 h2 元素在变成红色，可以添加下方的样式规则：
```
<style>
  h2 {
    color: red;
  }
</style>
```

如：

<style>

h2{

color:blue;

}

</style>

CatPhotoApp

（加在

上面>

</h2>

3.CSS 的 class 具有可重用性，可应用于各种 HTML 元素。

一个 CSS class 声明示例如下所示：

<style>
  .blue-text {
    color: blue;
  }
</style>

可以看到，我们在 <style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。你可以这样将 class 应用于 HTML 元素：<h2 class="blue-text">CatPhotoApp</h2>。注意在 CSS style 元素里，class 名以一个句点开头。在 HTML 元素的 class 属性中，class 名的开头没有句点。

字体大小由 font-size 属性控制，如下所示：
```
h1 {
  font-size: 30px;
}
```
通过 font-family 属性，我们可以设置元素里的字体族名。

如果你想将 h2 元素的字体设置为 sans-serif，可以这样写：
```
h2 {
  font-family: sans-serif;
}
```
SS 的 width 属性可以控制元素的宽度。和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。

例如，如果你想创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：
```
<style>
  .larger-image {
    width: 500px;
  }
</style>
```

如果要求img 元素应包含 smaller-image class。则在img元素中接入<img src=里面，即<img class="smaller-image" src=.

CSS 边框具有 style、color、width 属性。

假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：
```
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
```
```
<img class="class1 class2">
```
class1和class2写在同一个""里面
1. 猫咪图片的四个角看起来很尖锐，我们可以使用 border-radius 属性来让它变得圆润。
  
  border-radius 的属性值单位可以是 px（像素）。请将猫咪图片 border-radius 的属性值设置为 10px。
  
  注意： 这个挑战有多个解决方法。例如，添加 border-radius 属性到 .thick-green-border 或 .smaller-image 都是可行的。
  
  除像素外，你也可以使用百分比来指定 border-radius 的值。
  
  将 border-radius 的属性值设置为 50%。
  1. background-color 属性可以设置元素的背景颜色。
    
    如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：
```
.green-background {
  background-color: green;
}
```
    1. 可以通过 id 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。
      
      根据规范，id 属性应是唯一的。尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。因此，请不要给多个元素设置相同的 id。
      
      设置 h2 元素的 id 为 cat-photo-app 的代码如下：
```
<h2 id="cat-photo-app">
```
      1. 通过 id 属性，你可以做一些很酷的事情。就像 class 一样，你可以使用 CSS 来设置他们的样式。
        
        不过，id 不可以重复，它只能作用于一个元素上。如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。
        
        选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。可以在 style 标签里这样写：
        
        #cat-photo-element { background-color: green; }
        
        每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
        
        padding 用来控制着元素内容与 border 之间的空隙大小。
        
        我们可以看到蓝色框和红色框是嵌套在黄色框里的。注意红色框的 padding 比蓝色框的更多。
        
        如果你增加蓝色框的 padding 值，其中的文本内容与边框的距离就也会变大。
        
        外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。
        
        在这里，我们可以看到蓝色框和红色框都在黄色框里。请注意，红色框的 margin 值要比蓝色框的大，因此红色框看起来比蓝色框要小。
        
        如果你增加蓝色的 margin 值，它也会增加元素边框到其他周围元素的距离。
        
        如：
        
        将蓝色框的 margin 值设置成和红色框的一样
        
        .blue-box {
        
        background-color: blue;
        
        color: #fff;
        
        padding: 20px;
        
        margin: 20px;
        
        CSS 允许你使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。
        
        如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样：
        
        padding: 10px 20px 10px 20px;
        
        这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。
        
        我们已经通过设置元素的 id 和 class 来显示想要的样式。这就是 ID 选择器和 Class 选择器。另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。
        
        让我们再次通过猫咪图片项目来练习 CSS 选择器。
        
        在这个挑战里，我们需要使用 [attr=value] 属性选择器来修改 CatPhotoApp 中复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式。例如，下面的代码会改变所有 type 为 radio 的元素的外边距。
        
        [type='radio'] { margin: 20px 0px 20px 0px; }
        
        现在让我们来讨论一下 CSS 中的继承。
        
        每一个 HTML 页面都有一个 body 元素。
        
        我们可以通过设置 background-color 的属性值为黑色，来证明 body 元素的存在。
        
        请将以下代码添加到 style 标签里面：
        
        body { background-color: black; }
        
        使用行内样式尝试让 h1 的字体颜色变白。记住，内联样式看起来是像这样：
        
        <h1 style="color: green;">
        
        让我们回到 pink-text 类声明。 pink-text 类的颜色样式已被之后的 class 声明、id 声明以及行内样式所覆盖。
        
        给粉红文本元素的颜色声明添加关键词 !important，以确保 h1 元素为粉红色。
        
        如下所示：
        
        color: red !important;
        
        RGB 值是在 CSS 中表示颜色的另一种方法。
        
        黑色的 RGB 值：
        
        rgb(0, 0, 0)
        
        白色的 RGB 值：
        
        rgb(255, 255, 255)
        
        RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。
        
        如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。所以，RGB 从零开始计算，与十六进制代码的值的数量完全相同。
        
        下面是通过使用 RGB 值设置背景颜色为橘色的例子：body。
        
        body { background-color: rgb(255, 165, 0); }
        
        CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性的强大方法。
        
        按照下面指示的来做，我们只需要改变三个值，多个样式将会同时被修改。
        
        在 penguin class 里，将 black 改为 gray；gray 改为 white；yellow 改为 orange。
为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：
```
--penguin-skin: gray;
```
这样就会创建一个 --penguin-skin 变量，它的值为 gray。现在，其他元素可通过该变量来使元素变成灰色。
1. 创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。
```
background: var(--penguin-skin);
```
  因为引用了 --penguin-skin 变量的值，使用了这个样式的元素背景颜色会是灰色。请注意，除非变量名称完全匹配，否则将不会应用样式。
  
  26.备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
  
  下面是操作方式：
```
background: var(--penguin-skin, black);
```

小赖很可耐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的基础

我们需要修改 color 属性值。以下是将 h2 元素设置为蓝色的方法： <h2 style="color: blue;">CatPhotoApp</h2> 请注意，需要在内联 style 声明末尾加上 ;。这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。在代码的顶部，创建一个 style 声明区域，如下方所示： <style></style> 在样式声明区域内，可以为所有 h2 ...
复制链接

扫一扫