day4-CSS基础-2022-11-19

最新推荐文章于 2024-10-13 22:01:39 发布

研研鱼

最新推荐文章于 2024-10-13 22:01:39 发布

阅读量93

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Loo201612027/article/details/127942325

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS基础

渲染方式

导入式@import url(css.css);
实践：
xx.html文件：

<head>
    <style>
        @import url(css.css);
    </style>
</head>
<body>
    <h1>研研鱼</h1>
    <h1>研研鱼</h1>
    <h1>研研鱼</h1>
</body>

css.css文件：

h1{
    color: blueviolet;
 }

运行结果：
在这里插入图片描述

内嵌式<style> h1 { color: rgb(122, 213, 187); } </style>
实践：

<head>
    <style>
      h1 {
            color: rgb(122, 213, 187);
        }
    </style>
</head>
<body>
    <h1>我是一个主标题</h1>
    <h1>我是一个主标题</h1>
    <h1>我是一个主标题</h1>
</body>

运行结果：
在这里插入图片描述

外链式 <link rel="stylesheet" href="css.css">
实践：
xx.html文件：

<head>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <h1>主标题</h1>
    <h1>主标题</h1>
    <h1>主标题</h1>
</body>

css.css文件：

h1 {
    color: rgb(128, 0, 85);
}

运行结果：
在这里插入图片描述

行内式：<h1 style="color: red;">我是一个主标题</h1>
实践：
xx.html文件：

<body>
    <h1 style="color: red;">我是一个主标题</h1>
    <h1 style="color: red;">我是一个主标题</h1>
    <h1 style="color: red;">我是一个主标题</h1>
</body>

运行结果：
在这里插入图片描述

选择器

标签选择器：
div、p、h1、span、ul、li 、a等等

<head>
    <style>
       div{ color: red;}
       p{background: yellow;}
       h1{color: blue;}
       span{background: rgb(208, 167, 167);}
       ul{background: rgb(216, 204, 204);}
       li{color: red;background: green;}
       a{background: yellow;}
    </style>
</head>
<body>
    <!-- div、p、h1、span、ul、li 、a -->
   <div>111</div>
   <p>222</p>
   <h1>333</h1>
   <span>444</span>
   <ul>
    <li>555</li>
   </ul>
   <a href="">666</a>
</body>

在这里插入图片描述

id选择器、class选择器

<head>
    <style>
        .hh{
            background: rgb(155, 179, 177);
        }
        #jj{
            color: red;
        }
    </style>
</head>
<body>
    <div class="hh" id="jj">vv</div>
</body>

在这里插入图片描述

复杂选择器
标签、id、class混合起来的选择器

<head>
    <style>
    .r1 #r2 li{
        background: red;
    }
    </style>
</head>
<body>
    <div class="r1">
        <ul id="r2">
            <li>研研鱼</li>
        </ul>
    </div>
</body>

在这里插入图片描述

属性选择器
例如：alt属性
[alt] 有这个属性
[alt = “北京故宫”] 精确匹配
[alt ^= “abc”] 开头匹配
[alt $= “abc”] 结尾匹配
[alt *= “abc”] 任意位置匹配
[alt |= “abc”] abc-开头
[alt ~= “abc”] abc为空格分开的独立部分

 img[alt|="参赛作品"] {
            border: 3px solid red;
        }

<body>
    <img src="images/bj/0.jpg" alt="参赛作品-北京故宫">
    <img src="images/wx/0.jpg" alt="参赛作品-XXX体育场">
    <img src="images/wx/1.jpg" alt="XXXX 手机拍摄">
    <img src="images/wx/2.jpg" alt="BBBB头渚 手机拍摄">
    <img src="images/wx/3.jpg" alt="参赛作品-CCC夜景">
</body>

伪类选择器
：link 表示链接在正常情况下（即页面刚加载完成时）添加效果。
：visited 表示链接被点击后显示的效果。
：hover 表示鼠标悬停时显示的效果。
：active 表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的效果。
注：伪类的顺序应为link–visited–hover–focus–active。

