渡课课堂总结（7.21）

最新推荐文章于 2025-07-21 14:55:20 发布

原创最新推荐文章于 2025-07-21 14:55:20 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

学习总结专栏收录该内容

23 篇文章

订阅专栏

本文介绍了CSS样式的原理、语法及创建方法，详细讲解了选择器、布局和API查阅技巧，并演示了如何使用Chrome开发者工具进行样式调试。通过实例操作加深对HTML语义化的理解。

今日学习内容

CSS 样式原理
CSS 样式语法和创建类型
CSS 样式学习重点：选择器、布局、如何查阅API定义样式
学会使用 Chrome 浏览器的开发者工具：如何选择元素、如何查看元素样式的定义语句、如何获得元素计算完的结果样式
通过开发者工具临摹W3CSchool首页头部
通过对图片的讲解，何时用img标签，何时用background-img，进一步理解HTML语义化的本质

课堂总结

CSS插入样式表的方法有三种：

外部样式表：使用 <link> 标签链接到样式表
内部样式表：使用 <style> 标签在文档头部定义内部样式表
内联样式表：在相关的标签内使用样式（style）属性

在同一个 HTML 文档内部引用多个外部样式表。一般情况下，优先级如下：
内联样式>内部样式>外部样式>浏览器默认样式

最常用的三种选择器：

id选择器：可以为标有特定 id 的 HTML 元素指定特定的样式，在同一个界面中id是不可以重复的。
class选择器：用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
标签选择器：根据指定的标签名，在当前界面中找到所有该名称的标签，然后设置属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>                /*内部样式表*/
            h1 {
                color: blue;         /*标签选择器*/
            }
            #idx {
                color: green;
                font-size: 40px;      /*id选择器*/
            }
            .hc {
                color: pink;          /*class选择器*/
            }
        </style>
    </head>
    <body>                 <!-- 内联样式-->
        <h1 style="color: red;font-size: 20px;">我的第一天样式学习</h1>
        <h1>CSS选择器</h1>     
        <h1 id="idx">CSS布局</h1>
        <h1 class="hc">CSS文本</h1>
    </body>
</html>

学习感悟

今天老师给我们讲解了一下如何通过谷歌浏览器去检查布局等，虽然之前也接触过，但是很少用，感觉这玩意儿还是挺方便的，以后有事没事可以多多观察别人的代码，争取把代码写的更简洁一点。
目前老师讲的东西基本上还是能听懂的，借着百度还是能把页面完成的，但是有些标签啥的用的不对，虽然效果出来了，但会出现点问题。
预习的时间比较少，大部分时间都是花在了敲代码上面，总是会出现各种问题，然后就是通过各种办法去解决，这上面花的时间还是比较多的。

让坚持成为一种信仰。