zoukankan      html  css  js  c++  java
  • HTML CSS样式

    一、样式表

    1.内联样式表:

    <span style="background-color:#FF0">span层标签,默认用多少占多少</span>

    2.内嵌样式表:

    <style type="text/css">
    p,div
    {
         font-size:36px;
         color:#F00;
         background-color:#60F;}
    </style>

    3.外部样式表:

    需要新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表附加样式表。一般用link连接方式。

    <style>
    *
    {
        margin:0px;
        padding:0px;
        
        }
    </style>
    <link href="Untitled-css2.css" rel="stylesheet" type="text/css" />

    二、选择器

    1.标签选择器:

    <style>
    qq
    {
        color:#0FF;
        background-color:#63F}
    </style>

    2.class选择器:

    <style>
    .qq
    {
        color:#0FF;
        background-color:#63F}
    </style>
    <p class="qq">今天天气很不错。</p>

    3.id选择器:

    #qq
        {
            color:#0F0;
            background-color:#666;
            text-decoration:none;
            font-size:36px;}
    <p id="qq">12345</p>

    4.复合选择器:

    (1)用,隔开表示并列

    <style type="text/css">
    p,span
    {
        color:#F00;
        background-color:#0F6;}
    </style>

    (2)用空格隔开表示后代:

    <style>
    .qq p
    {
        color:#F00;
        background-color:#0F6;}
    </style>

    三、超链接的Style

      a:link 超链接被点前状态

      a:visited 超链接点击后状态

      a:hover 悬停在超链接时

      a:active 点击超链接时

     

    <style>
    a:link
    {
        color:#000;
        text-decoration:none;
        }
    a:visited
    {
        color:#0F0;
        text-decoration:underline;}
    a:hover
    {
        color:#F00;
        text-decoration:underline;}
    a:active
    {
        color:#F60;
        text-decoration:underline;}
    </style>

     

     

  • 相关阅读:
    hadoop面试
    常用脚本
    1.kafka
    2.flink
    java面试
    Hbase 项目
    linux 2>&1 和 &的意思
    Jetbrains系列产品重置试用方法
    解决GitHub网页githubusercontent地址无法访问问题
    stylus 成熟的写法
  • 原文地址:https://www.cnblogs.com/beens/p/5307018.html
Copyright © 2011-2022 走看看