css初体验

最新推荐文章于 2024-06-13 21:20:19 发布

lileibeida

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量234

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/lileibeida/article/details/124673868

版权

描述:什么是 Css?
cSS 指层叠样式表（Cascading Style Sheets)样式定义如何显示HTML元素
样式通常存储在样式表中把样式添加到HTML 4.0中
外部样式表可以极大提高工作效率外部样式表通常存储在css文件中多个样式定义可层叠为一
html在一个网页中负责的事情是一个页面的结构
css(层叠样式表)在一个网页中主要负责了页面的数据样式。

样式

CSS 可以通过以下方式添加到HTML中:

行内样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用"style"元素
来包含CSS 外部引用 - 使用外部 CSS 文件（其中最好的方式是通过外部引用CSS文件）

1.行内样式

当特殊的样式需要应用到个别元素时，就可以使用行内样式。使用行内样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<h3><font color="red">小李01</font></h3>

    <!-- 行内样式 -->
    <h3 style="color: blue;">小李02</h3>

2.内部样式

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过style标签定义内部样式表:

<head>
    <style>
        /* 内部样式 */
        h3{
            color: blue;
        }
    </style>
</head>
<body>
    <h3>小李01</h3>
    <h3>小李02</h3>
</body>

3.外部样式

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
注意：外部文件必须是以css为后缀名的文件。

<head>
    <!-- 外部样式 -->
   <link rel="stylesheet" href="./css/03.css">
</head>
<body>
    <h3>小李01</h3>
    <h3>小李02</h3>
</body>

选择器

CSS选择器的作用是从HTML页面中找出特定的某类元素

4.标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式

<head>
    <style>
        p{
            color: rgba(225, 11, 11, 0.986);
        }
    </style>
</head>
<body>
    <p>但行好事</p>
    <p>莫问前程</p>
    <p>李妙真</p>
</body>

5.类选择器

类选择器使用 . (英文点号)进行标识，后面紧跟类名

<head>
    <style>
        p{
            color: rgb(0, 255, 34);
        }
        .aaa{
            font-size: 30px;
            color: rgb(144, 43, 226);
        }
        .bbb{
            border-width: 5px;
            border-style: solid;
            border-color: rgb(59, 10, 104);
        }
    </style>
</head>
<body>
    <p class="aaa bbb">但行好事</p>
    <p class="aaa bbb">莫问前程</p>
    <p>李妙真</p>
</body>

6.后代选择器

在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。

<head>
    <style>
        ul a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <li><span><a href="">22</a></span></li>
        <li><span><a href="">33</a></span></li>
        <a href="">44</a>
    </ul>
    <a href="">55</a>
</body>

7.子选择器

子代选择器使用**‘>’**表示，如ul>li{ }，表示匹配第二个选择器，且为第一个选择器的元素的后代。

<head>
    <style>
        ul>a{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <li><span><a href="">22</a></span></li>
        <li><span><a href="">33</a></span></li>
        <a href="">44</a>
    </ul>
    <a href="">55</a>
</body>

8.直接相邻选择器

相邻选择器使用+号表示，如p+a{ }，表示匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a的元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

<head>
   <style>
       #two+p{
        font-size: 30px;
        color: rgba(234, 10, 10, 0.639);
        background-color: blanchedalmond;
    }
   </style>
</head>
<body>
    <span>
        <p>01</p>
        <p id="two">02</p>
        <p>03</p>
        <p>04</p>
        <p>05</p>
    </span>
</body>

9.间接相邻选择器

相邻选择器使用+号表示，如p~a{ }

<head>
   <style>
       #two~p{
        font-size: 30px;
        color: rgba(234, 10, 10, 0.639);
        background-color: blanchedalmond;
    }
   </style>
</head>
<body>
    <span>
        <p>01</p>
        <p id="two">02</p>
        <p>03</p>
        <p>04</p>
        <p>05</p>
    </span>
    <p>06</p>
</body>

10.属性选择器

属性选择器可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

<head>
    <style>
    input[type=text]{
        border:10px solid chartreuse;
    }
    input[type=password]{
        border:10px solid coral;
    }
</style>
</head>
<body>
    <input type="text" name="" id="" placeholder="请输入账号">
    <input type="password" name="" id="" placeholder="请输入密码">
</body>

11.公共选择器

<head>
    <style>
   input[type=text],[type=password]{
        width: 300px;
        height: 150px;
    }
    input[type=text]{
        border:10px solid chartreuse;
    }
    input[type=password]{
        border:10px solid coral;
    }
</style>
</head>
<body>
    <input type="text" name="" id="" placeholder="请输入账号">
    <input type="password" name="" id="" placeholder="请输入密码">
</body>

12.通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

<head>
    <style>
        *{
            color: #28eaea;
            background-color: #dc143c;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">0000</a>
        </li>
    </ul>
    <p>1111</p>
    <span>2222</span>
</body>

13.伪装类选择器

在这里插入图片描述

<head>
   <style>
       /*鼠标悬停链接*/
       a:hover {
        color: #8a2be2;
    }
        /*已选择的链接*/
    a:active {
        color: #faebd7;  
    }
    img:hover{
        width: 300px;cursor: pointer;
        box-shadow: 0px 0px 10px 10px #e41111;
}
    img:active{
        border-radius : 50%;
}

   </style>
</head>
<body>
    <a href="https://www.bilibili.com/">bibi</a>
   <img src="../案例页面内导航/01.jpg" alt="" width="100px" title="点击进入">
   <a href="https://www.bilibili.com/">bibi</a>
</body>

鼠标未操作时

鼠标在图片悬停时

鼠标点击图片时

14.伪对象选择器

在这里插入图片描述

<head>
   <style>
    /* 伪对象选择器
            伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号,实际上伪对象应该用两个冒号来定义。
伪类和伪对象(元素)的区别
            伪类一般反映无法在cSS中轻松或者可靠检测到的某个元素的状态或者属性;  
            伪元素表示DOM外部的某种文档结构
常用伪元素
1.E: before/E: : before 
2.E: after/E: :after
伪元素是在元素内容的前面或后面定义的，必须要添加content:""这个属性，不然伪元素无法定义成功。
p: : after{ content: "在P标签元素内容前加了内容"; color: red;} 
    */
    input:checked+span{
            background-color: #FF0000;
    } 
    input:checked+span::after{
           background-color: #4c00ff;
           content: '都是颜色';
       }
   </style>
</head>
<body>
    <form action="" method="post">
        <fieldset>
            <legend>颜色</legend>
            <ul>
                <li><label><input type="radio" name="colour-group" id="" value="0"><span>蓝色</span></label></li>
                <li><label><input type="radio" name="colour-group" id="" value="1"><span>红色</span></label></li>
                <li><label><input type="radio" name="colour-group" id="" value="2"><span>黑色</span></label></li>
            </ul>
        </fieldset> 
    </form>
</body>

lileibeida

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css初体验

目录1.行内样式2.内部样式3.外部样式4.标签选择器5.类选择器6.后代选择器7.子选择器8.直接相邻选择器9.间接相邻选择器10.属性选择器11.公共选择器12.通配符选择器13.伪装类选择器14.伪对象选择器1.行内样式2.内部样式3.外部样式4.标签选择器5.类选择器6.后代选择器7.子选择器8.直接相邻选择器9.间接相邻选择器10.属性选择器11.公共选择器12.通配符选择器13.伪装类选择
复制链接

扫一扫