【JavaWeb03】

最新推荐文章于 2025-08-11 22:30:00 发布

genius123?

最新推荐文章于 2025-08-11 22:30:00 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_60657566/article/details/125717594

JavaWeb03

1.我的第一个CSS文件

css中的注释/**/
语法：选择器+{；；；}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- css优势
1.内容和结构分离
2.网页结构表达统一，可以实现复用
3.样式十分的丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录（vue前端工具，不利于被搜索引擎搜索）

-->
<!--规范  <style>可以编写css的代码
    语法：每一个声明，最好以分号结尾
        选择器{
                   声明1;
                   声明2;
                   声明3;
                   声明4;
        }
-->
<!--    <style>-->
<!--        h1{-->
<!--            color:red;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <h1>我是标题</h1>
</body>
</html>

h1{
    color:red;
}

2.导入方式

内部样式+外部样式（link+@import）+行内样式
优先级：行内样式>就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color:green;
        }
    </style>
<!--从其他文件中导入
外部样式两种写法
1.链接式：<link rel="stylesheet" href="css/style.css">
2.导入式:<style>
        @import url("css/style.css");
    </style>
-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级: 行内样式>就近原则-->

<!--行内样式,在标签元素中,
编写一个style属性,编写样式即可
有多个必须以分号结尾
-->
  <h1 style="color:red"></h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>
    <h1>狂神说</h1>
</body>
</html>

3.基本选择器

标签选择器+类选择器（. ，class=" "）+id选择器（#，唯一）
优先级：id>class>标签(选择范围逐渐变大)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*标签选择器: 会选择到页面上所有的这个标签的元素
    可以通过网页先把效果看完在将代码复制过来
    */
        h1{
            color:red;
            background:#3cbda6;
            border-radius:24px;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
  <h1>学java</h1>
  <h1>学java</h1>
  <p>java</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式   .class的名称{}
        好处:可以多个标签归类，是同一个class
        可复用
        */
        .a{
               color:white;
        }
        .b{
                color:red;
        }
    </style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1 class="a">标题3</h1>
<p class="a">p标签</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*
    id选择器
    #id{}             id保证全局唯一
    不遵循就近原则，固定的
    id选择器>类选择器>标签选择器
    */
    #a{
        color:red;
    }
    .b{
        color:green;
    }
    h1{
        color:yellow;
    }
    </style>
</head>
<body>
<h1 id="a" class="b">标题1</h1>
<h1 class="b">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

4.层次选择器

后代body p{}+子代body>p{}+相邻兄弟.class +p{}+通用兄弟.class ~p{}
相邻兄弟->只有一个且对下不对上
通用兄弟->多个，对下不对上
通过只激活一个标签（class），操作下面相同元素标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*      p{
            background:green;
        }*/
    /*后代选择器 某个元素的后面（所有后代）*/
    body p{
        background:green;
    }
    /*子选择器 只有一代*/
    bod>p{
        background:blue;
    }
    /*相邻兄弟选择器 相邻->只有一个|且对下不对上*/
    .active +p{
        background:red;
    }
    /*通用兄弟选择器 选中元素对下不对上*/
    .active ~p{
        background:yellow;
    }
    </style>
</head>
<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
<!--通过只激活一个标签（class），操作下面相同元素标签-->
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>6</p>
        </li>
    </ul>
</body>
</html>

5.结构伪类选择器

伪类选择器关键词 :
first-child/last-child
p:nth-child(2) 先找到第二个,再判断是否为p,若不为p,无反应
p:nth-of-type(2) 找到第二个p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*ul的第一个子元素*/
    ul li:first-child{
        background:green;
    }
    /*ul的最后一个子元素*/
    ul li:last-child{
        background:green;
    }
    /*选中p1: 定位到父元素，选择当前的第一个悬殊
    选到当前元素的父级元素，选中父级元素的第一个,并且是当前元素才生效    顺序*/
    p:nth-child(1){
        background:red;
    }
    /*选中父元素下的p元素的第二个   类型*/
    p:nth-of-type(2){
        background:red;
    }
    a:hover{
        background:yellow;
    }
    </style>
</head>
<body>
    <a href="">31222</a>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

6.属性选择器

关键词:[ ]
id和class结合的属性选择器
a[href^=http]
a[id=first]
a[class*=links]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*把id和class结合的属性选择器
        标签定位某一个属性
    */
        .demo a{
            float:left;
            /*display:none;广告没了*/
            display:block;
            height:50px;
            width:50px;
            border-radius:10px;
            background:blue;
            text-align:center;
            color:grey;
            text-decoration:none;
            margin-right:5px;
            font:bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值（正则）
            =绝对等于
            *=包含这个元素
            ^=以这个开头
            $=以这个结尾
        */
        /*存在id属性的元素         a[]{}*/
        a[id]{
            background:blue;
        }
        /*id=first的元素*/
        a[id=first]{
            background:red;
        }
        /*class中有links的元素*/
        a[class*=links]{
            background:yellow;
        }
        /*href中以http开头的元素*/
        a[href^=http]{
            background:grey;
        }
        a[href&=pdf]{
            background:grey;
        }
    </style>
</head>
<body>
    <p class="demo">
        <a href="http://baidu.com" class="links item first" id="first">1</a>
        <a href="" class="links item active" target="_blank" title="test">2</a>
        <a href="images/123.html" class="links item" >3</a>
        <a href="images/123.png" class="links item">4</a>
        <a href="images/123.jpg" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="/abc.pdf" class="links item">8</a>
        <a href="abc.doc" class="links item">9</a>
        <a href="abcd.doc" class="links item">10</a>
    </p>
</body>
</html>