今天来学习html的css-CSDN博客

本文链接：https://blog.csdn.net/m0_65325755/article/details/122800200

关于css，与html的关系

简单来说，css是依附于html来存在的，没用html，css将毫无意义。

今天主要讲讲css基本使用和各种选择器

一、基本使用

基本使用方法为

<style type="text/css">
    xxx{
        ***:***;
        ***:***;
    }
</style>

css呢一般放在<head>中通过<style type="text/css">来引用，最后要有</style>

xxx出可以为*号，为某个标签名，例如p、div、h1等，还可以为.class、或者#id等。

冒号前面的***为color、font-size等属性，冒号后面为red、green等对应的单词或**px的大小等。注意最后要加上分号;而且是英文的分号

二、基本选择器

1.通用选择器

*{
color：orange；

}

通用选择器呢以*代表所有，用来定义所有的格式，当使用上面代码是所有的颜色就都会变成橙色

2.元素选择器

p{
color：red；

font-size：20px；

}

众所周知，p就是段落的意思啦，而上面的代码意思就是，将所有p的格式设置为颜色：red；字体大小：20px；

3.id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>郑州轻工业大学欢迎您</title>
		<style type="text/css">
            #id{
                color: red；
            }
        </style>
	</head>
    <body>
    <div id="id">这是一个div</div>
    <p id="id">这是一个p</p>
    <p >这是第二个p</p>
    </body>
</html>

id选择器呢可以控制所有id相同的标签，上面的运行结果就是上面两行为红色，而“这是第二个p”则为默认的黑色如图：

4.类选择器

.class属性值{
 text-align:center;

}

与id选择器类似，在head中设置过格式后，body中的要应用该格式的设置相应的class=“对应名字”

5.分组选择器

选择器1，选择器2，选择器3{

font-family:楷体;
}

分组选择器呢，可以同时设置多个
选择标准，只要符合其中一个，就可以应用定义的格式

那么问题来了，如果两种选择器都可以对一个标签起作用，那么将会应用到谁的格式呢？这就牵扯到优先级（权重）的问题了

css选择器的优先级（权重）

元素选择器：1

类选择器：10

id选择器：100

内联样式：1000

相加就可以得到应该用到的格式啦~