关于css,html学习（2.2）

lengcm

已于 2025-02-18 21:09:51 修改

阅读量253

点赞数 4

文章标签： css html 学习

于 2025-02-17 10:10:28 首次发布

本文链接：https://blog.youkuaiyun.com/lengcm/article/details/145674360

版权

1.css的三种引入方式

行内样式，内嵌样式，外联样式

行内样式很简单，就是在标签中添加style，影响这一行

<h1 style="color: green;">【新思想引领新征程】春节假期23亿人次出行 折射“流动中国”的澎湃活力</h1>

内嵌样式，在head中添加style标签，影响body里的所有相关标签

<style>
    /* 让所有h1标签都蓝色，但是优先级小于行内样式 */
    h1 {
        color: blue;
        }
</style>

外联样式就是通过link标签和建立的.css文件来进行对body里标签的影响（注意，内嵌和外联，谁最后运行的，结果会将前面相关的覆盖）

<!-- 
    通过link标签引入外部的css样式文件
    这里是因为后来的css文件里的red覆盖掉前面blue
-->
<link rel="stylesheet" href="css/news.css">

<!-- 下面为css文件夹news.css文件里的代码 -->

h1 {
    color:red;
}

2.css的三种选择器

元素选择器，类选择器，id选择器

首先是body里用span标签用来包裹内容，span是无意义布局标签，可以用在head来控制布局。所以元素选择器直接在<style></style>里对span进行选择。

<!-- 在head中编辑 -->

<style>
       /* 1.元素选择器 */
    span{
        color: red;
    }
</style>

<!-- 在body中编辑 -->

<span></span>

类选择器，可以先定义一个类class="cls"，然后在标签中加入，再往style添加.cls{ }

<!-- head里 -->

<style>

/* 2.类选择器 */
.cls{
    color: green;
}

</style>


<!-- body里 -->

<h2 class="cls">这是一个测试标题</h2>

id选择器，类似上面，不过是#开头（三种选择器的优先级：id选择器>类选择器>元素选择器，元素选择器会将span标签全覆盖，id选择器优先于类选择器）

<head>
    <style>
        /* 3.id选择器 */
        #time{
            color: #888;
        }
    </style>
</head>



<body>

    <span class="cls" id="time">2025年02月14日 20:49</span> 

</body>

3.css的超链接

引入a标签，将内容夹在其中<a href="" target="_black"></a>，href里是链接，target里_self是在当前页面打开，_black是指空白页面打开。再在style里将a标签改为黑色无下划线

<head>
    <style>
        /* 
            <a href="" target="_black"></a> 
            href里是链接，target里_self是在当前页面打开，_black是指空白页面打开
        */

        a {
            color: black;
            /* 去除超链接的下划线文本装饰 */
            text-decoration: none;
        }
    </style>
</head>

<body>

    <span> <a href="https://news.sina.com.cn/c/xl/2025-02-14/doc-ineknexe1067637.shtml" target="_blank">央视</a></span>

</body>

4.html正文排版

视频音频文件，标签为video和audio,除了src指定路径外，还需要显示播放控件controls。（img和video都需要设置width,设置好就会等比例缩放）

<body>

    <!-- 
        视频标签：video
        - src: 指定视频路径
        - controls: 显示播放控件controls="controls",如果属性名和属性值一样，可以省略等号和属性值

        -最好写左下滑线(1个),video/news.mp4，在vsCode以外是需要(2个)\\
    -->

    <video src="video/news.mp4" controls width="640px" ></video>
    <audio src="audio/1.mp3" controls ></audio>

</body>

其他的一些标签如<hr>水平分割线，<p>段落标签等等。还有使用id选择器右对齐text-align: right;后面插入图片，设置width="550px"

<head>

    <style>
        p {
            /* 修改字号为18像素 */
            font-size: 18px;
            /* 设置行高为32像素 */
            line-height: 32px;
            /* 设置字间距为1像素 */
            letter-spacing: 1px;
            /* text-indent设置首行缩进2字符 */
            text-indent: 2em;
        }

    /* id选择器右对齐 */
        #editor {
            /* text-align对齐 */
            text-align: right;
        }
    </style>

</head>

<body>

    <!-- 
        hr:水平切割线
        br:换行
        &nbsp;空格
        p标签：段落标签，每一个p标签结束后会换到下一行
        b标签，strong标签都能加粗，区别是strong有强调作用
     -->

    <p>
    内容
    </p>

    <p id="editor">
        右对齐
    </p>
</body>