前端之css初级篇

CSS基础选择器

css引入方式

CSS 可以通过以下三种方式引入：

内部样式表：将 CSS 样式代码放在 HTML 文件的 <head> 元素中的 <style> 标签内。例如：

htmlCopy Code<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <style>
    /* CSS 样式代码 */
    body {
      background-color: #f2f2f2;
    }
    h1 {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>Welcome to my page</h1>
  <p>This is the content of my page.</p>
</body>
</html>

外部样式表：将 CSS 样式代码放在外部的 CSS 文件中，然后在 HTML 文件中使用 <link> 标签引入 CSS 文件。例如：

htmlCopy Code<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Welcome to my page</h1>
  <p>This is the content of my page.</p>
</body>
</html>

其中 href 属性指定了外部 CSS 文件的路径。

内联样式：在 HTML 元素的 style 属性中直接写入 CSS 样式代码。例如：

htmlCopy Code<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1 style="color: #333333;">Welcome to my page</h1>
  <p style="background-color: #f2f2f2;">This is the content of my page.</p>
</body>
</html>

这种方式虽然很方便，但是不利于维护和管理。

优先级是 外部样式 < 内部样式 < 内联样式

特殊情况：就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

总之，三种引入 CSS 的方式各有优缺点，开发者需要根据具体情况选择合适的方式。

CSS 基础选择器：

标签选择器：使用 HTML 元素的标签名作为选择器，例如 p、div、h1 等。
ID 选择器：使用 HTML 元素的 id 属性值作为选择器，并在属性值前加上 # 符号，例如 #header、#content 等。
类选择器：使用 HTML 元素的 class 属性值作为选择器，并在属性值前加上 . 符号，例如 .btn、.nav 等。
属性选择器：使用 HTML 元素的属性名和属性值作为选择器，例如 [type="text"]、[href^="https://"] 等。
通配符选择器：使用 * 作为选择器，匹配所有 HTML 元素。
组合选择器：将多个基础选择器组合使用，例如后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器等。

选择器的权重问题

!important会覆盖页面内任何位置的元素样式。
内联样式，即写在标签里面的style样式，权重值为1000。
id选择器，权重值为100。
类选择器、伪类选择器、属性选择器，权重值为10。
标签选择器、伪元素选择器，权重值为1。
组合选择器、通配符选择器，权重值为0。

注意，权重值不能进位，比如我十一个class的权重(计算出来是0110)不会大于一个id（0100）。也就是说等级高的永远会覆盖等级低的。相同权重后面的会覆盖前面的

CSS 复杂选择器

后代选择器

后代选择器使用空格分隔两个简单选择器，选择的是所有符合第二个简单选择器条件的元素，它们都是第一个简单选择器元素的后代元素。例如：

/* 父子选择器/派生选择器 */
div span{
    background-color: red;
}

上面的代码会将所有在 div 元素内部的 span 元素设置为红色背景。

子元素选择器

子元素选择器使用 > 分隔两个简单选择器，选取所有符合第二个简单选择器条件的元素，这些元素都是第一个简单选择器元素的直接子元素

div > em{
    background-color: rgb(165, 226, 43);
}

相邻兄弟选择器

相邻兄弟选择器使用 + 分隔两个简单选择器，选取所有符合第二个简单选择器条件的元素，这些元素必须是第一个简单选择器元素的下一个兄弟元素。

div + p {
    color: red;
}

通用兄弟选择器

通用兄弟选择器使用 ~ 分隔两个简单选择器，选取所有符合第二个简单选择器条件的元素，这些元素必须是第一个简单选择器元素之后的兄弟元素。

div ~ span {
    color: rgb(0, 136, 255);
}

并列选择器

div 简单选择器选取了所有的 div 元素，而 .（点号）后面跟着的 .demo 则是一个类选择器，选取了所有 class 属性值为 demo 的元素。因此，div.demo 选择器指定了所有 class 属性值为 demo 的 div 元素。

div.demo{
    color: #41db68;

}

分组选择器

可以同时选取多个元素，并对这些元素应用相同的样式。它们使用逗号 , 分隔

h1, h2, h3 {
    color: blue;
}

CSS代码块

在 CSS 中，代码块使用花括号 {} 包含，用于将样式声明分组到一个选择器中

在 CSS 中，属性名用于定义需要改变的元素的样式或属性。下面列出一些常见的 CSS 属性名：

color：设置文本颜色。
background-color：设置背景颜色。
font-size：设置字体大小。
font-family：设置字体类型。
font-weight：设置字体粗细。
line-height：设置行高。
text-align：设置文本对齐方式。
vertical-align：设置垂直对齐方式。
padding：设置内边距。
margin：设置外边距。
border：设置边框。
width：设置元素宽度。
height：设置元素高度。
display：控制元素的显示方式。
position：设置元素的定位方式。
float：设置元素的浮动方式。
clear：清除浮动。
z-index：设置元素的堆叠顺序。
opacity：设置元素的透明度。
transition：设置过渡效果。

这些属性名只是 CSS 中的一部分，还有很多属性可供开发者使用，根据不同场景和需求选择相应的属性名来实现样式效果

前端之css初级篇

前端之css初级篇

CSS基础选择器

css引入方式

CSS 基础选择器：

选择器的权重问题

CSS 复杂选择器

后代选择器

子元素选择器

相邻兄弟选择器

通用兄弟选择器

并列选择器

分组选择器

CSS代码块

评论