css基础认知和基础选择器

最新推荐文章于 2023-10-27 14:41:31 发布

黑马程序员小张

最新推荐文章于 2023-10-27 14:41:31 发布

阅读量69

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/z000802/article/details/123909037

版权

一.CSS引入方式

1.内嵌式：CSS写在style标签中

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

<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>
        /* css的注释 */
        /* 这里写的都是css */
        /* 来一个选择器{css属性} */
        /* 选择器的作用：查找标签 */
        p {
            /* 文字颜色变红色 */
            color: red;
            /* 文字大小 px：像素 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width height */
            width: 400px;
            height: 400px;
        }
    </style>
</head>

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

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

<link rel="stylesheet" href="./my.css">

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

配合JS使用

<div style="color: blue;">这是div属性</div>h
//行内式

CSS常见三种引入方式的特点区别有哪些(书写位置、作用范围、使用场景)

引入方式	书写位置	书写范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在一个单独的css文件中，通过link标签引入	多个页面	项目组
行内式	CSS写在标签的style属性中	当前标签	配合js使用

二.基础选择器

一 .标签选择器

标签名：(css属性名：属性值；)
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

   <style>
        /* 选择器 {} */
        /* 标签选择器 就是 以标签名命名的选择器 */
        p {
            color: red;
        }

        /* 标签选择器 选择所有的这个标签都生效css */
    </style>
</head>
<body>
    <p>张宇杰666666666</p>
    <p>这个张宇杰是什么颜色呢</p>
    <p>2222</p>
</body>

二.类选择器

结构：.类名{css属性名：属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值成为类名(类似于名字)
2. 类名可以由数字、字母、下划线、中划线组成，但不能是数字或者中划线开头
3. 一个标签可以同时拥有多个类名，类名之间以空格隔开
4. 类名可以重复,一个类选择器可以同时选中多个标签

  <style>
        .red {
            color: pink;
        }
        .size {
            color: pink;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 类：定义 和 使用 才能生效 -->
    <p>111</p>
    <p class="red size">222</p>
    <!-- 一个标签可以使用多个类名，需要空格隔开即可 -->
    <div class="red size" >这个文字标签也要变粉</div>
</body>

三.id选择器

结构：#id属性值{css属性名:属性值;} 配合js加动态效果的
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码,在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签

<style>
        #blue {
            color: skyblue;
        }
</style>
</head>
<body>
    <div id="blue">这是div文字是蓝色的</div>
<!-- 一个id选择器只能选中一个标签 将来配合js加动态效果用的 否则就会报错！ -->
    <p id="blue">111</p>
</body>

四.通配符选择器

结构：*{css属性名:属性值;}
作用：找到页面中的所有标签，设置样式
注意点：
1. 开发中使用极少，只会在极其特殊情况下才会用到
2. 小页面中可能会用于去除标签默认的margin和padding

  <style>
        * {
            color: pink;
            margin: auto;
            padding: auto;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h1>h1</h1>
    <span>span</span>
    <h2>h2</h2>
</body>