CSS个人学习笔记（day 1）

loney_k

已于 2022-04-13 18:29:09 修改

阅读量754

点赞数 18

文章标签： css

于 2022-04-03 20:19:54 首次发布

本文链接：https://blog.youkuaiyun.com/loney_k/article/details/123911254

版权

这篇博客介绍了CSS的基础知识，包括CSS的介绍、语法规则和三种主要的选择器：标签选择器、类选择器和ID选择器。作者详细阐述了每种选择器的结构、作用、优缺点，并提到了通配符选择器的特殊用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS基础认知

1.1 CSS的介绍

CSS的介绍：层叠样式表

CSS的作用：给页面中的HTML标签设置样式

1.2 CSS语法规则

CSS语法规则：css写在style标签中, style标签一般写在head标签里面,title标签下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式写法 -->
    <style>
       p {
            color: red;
        }
    </style>

</head>

1.3 CSS引入方式

内嵌式：CSS写在style标签中

提示：style标签虽然可以写在页面任意位置,但是通常约定写在head标签中

外联式：CSS写在一个单独的.css文件中

提示：需要通过link标签在网页中引入

行内式：CSS写在标签的style属性中

提示：后面会配合js使用

CSS常见三种引入方式的特点区别有哪些:
 引入方式                书写位置                      作用范围           使用场景
  内嵌式             CSS写在style标签中                当前页面         小案例(上课)
  外联式     CSS写在单独的css文件中,通过link标签引入    多个页面        开发项目中(工作)
  行内式           CSS写在标签的style属性中            当前标签      配合js使用(比较少用)

二、CSS基础选择器

2.1 选择器的作用

选择器的作用：选择页面中对应的标签(找她),方便后续设置样式

2.2 标签选择器

结构：标签名{ css属性名:属性值; }

作用：通过标签名,找到网页中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签,而不是单独某一个
标签选择器无论嵌套关系有多深,都能找到对应的标签

<title>Document</title>
   <style>
        /* 所谓的标签选择器就是以标签名命名的选择器 */
       
         p {
            color: red;
         }
        /* 标签选择器选中了所有的这个标签都生效css */
    </style>
</head>

<body>
    <P>PPPPP</P>
</body>

标签选择器的优缺点：

优点：能够快速为页面中同类型的标签统一样式。

缺点：不能设计差异化样式，有时候会相互干扰

例如:
     /*所有div元素对象定义为高度为500px*/

      div{
          height:500px;       
         }  
                
那么当用div进行布局时，就需要重新为页面中每个div对象定义高度，因为在页面中并不是每个div元素对象的高度都显示为500px

2.3 类选择器

类选择器：(又名class选择器)

结构：. 类名 { css属性名:属性值; }

作用：通过类名,找到页面中所以带有这个类名的标签,设置样式

注意点：

所有标签上都有class属性,class属性的属性值称为类名 (类似于名字)
类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<title>Document</title>
<style>
      .red {
          color: red;
        }

      .size {
          font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- 类: 定义和使用才能生效  -->
    <p>111</p>
    <!-- 一个标签可以同时有多个类名，类名之间以空格隔开 -->
    <p class="red size">222</p>
</body>

</html>

类选择器的优缺点：

优点：最常用设计方法，使用灵活，可以为不同对象

缺点：需要手动添加 class 属性操作较麻烦也不利于文档结构的简洁

2.4 id选择器

id选择器：从来不是用来做css美化工作的，而是用来配合js加动态效果的

结构： #id属性值 { css属性名:属性值; }

作用：通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点：

所以标签上都有id属性
id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的！
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义id选择器 */
        #blue {
            color: skyblue;
        }
    </style>
</head>

<body>
    <div id="blue">这个div文字是蓝色的</div>
</body>

id选择器的优缺点：

优点：精确匹配使用

缺点：与类选择器相同需要手动添加id属性，缺乏灵活性

小结：类选择器和ID选择器可以同时作为一个标签，但ID选择器优先级高于类选择器

2.5 通配符选择器

结构： * { css属性名:属性值; }

作用：找到页面中所以的标签,设置样式

注意点：

开发中使用极少，只会在极特殊情况下才会用到
在基础班小页面中可能会用于去除标签默认的margin和padding

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: skyblue;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>我是p标签</p>
</body>
</html>