CSS的特性与引用-CFANZ编程社区

CSS的特性与引用

自动格式化

文件—首选项—设置
搜索format
文本编辑器—格式化—勾选 Editor:format On Save

css的三大特性

层叠性

div {
    color: red;   /*不生效，被覆盖*/
    font-size: 18px;	/* 无冲突，生效 */
}
div {
    color: green;   /* 生效，覆盖上面的样式 */
}

继承性

div {
    color: red;
    font: 14px/1.5 'Microsoft YaHei';
}
p {
    font-size:18px;
}

<div>
    <p>大风起兮云飞扬</p>   <!-- inherited from div 子元素字体颜色改变 行高为29px(18*1.5) -->
</div>

优先级

选择器相同，则执行层叠性
选择器不相同，则根据选择器权重执行

选择器权重

!important > 行内样式 > ID选择器 > 类选择器 || 伪类选择器 > 元素选择器 > 继承 || *

选择器	选择器权重
继承 \|\| *	0,0,0,0
元素选择器	0,0,0,1
类选择器 \|\| 伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
!important	∞ 无穷大

CSS的引用方式

嵌入式

<html>
  <head>
      <style>
          .ting {
              color: deeppink;    //推荐写到head中
          }
      </style>
  </head>
  <body>
      <div class='ting'>ting</div>
      <div class='tinghua'>tinghua</div>
      <style>
          .tinghua {
              color: pink;    //不推荐，但有效
          }
      </style>
  </body>
</html>

行内式

<div style='color:red;'>好好学习</div>

引入式

<head>
 	<link href='./ting.css'></link>
</head>

导入式

@import './index.css'

0 条评论