css 基础知识

• css 是什么？层叠样式表
• css 主要功能是什么？ 元素样式和元素布局

css 定义	功能	备注
css 是什么？	层叠样式表	元素长什么样
css 主要功能	元素样式和元素布局
css 样式来源	用户代理样式和用户自定义样式	用户代理样式为浏览器默认，用户自定义样式是用户可修改的样式

样式的来源

• 1、浏览器默认：用户代理样式
• 2、用户自定义样式

用户自定义样式	使用方式
行内样式	style=”color=”red””
文档样式	<style>h1{color:red;}</style>
外部样式	<link rel="stylesheet" href="css/style.css" >
继承样式	子元素继承父元素部分元素可被继承如 color 和 background-color: red;
样式优先级	行内样式>文档样式>外部样式>代理样式>继承样式
样式书写顺序	写在后面的会覆盖前面的

• 1 行内样式

<!-- 行内样式 -->
<h1 color="red">hello word</h1>

• 2 文档样式也叫内部样式

<h1>hello word</h1>
<!-- 内部样式也叫文档样式 -->
<style>
  h1 {
    color: red;
  }
</style>

• 3 外连样式也叫外部样式

<!-- 外连样式 -->
<link rel="stylesheet" href="css/style.css" />
<h1>hello word</h1>

更改元素样式需要通过以下方法

• 1 使用元素选择器查找元素
• 2 更改元素样式规则

基本选择器	使用说明	上下文选择器	使用说明
元素或标签	如 h1、p、div…等	子元素>	.list>li{}
属性选择器	如 h1[hello=”world”]	后代元素(空格)	.list li{}
群组选择器	如 h1,h2{color:red;}用逗号分隔	相邻兄弟+	.list+li{}
通配选择器	*表示所有元素!important *别	所有兄弟~	.list ~{}

基本选择器实例

<!-- 元素或标签选择器使用方法h1{color:red;} -->
<h1>hello world</h1>
<p>p标签选择器</p>
<style>
  h1 {
    color: red;
  }
</style>
<!-- 属性选择器使用方法h1[hello="world"]{color:red} -->
<h1 hello="world"></h1>
<style>
  h1[hello="world"] {
    color: red;
  }
</style>
<!-- 群组选择器h1#title,h2.title{color:red;} -->
<h1 id="title">hello world</h1>
<h2 class="title">hello world</h2>
<style>
  h1#title,
  h2.title {
    color: red;
  }
</style>

<!-- 通配选择器*加上!important为*别 -->
<style>
  html body * {
    color: red !important;
  }
</style>

上下文选择器（根据位置或者特征选择）

<ul class="list">
  <li class="item">item1</li>
  <li class="item second">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
  <li class="item">item7</li>
  <li class="item">item8</li>
</ul>
<style>
  /* 上下文选择器,1 子元素> */
  .list > li {
    border: 1px solid #ccc;
  }
  /* 上下文选择器，2 后代选择器 空格 */
  .list li {
    border: 2px solid #bbcc;
  }
  /* 上下文选择器,3 相邻兄弟选择器+ */
  .item.second + li {
    background-color: darkorange;
  }
  /* 上下文选择器,4 所有兄弟选择器 ~ */
  .item.second ~ li {
    color: darkseagreen;
  }
</style>

选择器的权重 Selector Specificity: (0, 0, 1)

• 1 标签选择器权重是个位（0，0，1）表示标签数量为 1，十位 class 为 0，百位 id 为 0
• 2 class 属性选择器权重是十位（0，1，0）表示十位 class 数量为 1，百位 id 为 0，标签为 0
• 3 id 属性选择器权重是百位（1，0，0）表示百位 id 数量为 1，class 为 0，标签为 0

<h1 class="title">item</h2>
<div class="title vip">增加class数量以提升选择器权重</div>
<style>
  /* 标签选择器，权重为(0,0,1) */
  h1{
    color:red;
  }
  /* class选择器,权重为(0,1,0) */
  .title{
    color:red;
  }
  /* 增加选择器权重也就是增加class的数量，权重为(0,2,0) */
  .title.vip{
    color:red;
  }

</style>

• 由于 id 属性的选择器为百位，权重太高，不方便做层叠样式覆盖，所以不建议使用 id 属性，tag 标签的数量有限，所以一般也不采用此属性来做选择器，class 可以任意命名无限增加，为了代码更具有弹性，所以建议尽量选择它来做开发