CSS的学习（一）-------CSS中的基本语法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42440314/article/details/89281301

本文深入讲解CSS（层叠样式表）的基本概念、语法和应用方式，包括三种在HTML中使用CSS的方法，详细解析了选择器的类型及用法，如元素、ID、类选择器等，还介绍了CSS的级联与继承特性。

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

1.CSS即层叠样式表，用于修饰HTML

2.语法

（1）css的声明
           属性名:属性值;
           color:red;

（2） css声明块
           {
               属性名1:属性值1;
               属性名2:属性值2;
           }

3.CSS声明可以如何应用到html中（三种方式）？

1. style属性中插入css声明

<div style="color:red;font-size:12px;">hello</div>
<div>world</div>

2. 内嵌到style标签中

 <head>
	<style>
		div {
			color:red;
			font-size:12px;
		}
	</style>
</head>
<body>
	<div>hello</div>
	<div>world</div>
</body>

3. 外部导入
style.css文件：

div {
	color:red;
	font-size:12px;
}
html
<head>
	<link rel="stylesheet" href="style.css">
</head>

4.注释

/* 注释 */

5. 选择器

jquery+bootstrap
vue/react

（1）基本选择器
           1) 元素选择器
               div {}
               p {}
           2) id选择器
               #one {}
               <div id="one"></div>
               <div></div>
           3) 类选择器
               .first {}
               <div class="first"></div>
               <div></div>
           4) 组合选择器
               div , p {}
           5) 并且选择器
               div.first {}
               div#one {}
               #one.first {}

               选中div元素，并且这个元素的class为first
               <div id='one' class='first'></div>
           6) 普遍选择器
               *
（2）层次选择器
           1) 后代选择器
               ul li
           2) 子代选择器
               ul > li
           3) 下一个兄弟选择器
               #one + *

           4) 之后所有兄弟
               #one ~ *
（3）过滤器
           1) 属性过滤器
               selector[attr]
                   含有属性名为attr的元素
               selector[attr=val]
               selector[attr~=val]
               selector[attr^=val]
               selector[attr$=val]
               selector[attr*=val]
           2) 伪类过滤器
               selector:伪类过滤器

               :only-child
               :first-child
               :last-child
               :nth-child(参数)
                   参数：
                       数值
                       关键字 event odd
                       表达式 2n+1 n+3
               .text > *:first-of-type
               .text > *:last-of-type
               .text > *:nth-of-type(参数)

:hover
光标悬浮后才能被选中

           3) 伪元素过滤器
               ::after
               ::before

.list > div::before {
    content:'*'
} 


<div class='list'>
   <div>one</div>
   <div>two</div>
   <div>three</div>
</div>

6. 级联与继承

当多个选择器共同作用同一个元素的时候
1) 如果选择器中css声明不同，则共同作用
2) 如果选择器中css声明相同，则竞争选取优先级较高的来渲染

权重：
           1000        style
           100           id
           10            类，伪类，属性
           1 元素，伪元素

div.first

                           1+10 = 11
           .btn
                           10    = 10

数值单位：
（1）px
绝对单位 pc
width:1240px
（2）em
相对单位
相对于当前元素上的字体
（3）rem
相对单位
相对于html中设置的全局字体大小

注意：在浏览器中，默认字体大小为16px，而html页面中body的内边距padding就是相对于html页面字体大小的0.5倍设置的。（即0.5em）