CSS基础

往797

已于 2023-09-02 12:25:25 修改

阅读量56

点赞数

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

于 2023-08-29 17:10:59 首次发布

本文链接：https://blog.csdn.net/weixin_67497686/article/details/132514167

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了CSS的基础知识，包括选择器的种类（标签、类、ID和通配符）、引入CSS的方式、字体和文本样式（如大小、粗细、样式和层叠）、以及Chrome调试工具的使用。还通过实例讲解了如何使用CSS进行居中和颜色设置，以及CSS与HTML元素的交互。

摘要由CSDN通过智能技术生成

1.CSS的介绍

CSS：层叠样式表（Cascading style sheets）

CSS的作用：

1.1CSS语法规则

写法就是：由一个选择器和一个{} 组成。 p表示选择器的意思。

我的理解是：自己创造出一个新的标签，该标签是用来美化网页body的主体内容的。

而创造的这个新标签，开发者规定只能在head标签里头，title标签下面，body标签前面书写，

并且要用style标签来括住你这个新创造的标签。新标签的标签名自取。

效果确实是都有了，但是上面的理解可能有点失误。

注意看上图的代码，style标签里面，p、m、k都是我认为是我新创造的，但是，仔细看，p是黄色字体的，{} 也是黄色字体，而m、k是白色字体。

反思发现：p标签是段落标签，是实际已经存在的，我这里是改变标签的样式而已，而m、k标签本来是不存在的，所以是白色字体，，，虽然这三个标签都能用，但是，m、k显然是只有这个CSS样式的功能，而p还有它本身的段落功能。

也就是说，style标签应该是修改原有标签的样式，使其更美观，（虽然它确实也能创造出标签来用，但是你创造的标签，不会有列表、表单、表格的功能在那）

1.2CSS引入方式

引入方式即css能写在哪；

第二种方式：外联式

第三种方式：行内式

小结

1.3基础选择器

1.标签选择器； 2、类选择器； 3、id选择器； 4、通配符选择器

1.3.1 标签选择器

针对的是已有标签来进行设计样式。

写在head标签内的style标签中的所有标签选择器，在之后网页主体内容中使用时，全部都会用到该标签选择器设定的css样式。有好有坏把，因为有些内容在相同标签下你是需要不同样式的，这就造成冲突。

1.3.2 类选择器

定义类选择器时有 . 使用时没有

我的理解：类选择器就是针对于设定的一个css样式来规定它的类名，以后使用时通过类名来寻找即可，，且谁都能用，只要用标签的class属性就能找到它。

1.3.3 id选择器

id选择器的出现，并不是用来控制外观样式的(CSS), 而是配合JS来找标签用的。不过它也是一种选择器。

注意 3，4点！！！

虽然是让第二个标签用到了，且代码没报错，但其实这是不符合规范的。校纪校规，法律法规，总有人遵守，总有人违反，违反就会付出代价。

1.3.4通配符选择器

它会把你所有的标签都改为这个样式，实际开发中基本不会用，因为，你想，你见过哪个页面的所有内容的样式全都一样的么？？？？、

1.4 字体和文本样式

1.4.1 字体大小

1.4.2 字体粗细

1.4.3字体样式（是否倾斜）

1.4.4 字体系列 font-family

上图这是京东网页的，设置这么多字体，就是因为网页设计者不知道网页打开者的电脑有没有这种字体，于是就输入多种字体，按顺序来，到最后，直接是一类字体（sans-serif无衬线字体）

1.4.5样式的层叠问题

像这样设置，p标签的内容最后就会是蓝色的。

1.4.6字体font相关属性的连写

注意，要用空格隔开，看下方图片，实际使用时估计是必须按这顺序来，应该是规定了，且前两个的属性值可以省略（只能省略前两个），省略就会使用默认值

一个属性后面书写多个值的写法-----复合属性

1.4.7 文本样式

一、文本缩进：text-indent

小学生写文章的时候，每段的开头不是空两格吗，这就是文本缩进。

使用text-indent缩进时，最好用em来缩进，不要用px，因为用px的话，你后面一旦改字号大小，它就不是缩进两个字了，而用text-indent：2em，无论你在其前面还是后面改变字号大小，缩进的都是两个字。

二、文本水平对齐方式-text-align

就类似于word文档中的左对齐之类的。。。

该属性可以让其他一些内容也居中对齐。

对于文本“文章大标题”的父标签是 h1标签

而图片，img标签就是图片本身，故图片的父标签是 body标签！！！

总结：text-align是使得文字水平居中，而 line-height是使得文字垂直居中。

三、文本修饰-text-decoration