<head>
    <style>
        /* 未访问之前 */
        a:link {
            color: dodgerblue;
        }
        /* 访问链接之后 */
        a:visited {
            color: darkgoldenrod;
        }
        /* 悬浮在链接上 */
        a:hover {
            background-color: red;
        }
        /* 点击时 */
        a:active {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>
        <a href="http://www.yanyanyu.com">前往研研鱼网</a>
    </p>
    <p>
        <a href="http://www.xxxx.com">前往xxxx网</a>
    </p>
</body>

伪元素选择器
::before ：内容之前添加效果
::after：内容之后添加效果
::selection ：文档中被用户高亮的部分（鼠标或者其他设备选中的部分）
::first-letter ：第一个字母的样式
::first-line ：向文本的第一行添加特殊效果

<style>
        a::before {
            content: "■";
        }
        a::after {
            content: "❤";
        }
        .box1 {
            width: 400px;
            height: 150px;
            border: 1px solid red;
        }
        /* ::selection选择器主要用于文档中被用户高亮的部分
        （鼠标或者其他设备选中的部分） */
        .box1::selection {
            /* 背景颜色 */
            background-color: yellow;
            color: red;
        }
        /* 第一个字母的样式 */
        .box1::first-letter {
            font-size: 50px;
        }
        /* 向文本的第一行添加特殊效果 */
        .box1::first-line {
            /* 添加下划线 */
            text-decoration: underline;
        }
    </style>


<body>
    <p>
        <a href="">我是超级链接</a>
    </p>
    <p>
        <a href="">我是超级链接</a>
    </p>
    <p>
        <a href="">我是超级链接</a>
    </p>

    <div class="box1">
        研研鱼文研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼研研鱼
    </div>
</body>

在这里插入图片描述

序号选择器
:first-child ：第一个子元素兼容IE7
:last-child ：最后一个子元素兼容IE9
:nth-child(3) ：第3个子元素兼容IE9
:nth-of-type(3) ：第3个某类型子元素兼容IE9
:nth-last-child(3) ：倒数第3个元素兼容IE9
:nth-last-of-type(3) ：倒数第3个某类型子元素兼容IE9
元素关系选择器
（以后具体用到再学习）

选择器的权重计算：

id权重 > class权重 > 标签权重
复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重。
如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important。但是很多公司不推荐。有可能会带来样式冲突！

.spec {
color: blue !important;
}

在这里插入图片描述

综合实践：

1. 实现如下图：

解：
代码：

<head>
    <style>
     .r1{
        color: rgb(255, 0, 187);
        background: blue;
     }
     .r2 {
        color: rgb(15, 230, 158);
        background: yellow;
     }
     ul{
        color: yellow;
        background: rgb(224, 224, 224);
     }
     li{
        background: red;
        color: orange;
     }
    </style>
</head>
<body>
    <div class="r1">
        <h1>我是一个主标题</h1>
    </div>
    <div class="r1">
        <h1>我是二个主标题</h1>
    </div>
    <div class="r1">
        <h1>我是三个主标题</h1>
    </div>
    <div class="r2">
        <h4>我是段落</h4>
    </div>
    <div class="r2">
        <h4>我是段落</h4>
    </div>
    <div class="r2">
        <h4>我是段落</h4>
    </div>
    <ul>
        <li>我是列表项</li>
        <li>我是列表项</li>
        <li>我是列表项</li>
    </ul>
</body>

运行结果：
在这里插入图片描述

2. 实现如下图：

在这里插入图片描述
解：
代码：

<head>
    <style>
        .redd{color: red;}
        ul{
            /* 去掉圆点 */
            list-style: none;
        }
        a{
            /* 去掉下划线 */
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
    <p>我们一定<span class="redd">研研鱼真漂亮</span></p>
    <ul>
        <li>A</li>
        <li class="redd">B</li>
        <li class="redd">C</li>
    </ul>
    <p><a href="">我是一个超级链接</a></p>
    <p><a href="">我是一个超级链接</a></p>
    <p><a href="">我是一个超级链接</a></p>
</body>