CSS 拾遗

pipidi

zhujingdi1998@gmail.com

CSS是如何实现的

当浏览器显示文档的时候 他必须将文档的内容和他的样式结合在一起

1. 浏览器将html和css转换成DOM对象DOM在计算机中表示文档    
2. 浏览器显示DOM

CSS的新名词

  • 属性(property):可以理解的标识符 例子:字体,宽度,背景颜色
  • 属性值(value):表示你要把属性修改成什么样子

CSS声明

Alt text 1. 如果你写错了属性值,声明将会无效,引擎会忽略掉他。 2. 使用美式拼写,不能打错别字

CSS语句

@import 'custom.css';

该@-规则向当前 CSS 导入其它 CSS 文件

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

上述语句在规格大于801像素的情况下才会应用。

基本选择器

通用选择(*)是最终的王牌。它允许选择在一个页面中的所有元素。由于给每个元素应用同样的规则几乎没有什么实际价值,更常见的做法是与其他选择器结合使用(参考下面 组合 .)

<html>
    <head>
        <meta charset="utf-8">
        <title>My Css experiment</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>
            <p>I think the containing box just needed
            a <strong>border</strong> or <em>something</em>,
            but this is getting <strong>out of hand</strong>!</p>
          </div>
    </body>
</html>
*{
    padding: 5px;
    border: 1px solid black;
    background: rgba(255, 0, 0, 0.25)
}

存在和值属性选择器

  • [attr]: 改选择器包含attr的所有属性。
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]:元素的属性中还包含其他属性值,都会被应用红色的文本颜色
    <ul>
      <li data-quantiy="1kg" data-vegetable>Tomatoes</li>
      <li data-quantiy="3" data-vegetable>Onions</li>
      <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
      <li data-quantity="3" data-vegetable="spicy ">ite </li>
    </ul>
[data-vegetable]{
    color: green;
}

[data-vegetable="liquid"] {
    background-color: goldenrod;
  }

  /* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素,
  即使元素的属性中还包含其他属性值,都会被应用红色的文本颜色 */
  [data-vegetable~="spicy"] {
    color: red;
  } 

NOTE:本例中的 data-* 属性被称为 数据属性。它们提供了一种在HTML属性中存储自定义数据的方法

伪正则选择器

  • [lang|="fr"] :用来选择attr的属性的值是fr或者fr开头的 用于语言编码处理。
  • [data-vegetable*="not spicy"] :用来处理属性值中包含not spicy的元素 。
  • [data-quantity$="kg"] :用来处理kg结尾的元素。
  • [data-quantity^="optional"] :用来处理optional开头的元素

伪类

:作为前缀,被添加到选择器末尾的关键字,当你的元素在特定状态下才本指定的元素。

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
/* 这些样式将在任何情况下应用于我们
的链接 */

a {
  color: blue;
  font-weight: bold;
}

/* 我们想让被访问过的链接和未被访问
的链接看起来一样 */

a:visited {
  color: blue;
}

/* 当光标悬停于链接,键盘激活或锁定
链接时,我们让链接呈现高亮 */

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

伪元素

使用的是两个冒号(::),添加到选择器后面去选择某个元素的某个部分

domo:

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>
[href^=http]::after {
  content: '⤴';
}

组合器和选择器组

| Combinators | Select | ------ | ------ | ------ | | A,B | 匹配满足A(和/或)B的任意元素 | A B | 匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点) |A > B| 匹配任意元素,满足条件:B是A的直接子节点 |A + B| 匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面) |A ~ B| 匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)

NOTE: +的意思是当你选择在+之前的元素的兄弟元素

h1+p {
  font-style: bold;
  color: blue;
}
<h1>Welcome to my website</h1>

<p>Hello, and welcome! I hope you enjoy your time here.</p>

浮动

  • left- 将元素浮动到左侧
  • right- 将元素浮动到右侧
  • none- 默认值 不浮动
  • inherit-继承父元素的浮动属性
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p>
</div>
div:nth-of-type(1){
    width: 48%;
    float: left;
}
div:nth-of-type(2){
    width: 48%;
    float: right;
}

定位技术

  • 静态定位(Static positioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。
  • 相对定位(Relative positioning)允许我们相对元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
  • 绝对定位(Absolute positioning)将元素完全从页面的正常布局流中移出,类似将它单独放在一个图层中. 我们可以将元素相对于页面的 元素边缘固定,或者相对于离元素最近的被定位的祖先元素(ancestor element)。绝对定位在创建复杂布局效果时非常有用,例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板.
  • 固定定位(Fixed positioning)与绝对定位非常类似,除了它是将一个元素相对浏览器视口固定,而不是相对另外一个元素。 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。

relative

相对定位指的是在文档流当中,然后topleft是根据原来在文档流当中的位置来决定的

absolute

绝对定位是脱离出文档流,然后以整页面为参照系

阅读量