• css笔记


    • 语法不常见的一条:p {font-family: "sans serif";}值为单词要加引号。
    • 选择器分组:
      h1,h2,h3,h4,h5,h6 {
        color: green;
        }

      上下文选择器 (contextual selectors)(派生选择器)

      <p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>
      
      <ol>
      <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
      <li>我是正常的字体。</li>
      </ol>
      
      
      li strong {
          font-style: italic;
          font-weight: normal;
        }
      [attribute] 用于选取带有指定属性的元素。
      [attribute=value] 用于选取带有指定属性和值的元素。
      [attribute~=value] 用于选取属性值中包含指定词汇的元素。
      [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
      [attribute^=value] 匹配属性值以指定值开头的每个元素。
      [attribute$=value] 匹配属性值以指定值结尾的每个元素。
      [attribute*=value] 匹配属性值中包含指定值的每个元素。
    • 插入样式表的方法有三种:

      外部样式表

      <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css" />
      </head>

      内部样式表

      <head>
      <style type="text/css">
        hr {color: sienna;}
        p {margin-left: 20px;}
        body {background-image: url("images/back40.gif");}
      </style>
      </head>

      内联样式(写在标签里的)

      <p style="color: sienna; margin-left: 20px">
      This is a paragraph
      </p>
    • 如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:

      body
        { 
          background-image:url('/i/eg_bg_03.gif');
          background-repeat:no-repeat;
          background-position:66% 33%;
        }
    • 背景关联

      body 
        {
        background-image:url(/i/eg_bg_02.gif);
        background-repeat:no-repeat;
        background-attachment:fixed  /* 背景固定*/
        }

      CSS 背景属性

      属性描述
      background 简写属性,作用是将背景属性设置在一个声明中。
      background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
      background-color 设置元素的背景颜色。
      background-image 把图像设置为背景。
      background-position 设置背景图像的起始位置。
      background-repeat 设置背景图像是否及如何重复。
    • text-indent 可以使用所有长度单位,包括百分比值。

      百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。

      在下例中,缩进值是父元素的 20%,即 100 个像素:

      div { 500px;}
      p {text-indent: 20%;}
      
      <div>
      <p>this is a paragragh</p>
      </div>
    • text-align:
      left 把文本排列到左边。默认值:由浏览器决定。
      right 把文本排列到右边。
      center 把文本排列到中间。
      justify 实现两端对齐文本效果。
      inherit 规定应该从父元素继承 text-align 属性的值。
    • word-spacing 和 letter-spacing
    • text-decoration 有 5 个值:

      • none
      • underline
      • overline
      • line-through
      • blink
    • text-transform
      • none
      • uppercase
      • lowercase
      • capitalize
    • 下面的表格总结了 white-space 属性的行为:

      空白符换行符自动换行
      pre-line 合并 保留 允许
      normal 合并 忽略 允许
      nowrap 合并 忽略 不允许
      pre 保留 保留 不允许
      pre-wrap 保留 保留 允许
       
    • CSS 文本属性

      属性描述
      color 设置文本颜色
      direction 设置文本方向。
      line-height 设置行高。
      letter-spacing 设置字符间距。
      text-align 对齐元素中的文本。
      text-decoration 向文本添加修饰。
      text-indent 缩进元素中文本的首行。
      text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
      text-transform 控制元素中的字母。
      unicode-bidi 设置文本方向。
      white-space 设置元素中空白的处理方式。
      word-spacing 设置字间距。
    • 使用 em 来设置字体大小

      1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em:pixels/16=em

      (注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em

    • CSS 字体属性

      属性描述
      font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
      font-family 设置字体系列。
      font-size 设置字体的尺寸。
      font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
      font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
      font-style 设置字体风格。
      font-variant 以小型大写字体或者正常字体显示文本。
      font-weight 设置字体的粗细。
    • 链接的四种状态:

      • a:link - 普通的、未被访问的链接
      • a:visited - 用户已访问的链接
      • a:hover - 鼠标指针位于链接的上方
      • a:active - 链接被点击的时刻
  • 相关阅读:
    iphone 拨打电话的 两种方法-备
    vi编辑器经典技巧 -备
    iOS图片压缩问题
    NSStirng、NSArray、以及枚举(Method小集合)
    宏定义 button 方法 --备
    debug 输出 以及宏定义--备
    从别人写的 Object-C 中 Singleton (单例) 模式 中的一些理解--备
    makefile编写---.c .cpp 混合编译makefile 模板
    图像处理之基础---线性卷积和循环卷积的区别
    图像处理之基础---卷积去噪
  • 原文地址:https://www.cnblogs.com/liurenxingyu/p/4763350.html
Copyright © 2020-2023  润新知