黑马程序员——CSS

最新推荐文章于 2023-04-10 13:32:25 发布

a378983320

最新推荐文章于 2023-04-10 13:32:25 发布

阅读量411

点赞数

分类专栏： JavaWeb 文章标签： android css 黑马程序员

本文链接：https://blog.csdn.net/a378983320/article/details/48223343

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

——- android培训、java培训、期待与您交流！ ———-

1.1，css技术
1，CSS：层叠样式表。主要功能：负责页面上的数据的展示样式效果设置。
Html本身可以做到页面的效果设置。为了使显示内容和显示样式分割开。引入css了。
Html负责显示内容。Css负责显示的样式。

2，Css的语法

选择器{
    属性：属性值 属性值 属性值；
    属性：属性值；
    。。。。
    }

3，选择器：页面的显示内容通过html中的标签决定的。Css通过选择器，
可以定位到某个标签。可以为该标签设置显示的样式。
属性：w3c组织定义好的。例如可以设置高度宽度，颜色。Border（边框）

1.2，css和html的结合方式
1，通过标签内的style属性，书写css的代码。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>02css-style.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <div style="border:solid red 1px;">div1的内</div>
    <div style="border:solid blue 3px">div2的内</div>
    <span style="border:solid red 1px;">span1的内容</span>
    <span style="border:solid red 1px; font-size: 10px" >span2的内容</span>
    <p>p的内容</p>
  </body>
</html>

2，书写在style标签内

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03css-sytle.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 通常情况我们把style标签书写head标签内 -->
    <style type="text/css">

        /*修饰多种标签，可以使用逗号分开*/
        div,span,p{
            border:solid 1px blue;
            font-size: 30px;
        }

    </style>
  </head>

  <body>
    <div >div1的内</div>
    <div>div2的内</div>
    <span >span1的内容</span>
    <span>span2的内容</span>
    <p>p的内容</p>
  </body>
</html>

3，使用link标签引入CSS文件，通过href属性==css文件的路径。

4，在style标签内书写 @import url(‘css文件的路径’)—–少见

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>04css--import.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link rel="stylesheet"  type="text/css" href="css01.css">
    <!--  <style type="text/css">
        @import url("css01.css");
    </style>  -->
  </head>

  <body>
    <div >div1的内</div>
    <div>div2的内</div>
    <span >span1的内容</span>
    <span>span2的内容</span>
    <p>p的内容</p>
  </body>
</html>

1.3，css选择器：主要是用来选择css代码作用的html标签
1，标签名选择器
在书写css代码的时候，在大括号的前面直接书写标签名
格式：
标签名{
CSS代码
}

作用给定义的相同标签的标签。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>05css-标签名选择器.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css">
        p{
            color:red;
            font-size: 100px;
            /* 需要用户自己去支持 */
            font-family: "叶根友毛笔行书2.0版";
        }
    </style>

  </head>

  <body>
        <p>这是段落内的标签</p>
  </body>
</html>

2，id选择器
Html的标签上基本都有一个标准的属性id（属性名），
（通常我们在同一页面中，不同的标签中的id的属性值设置的不同的值。尽可以保证id里面的值唯一）
我们可以通过id属性的值来选择当前这个标签。
格式：
#标签的id属性值{
CSS代码
}

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>06css-id选择器.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">

        #div1{
            font-family: "叶根友毛笔行书2.0版";
            font-size: 100px;
        }

    </style>
  </head>

  <body>
    <div id="div1">这是div1的内容</div>
    <div id="div2">这是div2的内容</div>
  </body>
</html>

3，class选择器（类选择器）
Html中的标签上都可以书写class属性，我们可以通过class属性的值选择当前这个标签

格式：
    . class的属性值{
        CSS代码

}
不管是什么标签，只要class匹配到，就会显示出css设置的样式。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>07css-class选择器.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        .foo{
            font-family: "楷体";
            font-size:100px;
            color:yellow;
        }

    </style>
  </head>

  <body>
        <div class="foo">这是div的内容</div>
        <span class="foo">这是span的内容</span>
  </body>
</html>

4，组合选择器
格式：选择其中可以设置多个选择器，通过逗号分隔开。单独写标签名，或者id选择都可以。
id选择器，class选择器，标签名选择器 …..{
CSS代码
}

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>08css--组合选择器.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        /* 同时作用在div标签和p标签上 */
        p,div{
            font-size:100px;
            color:red;
        }

    </style>
  </head>

  <body>
    <p>p的内容</p>
    <div>div的内容</div>
  </body>
</html>

5，关联选择器
关联选择期：可以设置某个标签下的标签的样式。
格式：
父标签子标签{
CSS代码
}

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>09-css关联选择器.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 
     -->
     <style type="text/css">
        /* 为div标签内的div设置背景色---红色 */
        div div{

            /* 背景色  */
            background-color: red;
        }
     </style>
  </head>

  <body>
        <div>
            <div>这是子div</div>
        </div>
        <div>
            这不是子div
        </div>
  </body>
</html>

6，伪元素（伪类）选择器
css中已经给我们定义好了一些选择器，可以直接作用在某些标签上。
并且标签的不用状态可以设置不同的样式。

伪元素选择器：
:link 标签为被访问之前的样式
:hover 鼠标悬停在某个标签上的样式
:active 鼠标点击，但没有松开时的样式（瞬间状态）
:visited 鼠标点击之后的样式效果设置
顺序问题：link visited hover active

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>10伪类.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        /* 没有访问过的样式 */
        a:LINK {
            font-size: 30px;
            color:black;
            text-decoration:none;
        }

        a:VISITED{
            font-size: 30px;
            color:blue;
            text-decoration:none;
        }

        a:HOVER {
            font-size: 35px;
            color:red;
            text-decoration:underline;
        }
        /*不常用  */
        a:ACTIVE {
            font-size: 50px;
            color:gray;
            text-decoration:line-through;
        }
    </style>
  </head>

  <body>
    <a href="01-css-hello.html">黑马</a>
  </body>
</html>