使用style修饰之前：

使用style修饰之后：

四、行高：line-height

连写时注意了，size和line-height是用 / 来隔开的

总结：text-align是使得文字水平居中，而 line-height是使得文字垂直居中。

1.5 Chrome调试工具

谷歌浏览器调试工具打开方式： 1、在网页任意位置右键鼠标，点击“检查”
2、F12快捷键或可能是 Fn+F12

当右侧的CSS中内容：有覆盖时，会有删除线；代码语法有错时，会有黄色叹号。

1.6 拓展

1.6.1 颜色取值（了解）

最常用的是后两种，，最最常用的最后一种。

#后面是六个数字，，两两一组，共三组，分别是RGB。

若两数相同的话，可简写成一个数。

用什么颜色不需要我们记，，设计师会给我们的。

1.6.2标签居中

0表示的是上下间距，auto是居中。

注意！！！：根据我的了解，这个效果只是把标签居中放置而已，对于标签里的其他内容还没有居中！！

若要把该标签里的其他内容也居中，

1种方式是：要在该标签设置：text-align：center

第二种方式是：标签里面的其他标签都使用一个类选择器来设置text-align：center居中

例如：

style： div{ margin：0 auto； text-align：center；}

body：

<div>

<h1></h1>

<img> </img>

<p></p>

</div>

这样的话，div标签内的 h1、img、p标签内容就都会居中放置！

目前代码的效果：：

修改代码：（添加标签居中）

1.7 新闻案例

不少标签用得不熟练，而且功能也记不清。

目标效果：

我的代码：

<style>
        .d1{
            color: #808080;
        }
        .d2{
            color: #87ceeb;
            font-weight: bold;
        }
        .d3{
            color: violet;
        }
        h1{
            text-align: center;
        }
        div{
            text-align: center;
        }
        p{
            font: 18px/1.5 宋体;
            text-indent: 2em;
        }
        a{
            text-decoration: none;
        }
</style>

<body>
    <h1>《自然》评选改变科学的十个计算机代码项目</h1>
    <div >
        <!-- span标签不会换行。 -->
        <span class="d1">2077年1月28日</span>   
        <span class="d2">脑洞科技</span>
        <a href="#" class="d3">收藏本文</a>
    </div>
    <hr>
    <p>这是第一段文字</p>
    <!-- <br> -->
    <p>这是第二段文字内容</p>
    <!-- <br> -->
    <p>这是第三段文字内容</p>
</body>

评价：很多可改。 h1，div标签都设置了居中的格式，代码冗余，完全可以设置一个类选择器：
.center{ text-align: center; } 来代替，减少代码冗余，且更方便管理。

注意：div标签会换行； span标签不会换行， a标签也不会换行，。

讲课老师的解决方案：

用div作为一个幕布设计样式（关键的居中--虽然我感觉没啥用，后面部分内容还要再设：text-align:center居中），再在里面写其他标签内容

1.8 图片案例---做不出效果

目标效果：

我的代码：

<style>
        .c1{
            background-color: #f5f5f5;
            /*大背景颜色 */
        }
        .c2{ //幕布居中
            background-color: #fff;
            width: 234px;
            height: 300px;
            margin: 0 auto;
        }
        img{  
            width: 160px;
            margin: 40px 37px;
        }
        .w1{
            line-height: 25px;
            font-size: 14px;
            text-align: center;
        }
        .w2{
            line-height: 30px;
            font-size: 12px;
            color: #cccccc;
            text-align: center;
        }
        .w3{
            font-size: 14px;
            color: #ffa550;
            text-align: center;
        }
    </style>

<body>
    <div class="c1">
        
            <div class="c2">
                <img src="../../../捕获.JPG" alt="小米汽车">
                <p class="w1">九号平衡车</p>
                <p class="w2">成年人的完具</p>
                <p class="w3">1999元</p>
            </div>
        
    </div>
</body>

我的代码效果：

老师的效果：

整个页面都是灰色的！！而页面对应的标签是 <body></body>主体，它包住了整个页面

老师的思路：

注意div的使用原则！！！------如果使用div，尽量使用类名来控制样式！！

此时的效果：

效果：

反思：我的不足：不知道最外层大屏幕应该是body页面，通过标签选择器修改body的背景颜色；

对标签居中：margin: 0 auto; 与内容居中： text-align：center；混淆，

只用标签居中的话，只能把这个标签放在中间位置，标签里的内容不会居中；

标签选择器中既使用标签居中，又使用内容居中，则会把标签居中以及该标签的所有内容都居中。

例如：.div{ margin: 0 auto; text-align：center； }

同时不会分门类别。