• CSS使用简介


    1.CSS 指层叠样式表 (Cascading Style Sheets)

    2.说明:

         样式定义如何显示 HTML 元素;
         样式通常存储在样式表中;
         把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题;
         外部样式表可以极大提高工作效率;
         外部样式表通常存储在 CSS 文件中;
         多个样式定义可层叠为一 ;

    3.分类:  一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
        1)浏览器缺省设置
        2)外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />

        3)内部样式表(位于 <head> 标签内部)<style type="text/css"></style>
        4)内联样式(在 HTML 元素内部)

    4.CSS 语法:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

       selector {declaration1; declaration2; ... declarationN }

    5.选择器分类:

       1)派生选择器:派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

          strong {
    color: red;
    }

    h2 {
    color: red;
    }

    h2 strong {
    color: blue;
    }

    下面是它施加影响的 HTML:

    <p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
    <h2>This subhead is also red.</h2>
    <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

    2)id 选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

    #red {color:red;}
    #green {color:green;}

    下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>

    3)类选择器:类选择器以一个点号显示:

    .center {text-align: center}

    在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

    <h1 class="center">
    This heading will be center-aligned
    </h1>
    <p class="center">
    This paragraph will also be center-aligned.
    </p>

    4)属性选择器: 对带有指定属性的 HTML 元素设置样式。
          可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

    下面的例子为带有 title 属性的所有元素设置样式:

    [title]
    {
    color:red;
    }

    6.常用样式设置:

      1)a:link{}

      2) a:visited{}

      3) a:hover:{}

      4) a:active{}

  • 相关阅读:
    rsyslog 存储到 mysql
    LAMP 建立 Wordpress 站点 Linux Apache MariaDB PHP
    CentOS 6.9 CentOS 7.4 自动安装系统 kickstart
    shell编程, 100文钱买100只鸡, 简单实现
    创建私有CA, 加密解密基础, PKI, SSL
    运维派 企业面试题6 防dos攻击
    运维派 企业面试题4&5 创建10个 用户 ; ping探测主机是否在线
    运维派 企业面试题3 为上题中的 "十个随机字母_test.html" 文件 更名
    运维派 企业面试题2 创建10个 "十个随机字母_test.html" 文件
    MongoDB释放磁盘空间
  • 原文地址:https://www.cnblogs.com/rrxc/p/3858559.html
Copyright © 2020-2023  润新知