HTML5第四天样式选择器及部分标签演示设置示例

1、先说css，什么是css?

　　我们搭建的网页，通过html进行网页骨架的搭建，就像盖房子，骨架搭建完了，就该搞装修了，美化一下。CSS就是这个作用，对网页的样式进行设置。使用CSS，首先需要掌握的就是选择器。

2、什么是选择器？

　　一个网页上有很多标签元素，如何快速、准确的定位到一个元素，或者对多个元素进行统一的样式设置，这时候就是使用选择器的时间。常用的选择器包括元素(标签)选择器、id选择器、类选择器、后代选择器、子选择器，还可以对选择器进行分组。更详细的介绍可以查看W3School官网。

　　选择器使用演示：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  /* 选择器的优先级：id选择器>类选择器>标签选择器 */

    /* 标签选择器   直接以标签名+{} */
    h1{
        /* 在大括号里边设置标签及标签里边内容的样式 */
        border:1px solid red;    /* 设置h1标签的边框样式 */
        color:pink;     /* 设置字体颜色 */
    }
    /*id选择器    #+id名+{}  */
    #p1{
        border:1px solid red;    /* 设置h1标签的边框样式 */
        color:pink;     /* 设置字体颜色 */
        font-size:26px;  /* 设置字体大小 */
    }
    /*类选择器    .+类名+{}  */
    .p2{
        border:3px solid black;
    }
    /* 后代选择器 */
    p>a>span{
        font-family:楷体;
    }
    /* 子选择器    子选择器只能选中某元素的直接子元素 */
    h1>strong{
        color:red;
    }
    /* 选择器分组 */
    #p1,.p2{
        /* 里边写属性 */
    }
    </style>
 <body>
    <div>
        <h1>太阳系</h1>
        <p id="p0"><a href="http://www.baidu.com"><span>太阳</span></a></p>
        <!-- id：为标签设置id，每个标签只能设置一个id
        class:为标签设置类名，一个标签可以有多个类名
        id和class可以在一个标签中同时存在，但是全文中id名和class名只能时唯一的 -->
        <p id="p1" class="p1">金星</p>
        <p id="p2" class="p2">火星</p>
        <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
        <h1>This is <em>really <strong>very</strong></em> important.</h1>
    </div>
 </body>
</html>

View Code

3、部分标签样式设置示例（边框、字体、超链接样式）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>边框、字体、超链接样式</title>
  <style>
    div{
        width:200px;
        height:200px;
        /* 边框样式综合来写 */
        /* border:1px solid pink; */

        /* 边框样式属性分开写 */
        /* border-5px;
        border-style:solid;
        border-color:red; */

        /*边框样式属性分位置写  */
        border-bottom:2px dashed pink;

        /* 字体样式 */
        font-family:楷书;
        font-size:16px;
        font-style:italic;   /* italic:斜体 */
        color:red;
        font-weight:100;    /*  100~900:越来越粗         hold:粗体    holder:更粗 */
    }
    a{
        /* 设置文本线的位置 */
        text-decoration:line-through;     /* none、underline :下划线在文本下方      overline:上     line-through:中 */
    }
  </style>
 </head>
 <body>
    <div>大漠孤烟直，长河落日圆</div>
    <a href="http://www.baidu.com">百度一下</a>
 </body>
</html>

View Code

HTML5第四天 样式选择器及部分标签演示设置示例

HTML5第四天样式选择器及部分标签演示设置示例