CSS的基础知识

150 阅读1分钟

css样式表

  • css英文全名:cascading style sheet(s) 层叠样式表,简单说就是如何修饰网页信息的显示样式。
  • 属性必须放在花括号中,属性与属性值用冒号链接。
  • 每条声明用分号结束。
  • 当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开。
  • 在书写样式过程中,空格、换行等操作不影响属性显示


例如:css的内部样式:<style> h1{color:red} </style> (style放在title与head之间)

css的写法

css的行内样式:

no.1.jpg

css的外部样式:

微信图片_20230820165302.jpg 微信图片_202308201653021.jpg

!import的用法:<style> div{color:yellow!import;} </style>

样式表的优先级:!import>行内>内部>外部

标签选择器

【1】元素/element选择器(范围广)

微信图片_202308201653022.jpg

*【2】类/class选择器*

微信图片_202308201653023.jpg 例如<style>  .ibm(随便取,但一定要加点){background-color:blue;} <style>
<div class="ibm">文本内容</div>(遵循就近原则)

【3】id选择器

微信图片_20230820165303.jpg

class选择器可以一对多,id选择器只能一对一

【4】通配符选择器

微信图片_202308201653031.jpg

【5】群组和后代选择器

微信图片_202308201653032.jpg

群组选择器写法:div,p,h1{background-color:yellow;}(提出公共代码,节约代码量)
后代选择器写法:div p{background-color:red}(div代码中的p代码,从右到左开始选择)

【6】伪类选择器

微信图片_202308201653033.jpg

选择器的权重

当多个选择器,选中的是同一个元素,且都为他们定义了样式,如果属性发生冲突了,会选择权重高的来执行

微信图片_20230820165233.jpg