zoukankan      html  css  js  c++  java
  • css 基础语法

    元素选择器

    h1 {color:red; font-size:14px;}

    id选择器

    #sidebar {
        border: 1px dotted #000;
        padding: 10px;
        }

    类选择器

    .center {text-align: center}

    属性选择器

    //下面的例子为带有 title 属性的所有元素设置样式:
    [title]
    {
    color:red;
    }
    //下面的例子为 title="W3School" 的所有元素设置样式:
    [title=W3School]
    {
    border:5px solid blue;
    }
    //包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
    [title~=hello] { color:red; }
    //带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
    [lang|=en] { color:red; }

    选择器的分组

    //对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。
    h1,h2,h3,h4,h5,h6 {
      color: green;
      }

    选择器的继承

    //子元素从父元素继承属性。
    body {
         font-family: Verdana, sans-serif;
         }

    派生选择器

    li strong {
        font-style: italic;
        font-weight: normal;
      }

    其他复杂写法

    //将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
    a[href][title] {color:red;}
    //后代选择器
    //
    只对 h1 元素中的 em 元素应用样式 h1 em {color:red;}
    //子元素选择器
    h1 > strong {color:red;}

    //相邻兄弟选择器

    h1 + p {margin-top:50px;}
    p.important {color:red;}
    .important.warning {background:silver;}

    注意区别:

    td.fancy {
        color: #f60;
        background: #666;
        }
    //在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。
    .fancy td {
        color: #f60;
        background: #666;
        }
    //类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。

    伪类

    a:link {color: #FF0000}        /* 未访问的链接 */
    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */
    属性描述CSS
    :active 向被激活的元素添加样式。 1
    :focus 向拥有键盘输入焦点的元素添加样式。 2
    :hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
    :link 向未被访问的链接添加样式。 1
    :visited 向已被访问的链接添加样式。 1
    :first-child 向元素的第一个子元素添加样式。 2
    :lang 向带有指定 lang 属性的元素添加样式。 2
  • 相关阅读:
    用友U8远程接入客户端提示启动客户端错误
    oracle 10g 错误 ORA-01653 的解决过程
    用友 凭证引入 如何删除引入的外部凭证
    Delphi实现程序只运行一次并激活已打开的程序
    Delphi Raize的日期控件RzDateTimeEdit星期几不能正确显示的问题
    U8 提示“操作员没有查询权限或视图权限”
    数据库图片存储也读取
    Delph最简单i获取外网IP
    cxgrid 单元格合并
    cocos2d 中使用 pickerView 简单的老虎机应用
  • 原文地址:https://www.cnblogs.com/tiandi/p/3841926.html
Copyright © 2011-2022 走看看