七爪图片_前端代码

编程小6 (1) 2024-09-02 10:12

Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
七爪图片_前端代码,希望能够帮助你!!!。

了解 CSS 以找到您作为 Web 开发人员的第一份工作。

代表级联样式表的 CSS 是一种样式表语言，用于描述用 HTML 编写的文档的表示。 CSS 允许开发人员将内容与演示文稿以及网站在颜色、间距、字体、布局等方面的外观和感觉分开。

CSS 语法：正如我们之前提到的，CSS 处理网站的外观，因此我们需要访问 HTML 元素并为它们提供定义指定元素外观的值，并且 CSS 引擎会计算适用于页面每个元素的声明以适当把它摆出来。

七爪图片_前端代码_https://bianchenghao6.com/blog__第1张

CSS 选择器：当你想要设置 HTML 元素的样式时，你需要访问它们来访问它们，访问 HTML 元素的不同方式可以分为：

1. CSS 元素选择器：根据名称选择 HTML 元素。

七爪图片_前端代码_https://bianchenghao6.com/blog__第2张

2、CSS类选择器：类选择器选择具有特定类属性的HTML元素。

七爪图片_前端代码_https://bianchenghao6.com/blog__第3张

3. ID 选择器：CSS ID 选择器根据元素 id 的值匹配元素。

七爪图片_前端代码_https://bianchenghao6.com/blog__第4张

4. CSS 通用选择器：当您想选择所有 HTML 元素时，通用选择器适合您。

七爪图片_前端代码_https://bianchenghao6.com/blog__第5张

到目前为止，我们了解了什么是 CSS 以及常见的选择器是什么，但是我们如何将 CSS 插入到我们的网页中。为了添加 CSS，我们有三种插入 CSS 的方法

外部CSS
内部CSS
内联CSS

外部 CSS：外部样式表通常用于在多个页面上进行更改并且必须以 .css 扩展名保存。

七爪图片_前端代码_https://bianchenghao6.com/blog__第6张

内部 CSS：具有内部样式表的 HTML 文件在其头部包含一组规则。 CSS 规则包含在 <style> 标记中。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

内联 CSS：内联样式直接应用于 HTML 代码中的元素。它们使用 style 属性，后跟常规 CSS 属性。

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

哪些选择器在级联中胜出取决于：

特异性：这意味着你的选择器有多具体。
重要性：CSS 中的 !important 规则用于为属性/值添加比正常情况更多的重要性。
源顺序：如果 HTML 页面引用了两个 CSS 页面，它将按源顺序设置样式。

CSS 属性：CSS 属性定义了如何为目标 HTML 元素设置样式，这里我列出了一些最常用的基本 CSS 属性。

p{ Color:red; text-align:center; border:5px solid red; background-image:url(linkof the image); background-size:cover; cursor:pointer; display:block; display:inline-block; background-repeat:no-repeat; opacity:0.4; } p1{ text-decoration:underline; text-decoration:line-through; text-transform:uppercase; font-style:italic; font-weight:bold; font-size:150%; font-family:”Times new Roman”; }

CSS 盒子模型：CSS 盒子模型是一个包装每个 HTML 元素的盒子，它由边距、内边距和里面的内容组成。