CSS层叠样式表理解

时间:2021-02-12 13:18:35

   CSS层叠样式表

css 层叠样式表 属于标记型语音

 cssDIV + CSS是WEB设计标准,是一种网页布局方法

    样式分类

行内样式(位于HTML标签体内部)
<div style=“样式代码”>其</div>
内联样式(位于head标签内)
<style type=“text/css”>样式代码</style>
外部样式(外部文件+link引入)
<link href=“样式文件URL” rel=“stylesheet” type=“css/text” />

选择器

标签选择器(标签名{}  body{  ...})

类class选择器(.class名{})
id选择器(#id名{})
复合选择器(交集选择、并集选择、后代选择)
通用选择器(*{

margin: 0;
padding: 0;

})


2.4 交集选择器(紧挨着是交集)

注意:表这几个选择器同时被满足了的那一类元素。交集选择器不会出现 标签交标签的情况。所以把标签写在前面。其他的写在后面

2.5 并集选择器(,表示并集)

div,p,.green{
    background: #ffff00;
}

注意:满足这里面某一个选择器的元素都可以被选上。

2.6 后代选择器(空格表示后代)


/*后代选择器*/
div p{
    color:red;
}
div div p{
    color: #ec50a4;
}
div a{
    /*去掉下划线*/
    
text-decoration:none;
}

元素可以通过父级的元素来选择到自己(自己干不过了,就让父亲来撑场面。)如果父级元素一样,还可以通过更上级的元素来选择到(父亲也干不过了,祖父也来撑场面了)。可以跨级选择到元素(可以不要父亲,只要爷爷)


超链接选择器( a{}、a:link{}、a:visited{}、a:hover{}a:active{} )

/*link 未点击 visited 点击过了的 hover 鼠标放在上面未点击 active 鼠标被按下时的状态*/