三、HTML+CSS

懒洋洋大魔王

已于 2024-09-03 09:01:06 修改

阅读量600

点赞数 15

分类专栏： HTML 文章标签： html tensorflow 前端

于 2024-09-02 14:38:42 首次发布

本文链接：https://blog.csdn.net/QAZ412803/article/details/141819180

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML和CSS

1.选择器，css属性

/*注释*/在css3注释的使用

p{
    font-size2px；设置字体大小
    color：red；设置字体颜色
}

2.CSS引入方式

1.行内样式

在HTML标签中使用style属性

2.内部样式

在页面中使用style标签

3.外部样式

需要创建.css文件，使用链接式或导入式引入。

外部样式，链接式引入
<link href=“css/index.css" rel="stylesheet"/>
<style>
    /*外部样式，导入式引入*/
   @impor url（"css/index.css");
 </style>

3.选择器

一、基本选择器

1.标签选择器

使用HTML标签

2.类选择器

使用HTML标签中class属性并且使用.操作符

<style type="text/css">
        .tt{
            color: red;
        }
</style>

3.ID选择器

使用HTML标签中id属性并使用#操作符（唯一）

<style type="text/css">
        #tt{
            color: red;
        }
</style>
<body>
    <a id="tt">baifbeu</a>
</body>

4.全局选择器

使用*操作符(全局选择器)

<style type="text/css">
        *{
            color: red;
        }
</style>

全部改变

二、层次选择器

1.后代选择器E F

选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        ul li{
            color: red;
        }
    </style>
    <body>
    <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

ul是父级li是子级，子级全变

2.子选择器E>F

选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        body>ul{
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

3.相邻兄弟选择器E+F

选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    li+.tt{
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li class="tt">lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

必须紧挨着

不然没效果

4.通用兄弟选择器 E~F

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    li~li{
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li class="tt">lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>

相同级别第一个不选中，其余全选中

三、结构伪类选择器

1.E:first-child

作为父元素的第一个子元素的元素E

2.E:last-child

作为父元素的最后一个子元素的元素E

3.E F:nth-child(n)

选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

4.E:first-of-type

选择父元素内具有指定类型的第一个E元素

5.E:last-of-type

选择父元素内具有指定类型的最后一个E元素

6.E F:nth-of-type(n)

选择父元素内具有指定类型的第n个F元素

一般用后三个,指定必须是这个元素才开始计数

前三个没有

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
    ul li:nth-of-type(6){
            color: red;
        }
    </style>
    <body>
    <ol>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
    </ol>   
        <ul>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li >lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
            <li>lanlllll</li>
        </ul>
    </body>
</html>