这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

CSS是什么？

用来定义页面元素的样式
比如：字体颜色、设置位置和大小、添加动画效果等等。

使用CSS可以有三种方法

1.外链（最推荐）

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/assets/style.css">
  </head>
  <body>
    <ul>
       <li>123</li>
    </ul>
    <p>内容段落</p>
  </body>
</html>

2.嵌入

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    li{ margin:0; list-style:none;}
    p{ margin:1em 0;}
    </style>
  </head>
  <body>
    <ul>
       <li>123</li>
    </ul>
    <p>内容段落</p>
  </body>
</html>

3.内联

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p style="margin:1em 0">Example Content</p>
  </body>
</html>

css是如何工作的？

屏幕截图 2023-01-16 101610.png

组合

1.直接组合：AB 满足A同时满足B 如：input:focus
2.后代组合：A B 选中B，如果他是A的子孙如：nav a
3.亲子组合：A>B 选中B,如果他是A的子元素如：section>p
4.相邻选择器：A+B 选中B,如果它紧跟在A后面如：h2+p

字重

font-weight属性：100-900之间逐渐增大

行高

line-height属性：line-height:1.6em

伪类选择器

a:link{}：设置元素未被访问时的状态
a:hover {}：设置鼠标悬停在元素上的样式
a:visited{}:设置元素已经被访问后的样子
a:active{}:设置元素被鼠标点击与释放之间的效果
设置好伪类样式，可以增加用户的体验感。

注意事项

合理的使用css属性，可以使页面更加的完善，使我们开发出来的产品能够更加的吸引人。

总结

本次课程学习到了css的一些重点属性和书写规范。良好的书写规范对于团队合作有良好的帮助。我们要会熟练的使用css的属性，并且记住他的用法以便不时之需，在日常的空余时间，我们可以多翻阅借鉴他人的良好笔记，养成良好的习惯。

前端技术栈-css | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天