• CSS-学习笔记


    id和class选择器

    HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。类选择器以一个点"."号显示

    层叠次序 1、浏览器缺省设置 2、外部样式表 3、内部样式表(位于<head>标签内部)4、内联样式(在HTML元素内部)

    当使用简写属性时,顺序为body {background:background-color background-image background-repeat background-attachment background-position}

    CSS文本属性:color direction(文本方向) letter-spacing(字符间距) lin-height(设置行高) text-align(对齐文本) text-decoration(向文本添加修饰) text-indent(缩进元素中文本的首行 text-shadow(设置文本阴影) text-transform(控制元素中的字母) vertical-align(设置元素的垂直对齐) white-space(设置元素中空白的处理方式) word-spacing (设置字间距)

    在计算机屏幕上,sans-serif字体被认为是比serif字体容易阅读

    为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

    em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

    因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

    CSS伪类:

    a:link {color:#FF0000;} /* 未访问的链接 */
    a:visited {color:#00FF00;} /* 已访问的链接 */
    a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    a:active {color:#0000FF;} /* 已选中的链接 */

    CSS Positioning定位
    Static-没有定位 Fixed-相对浏览器窗口是固定位置 Relative--相对正常位置 absolute--相对于最近的已定位父元素

    下拉菜单: dropdown{}  dropdown-content{}

    .dropdown:hover .dropdown-content {
          display: block;
      }

    HTML 部分:

    我们可以使用任何的 HTM,元素来打开下拉菜单,如:<span>, 或 a <button> 元素。

    使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。

    使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。

    CSS 部分:

    .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

    .dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽带一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

    我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

    :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

    嵌套标签及下拉菜单

    框模型:Margin - 清除边框区域。Margin没有背景颜色,它是完全透明 Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响 Content - 盒子的内容,显示文本和图像

    属性和值得选择器 [title~=hello] {color:blue;}          [lang|=en] {color:blue;}

    属性选择器样式无需使用class或id的形式: input[type="text"] input[type="button"]

  • 相关阅读:
    好玩的SQL
    Oracle常用函数
    树控件DeleteAllItems之前先SelectItem(NULL)
    MFC控件位置调整
    C++中一个0xC0000005访问冲突问题
    为MFC按钮添加各种图片
    LVN_ITEMCHANGED(OnItemchanged)通知响应多次的问题
    android 里边的mk文件的解析
    定义属于自己的标题栏
    block 影响代码执行由上往下执行顺序 从而影响功能的解决
  • 原文地址:https://www.cnblogs.com/newguy/p/5243859.html
Copyright © 2020-2023  润新知