• CSS学习笔记


    总结一些以前模糊没弄明白的概念.

    1.display 属性

    div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

    您可以使用 display属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

    但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

    2.position 属性
    通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

    position 属性值的含义:
    static
    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
    relative
    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
    absolute
    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
    fixed
    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    h2
      {
      position:absolute;
      left:100px;
      top:150px;
      }

    3.点.的作用

    .important 表示所有的元素上都可以应用

    p.important 表示只在p上应用

    h1.important 表示只在h1上应用

    而不需要在应用时输入class="p.important", 直接class="important"即可.

    <html>
    <head>
    <style type="text/css">
    .important {color:red;}
    </style>
    </head>

    <body>
    <h1 class="important">This heading is very important.</h1>

    <p class="important">This paragraph is very important.</p>

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

    <p>...</p>
    </body>
    </html>


    4.ID 选择器
    首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

    请看下面的规则:

    *#intro {font-weight:bold;}与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:

    #intro {font-weight:bold;}这个选择器的效果将是一样的。


    第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。

    以下是一个实际 ID 选择器的例子:

    <p id="intro">This is a paragraph of introduction.</p>

    类选择器还是 ID 选择器?
    在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。

    区别 1:只能在文档中使用一次
    与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。因为一个html文档里, 相同的id只能有一个.

    5.超链接样式

    a:link {color: #FF0000}  /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */

    在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!a:active 必须位于 a:hover 之后,这样才能生效!

  • 相关阅读:
    CF Round #427 (Div. 2) C. Star sky [dp]
    顺时针打印矩阵
    堆 栈-相关知识【转】
    二叉树的镜像
    树的子结构
    合并两个排序的链表
    数值的整数次方
    位运算:二进制中1的个数
    斐波那契数列及其变形
    重建二叉树
  • 原文地址:https://www.cnblogs.com/liuzhendong/p/2240961.html
Copyright © 2020-2023  润新知