全部标签
写点什么
学习MySQL开源云计算行业资讯算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业活动专区生涯规划知识管理运维产品经理 查看更多

css 中 background 简写顺序，css 权重应该怎么计算

用户头像
前端史塔克
关注
发布于: 刚刚
css中background简写顺序，css权重应该怎么计算

css 基础篇（第二篇）

回顾

上一篇 css 中基本山的认识了 css 是用来干什么的，以及大概的类型和基本的样式和数写规范之类的东西、重要的还是对于基础前端人员一个必备的技能：Chrome 调试工具，这个是非常重要的，如果不了解或者不太熟悉 css 基础的话，建议去看一看 css 第一篇的东西，这一篇接着 css 开始讲。

常见的 css 选择器

在 css 中，除了类选择器和 id 选择器之外，常见的还有后代选择器和子元素选择器、交集选择并集选择器等。

后代选择器

后代选择器一般是指在 div 中包裹了 a 标签这类的选择器。


// 后代选择器.con a {  color: red;}
复制代码

子类选择器

子类选择器一般是指例如有两层，就需要用到“ > ”，符号


<div><strong></strong></div>
// 子类选择器，一般只选择一层div > strong {  }
// 多层选择器 可以影响到多层div strong {
}
复制代码

交集选择器

交集选择器指的是 既是标签而且又有 class 或 id 的名


<p class="red">红色</p>
// 交集选择器p.red {  color: red}
复制代码

并集选择器

并集选择器是重点，因为在以后会常用到，并集选择表示的是 在 p 和 class=“red” 中都会影响到


p,.red{  color: red}
复制代码


注意：需要注意的是，在未来写 css 中永远要记住，结构一定比样式更重要，如果结构写的不好，没有根据页面的需求去写的话，样式写的再好都没用，所以再拿到设计稿的时候需要在心中有一个清晰的结构图然后再写样式会更好

链接伪类选择器

链接伪类选择器也是十分重要的，有以下这几种，重点记住：hover


  • a:link————未访问的链接

  • a:visited————已访问的链接

  • a:hover————鼠标移动到链接上

  • a:active————选定的链接可以尝试将以下代码粘贴到编辑器中运行之后 鼠标移动到 a 标签中会发生什么！


<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>
  <div class="wrapper">    <a href="http://www.baidu.com" class="wrapper-a">百度搜索不到</a>  </div>  </body></html>
<style>  .wrapper {    color: red;  }  // 利用 hover 让a标签变色  .wrapper-a:hover {    color: pink;  }</style>
复制代码

复合选择器总结

  • 后代选择器：用来选择元素后代————空格隔开

  • 子代选择器：选择最近的一级元素————“ > ”隔开

  • 交集选择器：选择两个标签交集的部分————“ p.one ”

  • 并集选择器：选择某些相同样式的选择器————“ ， ”号隔开

  • 链接伪类选择器：给链接更改状态————a：hover

块级元素和行内元素

块级元素：类似 div 一样，一个独占一行

  • 常见的块级元素：h1~h6、p、div、ul、ol、li

  • 特点：


  1. 独占一行

  2. 高度、宽度、外边距以及内边距都是可以控制的

  3. 宽度默认是容器（父级宽度）的 100%

  4. 是一个容器盒子，里面可以放行内元素或者块级元素注意：p、h1~h6、dt 里面不要放 div

行内元素：类似 span ，一行可以放很多

  • 常见的行内元素（内联元素）：a、strong、b、em、i、del、s、ins、u、span

  • 特点


  1. 一行可以放多个行内元素

  2. 高、宽直接设置时无效的

  3. 默认宽度就是它本身内容宽度

  4. 行内元素只能容纳文本或其他行内元素注意：链接里面不能再放链接

行内快元素：类似 img，一行可以放多个

  • 常见的行内快元素：img、input、td

  • 特点


  1. 和相邻（行内快）元素在一行上，但是之间会有空白缝隙，一行可以显示多个

  2. 默认高度就是本身内容的高度

  3. 高度、行高、外边距和内边距都是可控的



三种类型元素总结

  • 块级元素：一行只能放一个块级元素

  • 行内元素：一行可以放多个行内元素

  • 行内快元素：一行可以放多个行内快元素

标签显示模式转换

  • 标签显示模式转换：display

  • 块级转行内：display：inline；

  • 行内转块级：display：block；

  • 块、行内元素转换为行内快：display：inline-block

css 背景（background）

css 中 background 常用的几种类型


  • background-color：背景颜色

  • background-image：url（图片位置）

  • background-repeat：背景平埔

  • 默认就是 repeat（平埔）

  • 背景不平埔：no-repeat

  • 背景横向平埔：repeat-x

  • 背景纵向平埔：repeat-y

  • background-attachment：acroll | fixed

  • scroll：背景图像时随着图像内容滚动

  • fixed：背景图像固定

  • background-position：背景位置（重点）

  • position：top | center | bottom | left | right

  • background-position：x 坐标 && y 坐标注意：在背景位置中，整个坐标：从左上角（x），（y）到右下角

  • background-position：50px（坐标），10px（y 坐标）；————精确位置- 背景简写：

  • background：背景颜色 背景图片地址 背景平埔 背景滚动 背景位置

  • 例子：background：#ccc url（images/s.jpg） no-repeat fixed top center


设置平埔+滚动如图：



<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <div class="wrapper">  </div>  </body></html>
<style>  .wrapper {    width: 1900px; height: 1080px;    border: 1px solid pink;    /* 设置 横轴：center  纵轴：top  */    /* background: url(./sImg.jpg) no-repeat fixed center top; */
    /* 设置横轴：100px  纵轴：200px */    /* background: url(./sImg.jpg) no-repeat fixed 100px 200px; */
    /* 设置平埔 */    /* background: url(./sImg.jpg) fixed center top; */
    /* 设置滚动 */    /* background: url(./sImg.jpg) center top; */
  }</style>
复制代码


设置 x=100px，y=200px 如图



其余的大家可以自行试试

a 链接取消下划线

  • text-decoration：none；————取消 a 链接下划线一般 a 链接都会有一个下划线，通常情况下都会选择取消这个下划线对用户体验更友好

背景透明

  • background：rgba（0，0，0，0.3）————表示颜色的透明度

背景总结

  • background-color：背景颜色

  • background-image：url（）：背景图片

  • background-repeat：背景平埔（repeat/no-repeat/repeat-x/repeat-y）

  • background-position：背景位置（center center）

  • background-attachment：背景固定还是滚动（scroll/fixed）

  • 背景简写：background：背景颜色 背景图片地址 背景平埔 背景滚动 背景位置

css 优先级问题

css 全权重的计算也非常重要，会影响到布局，下面的图片是 css 中权重的计算。可以尝试在编辑器中试一试



好了，css 的第二讲就讲完了，这篇内容还是非常多而且非常重要的，小伙伴们可以好好的温习温习。有什么不懂得欢迎留言区讨论

划线
评论
复制
发布于: 刚刚阅读数: 2

版权声明: 本文为 InfoQ 作者【前端史塔克】的原创文章。

原文链接:【http://xie.infoq.cn/article/ebefd044da0429789156d5fab】。文章转载请联系作者。

CSS前端
用户头像

前端史塔克

关注

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变，更高效学习前端知识及后续发展趋向，更好快速的融入到工作中 关注公号：前端史塔克

评论

发布
暂无评论
Copyright © 2021, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
css中background简写顺序，css权重应该怎么计算