CSS语法介绍与CSS选择器

CSS

语法内容
- 1.引入到html的方法
二.选择器
- 1.基础选择器

语法内容

1.语法：选择器+(1或n条声明)
2.每个声明决定要修改的是那个标签
3.声明中的属性是键值对，键值对之间用： 结束用;
4.css可以单独使用也可以搭配在html中使用(能有让样式和界面结构分离)，一般在head标签内放入选择器，
5.使用/* */注释
1
2
3
4
5

作用：
1.对网页中元素位置的排版进行像素级控制，美化页面。
2.实现页面的结构和样式分离。

<html>
<head>
    <title>css选择器title>
    <style>
        p{
            /* 选择颜色 */
            color:blue;
            /* 设置字体 */
            font-size: 50px;
        }
    style>
head>
    <p>hellop>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.引入到html的方法

将CSS内容写在

1.内部样式表

<html>
<head>
    <title>css选择器title>
    <style>
        p{
            /* 选择颜色 */
            color:blue;
            /* 设置字体 */
            font-size: 50px;
        }
    style>
head>
    <p>hellop>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.行内样式表

<style>
        p{
            /* 选择颜色 */
            color:blue;
            /* 设置字体 */
            font-size: 50px;
        }
    style>
    <p style="color:red">hellop>
1
2
3
4
5
6
7
8
9

在这里插入图片描述
将style作为属性加入行内标签。
不过这种写法的优先级高，虽然选择器已经是blue，但是最后还是red的颜色。

3.外部样式

因为外部样式的使用，可以让样式和结构完全分离，所以实际中一般都用外部样式。

使用方法：
1.在vscode中建立一个css文件，后缀为css。
在这里插入图片描述
2.在这文件中直接写好声明与属性。

3.在html文件中与css建立连接，一般写在head标签中

<head>
    <title>css选择器title>
    
    <link rel="stylesheet" href="style.css">
head>
    <div>hellodiv>
1
2
3
4
5
6

二.选择器

1.基础选择器

1. 标签选择器：

<style>
    p{
        color:aqua;
    }

    div{
        color:red;
    }

style>
    <p>张三p>
    <p>张三p>
    <p>张三p>
    <div>李四div>
    <div>李四div>
    <div>李四div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

能将同类的标签都选择出来(同类标签颜色会变的一样)
但是不能在同类标签中选择其中的标签(同类标签颜色不能不一样)

2.类选择器

<style>
    .blue{
        color:blue;
    } 
style>        

    <div class="blue">李四div>
    <div>李四div>
1
2
3
4
5
6
7
8

在这里插入图片描述

可以给相同的标签中加入class属性(用来调用) 这样就可以让相同标签的内容呈现不一样的颜色。
可以让多个标签使用同一个标签(class中的内容)
差异化表示不同标签
类名用.开头

3.id选择器

id选择器使用 # 加html中的某个元素的id值来表示
id是唯一的，class不是唯一的(原因，id身份证唯一，class地址，姓名不唯一)

<style>
    #name {
        color: blue;
    }
style>
    <div id="name">李四div>
1
2
3
4
5
6

4.通配符选择器

使用*来选择全部标签全部内容都会被改变颜色

<style>
    * {
        color: blue;
    }
style>
    <div id="name">李四div>
    <div id="name">李四div>
    <div>李四div>
    <div>李四div>
    <div>李四div>
    <div id="name">李四div>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

相关阅读:
如何调试JNI程序
SpringBoot(三) - Ribbon客户端负载均衡,Zuul网关，Config配置中心
数学建模值TOPSIS法及代码
[推荐系统] 1. 深度学习与推荐系统
抽象类和接口的区别
多平台比较，三代扩增子高度还原微生物群落结构
Python中一个非常高效的json对比库--deepdiff
从私服上拉取jar包，就是拉取不下来
【论文阅读】大语言模型中的文化道德规范知识
Vue3封装自定义指令和hooks,并发布npm包

原文地址：https://blog.csdn.net/m0_61761695/article/details/127606463