【小白鲨笔记】CSS（一）

一、CSS基础

CSS（Cascading Style Sheets）层叠样式表的作用是决定网页的样式美观。CSS 需要写在 HTML 的 style 标签中（style 标签一般插在 head 标签中）。

可以看一下 CSS 的基础语法：

/* css注释 */
/* 选择器用于查找标签 */
选择器{
    css属性：css属性值；
}
/* 应用场景 */
p { /* 选中 p 标签 */
    color: red; /* 文字颜色 */
    font-size: 30px; /* 字体大小，px=像素 */
    background-color: green; /* 背景颜色 */
    width: 400px; /* 宽度 */
    height: 300px; /* 高度 */
}

CSS引入方式

1. 内嵌式：CSS写在style标签中（通常在head标签中）

   <style>
       p{
           color: red;
       }
   </style>
   

2. 外联式：CSS写在一个单独的.css文件中（通过link标签引入）

   <!-- [stylesheet]关系为：样式表 -->
   <link rel="stylesheet" href="./1.css">
   

3. 行内式：CSS写在标签的style属性中（之后可配合js使用）

   <div style="color: green; font-size: 30px;"></div>
   

总结：

引入方式	作用	使用场景
内嵌式	当前页面	小案列
外联式	多个页面	项目
行内式	当前标签	配合js

注意点：最好的引入方式是通过外联式，并且引入的最佳位置则是放在开头的 head 标签中。

Chrome调试工具

• 浏览器中右击，找到「Inspect Element」则可以打开调试工具（快捷键：F12或Fn+F12）
• 选中需要的元素，在边上的styles找到相对应的css代码，可以进行调试
• 若有删除线则有层叠/覆盖，若有感叹号则是语法问题
• 注意：浏览器上的操作不会被保存