CSS学习笔记 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第一天

这是我第一次在网上写文章，有什么写得不好的地方请各位见谅。

css有三种书写方式

1. 行内样式
   <p style="color: red;font-size: 20px">行内样式1</p> <p style="color: red;font-size: 20px">行内样式2</p>
   这样子写只能对当前这个标签生效，如果希望影响其他标签，也要再写一次，后续想要修改也要一个一个修改，比较麻烦。
2. 内嵌样式

 <style>
    p { 
    color: red;
    font-size: 20px;
    }
 <style>

可以使结构于样式进一步分离，方便对样式进行复用、寻找并维护。
行内样式带来了样式修改的不方便，例如上个示例中两个段落都使用同样的样式，但需要编写两遍；而使用内嵌式样式后，就可以将所有的段落样式放在一起。
3. 外链样式
<link rel="stylesheet" href="./css外联样式.css" />
这样子写可以让结构与样式分离，让HTML和CSS代码完全分开，其他的网页可以对其进行引用，使网站所有页面样式统一，复用度进一步提高。

CSS选择器

1. 通配选择器

* {
  text-align: center;
  color: red;
}

通配选择器（*）选择页面上的所有的 HTML 元素。
2.标签选择器

p {
  text-align: center;
  color: red;
}

标签选择器根据元素名称来选择 HTML 元素。
3.id选择器

#ixuan {
  text-align: center;
  color: red;
}

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
注意：使用id选择器要用#开头且id不能以数字开头
4.类选择器(最常用)

.lei {
  text-align: center;
  color: red;
}

类选择器选择有特定 class 类名的 HTML 元素。
5.属性选择器

p[target] {
  color: red;
}

以上代码可以选择所有带有 target 属性的 <p> 元素；

除此之外，还可以用[target="val"]选择带有target属性且属性值为val的元素；
还有~=可以选择属性值包含特定字符的元素；
|=可以选择属性值以特定字符开头的元素（字符必须为完整或单独的单词）；
^=可以选择属性值以特定字符开头的元素；
$=可以选择属性值以特定字符结尾的元素；
*=可以选择属性值包含指定字符的元素。

今天就写到这里，我们下次见。