• HTML 第4章初始CSS3


    什么是CSS?

    CSS全称为层叠样式表,通常又称为风格样式表。

    引用CSS样式:

    语法:

    <h1 styske="color:red;">style属性的应用</h1>

    <p style="font-size:14px;color:green;">直接在HTML标签中设置样式</p>

    内部样式表:

    把CSS代码写在<head>的<style>标签中,与HTML内容在位于同一个HTML文件中。

    外部样式表:

    链接外部样式表:

    语法:

    <head>

    。。。

    <link href="style.css"rel="stlesheet"type="text/css">

    。。。。

    </head>

    导入外部样式表:

    语法:

    <head>

    。。。。。。

    <style>

    <!--

    @import url("common.css");

    -->

    </style>

    </head>

    CSS3的基本选择器:

    (1):标签选择器;

    (2):类选择器;

    (3):ID选择器;

    CSS3的高级选择器:

    (1)层次选择器:
    选择器                           类型                                         代码  <style type="text/css>

    E F                         后代选择器                           body p{ background:red;}</style>

    E>F                        子选择器                              body>p{background:pink;}</style>

    E+F                         相邻兄弟选择器                 body+p{background:green;}</style>

    E-F                          通用兄弟选择器                  body-p{backgroound:yellow;}</style>

    (2)结构伪类选择器:

    E:first-child;

    E:last-child;

    E F:nth-child;

    E:fisrt-of-type;

    E:last-of-type;

    E F:nth-of-type;

    (3)属性选择器:

    选择器                                                代码                         

    E[attr]                                   a[id]{background:yellow;};        a[id][target]{background:yellow;]

    E[attr=val]                             a[id=first]{background:red;]

    E[attr$=val]                          a[class*=links]{backgrond:red;}

    E[attr^=val]                          a[hreff^=http]{background:red;}

    E[attr*=val]                           a[href$=png]{background:red;}

    实例代码:

    (1);

    <html>

    <head lang="en">

    <meta charset="UTF-8">

    <title>样式引用优先级问题</title>

    <!--外部样式表-->

    <style>

    h1{

    color:green;

    }

    </style>

    </head>

    <body>

    <h1 style=color:red">。。。</h1><!--行内样式-->

    <p>。。。。</p>

    <p>。。。。。</p>

    </body>

    </html>

    (2):

    <html>

    <head lang="en">

    <meta charset="UTF-8">

    <title>三种基本选择器的优先级</title>

    <style type="text/css">

    p{

    font-size:14px;

    color:red;

    }

    h1{

    color:blue;

    }

    .h1{

    color:pink;

    }

    #h1{

    color:green;

    }

    </style>

    </head>

    <body>

    <h1 class="h1" id="h1">。。。</h1>

    <p>。。。。</p>

    </body>

    </html>

  • 相关阅读:
    poj1125传播谣言(弗洛伊德,求最长路)
    poj2253青蛙(可到达路径的单次跳跃最短距离)
    poj1860 兑换货币(bellman ford判断正环)
    poj1062 昂贵的礼物(dijkstra+枚举)
    hdu4081 秦始皇修路(次小生成树)
    梦想,永不停息!
    nofollow标签如何使用
    后台地址报错:Service Unavailable
    DEDECMS批量修改默认文章和列表命名规则的方法
    FreeOnTerminate 的线程在线程管理类的Destroy释放时手工释放的问题
  • 原文地址:https://www.cnblogs.com/wsnb8/p/7455392.html
Copyright © 2020-2023  润新知