01-CSS引入方式、选择器

蜂蜜橘子
211 阅读2分钟

CSS引入方式

  • 内嵌式：css写在style标签中 注：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
  • 外联式：css写在一个单独的.css文件中 注：需要通过link标签在网页中引入
  • 行内式：css写在标签的style属性中 注：配合js使用
引入方式书写位置作用范围使用场景
内嵌式css写在style标签中当前页面小案例
外联式css写在单独的css文件中，通过link标签引入多个页面项目中
行内式css写在标签的style属性中当前标签配合js使用

1、内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式 -->
    <style>
        p {
    color: red ;
        }
    </style>
</head>
<body>
	<p>我是一个标签</p>
</body>
</html>

2、外联式

  • css 文件的路径写在 link 标签内 href 属性内
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>、
    <!-- 外联式 -->
    <link rel="stylesheet" href="填写css文件路径">
</head>
<body>
	<p>我是一个标签</p>
</body>
</html>

3、行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./02.css"> -->
</head>
<body>
    <!-- 行内式 -->
<p style="color: green;">我是一个标签</p>
</body>
</html>

基础选择器

1、标签选择器

  • 结构：标签名 { css属性名：属性值；}

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

  • 注意：标签选择器选择的是一类标签，而不是单独某一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

2、类选择器

  • 结构：.类名 { css属性名：属性值；}
  • 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
  • 注意：
    • 所有标签上都有class属性，class属性的属性值称为类名。
    • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头。
    • 一个标签可以同时有多个类名，类名之间以空格隔开。
    • 类名可以重复，一个选择器可以同时选中多个标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }

        .yello {
            color: yellow;
        }

        .pink {
            color: pink;
        }

        .big {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="red big">小红</p>
    <p class="yello">小黄</p>
    <p class="pink">小粉</p>
    <p class="red">我也要变红</p>
</body>
</html>

3、id选择器

  • 结构：#id属性值 { css属性名：属性值；}

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

  • 注意：

    • 所有标签上都有id属性。
    • id属性值类似于身份证号码，在一个页面中是惟一的，不可重复的。
    • 一个标签上只能写一个id属性值
    • 一个id选择器只能选中一个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            color: red;
        }
    </style>
</head>
<body>
    <p id="box">id选择器</p>
</body>
</html>

类与id的区别

class 类名与 id 属性值的区别

  • class类名相当于姓名，可以重复，一个标签可以同时有多个class类
  • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值

类选择器与 id选择器区别

  • 类选择器以 . 开头
  • id选择器以 # 开头
avatar
文章
阅读
粉丝