02-CSS基础知识梳理(I)

最新推荐文章于 2023-03-29 09:38:37 发布

SC_XANA

最新推荐文章于 2023-03-29 09:38:37 发布

阅读量157

点赞数

分类专栏： CSS深入浅出学习笔记

本文链接：https://blog.csdn.net/SC_XANA/article/details/105660923

版权

CSS深入浅出学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

I.类选择器的使用

<style>
    .box {
        width: 100px;
        height: 100px;
    }

    .red {
        /* 背景颜色 */
        background-color: red;

    }

    .green {
        /* 背景颜色 */
        background-color: green;

    }
</style>

<body>
    <!-- div本身就是一个容器 -->
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
</body>

1.样式点定义结构类调用一个或多个开发最常用
2.在没有类选择器的情况下，一般选择器（标签选择器）会直接使用HTML标签当做选择器来定义CSS样式内容，不能实现差异化选择。
3.选择器里面的样式必须用小写字母来进行书写。
4.在HTML内容之中，HTML会利用 <标签 class=“调用对象”>来生成对应内容，而类选择器会选取相应的调用对象，并在前面加上.符号，来实现类选择器的调用和定义。
5.<标签 class=“调用对象”>内部可以存在多个调用对象，这种现象称之为“多类名调用对象”，多个调用对象之间用空格来隔开，诸如<标签 class=“调用对象1 调用对象2 调用对象3”>
6.样式定义的方法为属性:属性值，切记赋值符号为:而非=

II.ID选择器以及通配符选择器

  <!-- id选择器可以为标有特定ID的HTML元素指定特定的样式 -->
    <!-- HTML元素以id属性来设置id选择器 -->
    <style>
        /* ID选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用！ */
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">长门有希</div>
    <div>凉宫春日</div>
</body>

1.在CSS样式表里面为调用对象添加#,在HTML内容里面添加对应的id选择器即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通配符选择器，选取页面中所有的元素，定义具体的样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

</body>

</html>

1.注意通配符选择器的优先级是最低的

III.CSS文本系列
III.I.CSS字体属性

  <style>
        .bold {
            font-weight: 700;
        }
        /* 完全可以直接写对应的body，不仅仅是引用类 */
        body {
            /* 各种字体之间应该用逗号隔开 */
            /* 由空格隔开的多个单词组成的字体，加引号 */
            /* 找对应的字体，依次寻找存在的字体 */
            font-family: Arial, 'Microsoft YaHei'，'Times New Roman';
            font-size: 16px;
            font-weight: lighter;
            font-style: normal;
        }

        /* 标题是特殊的，需要单独指定文字大小,在boby已定义的情况下，下面再定义一个即可,上面定义的样式会被覆盖（对应覆盖式） */
        h2 {
            font-size: 16px;
        }
        div {
            /* font: font-style font-weight font-size font-family; */
            font: italic 700 16px 'Microsoft YaHei';
             /* color: pink; */
            color: #00ff40;
            color: rgb(244, 0, 255);
        }
    </style>
</head>

<body>
    <!-- 可以直接给body定义字体 -->
    <!-- 标题是特殊的，需要单独指定文字大小 -->
    <h2>font-family</h2>
    <p>凉宫春日的忧郁</p>
    <p>凉宫春日的叹息</p>
    <p class="bold">凉宫春日的惊愕</p>
    <p><em>凉宫春日的分裂</em></p>
    <div>三生三世，不如有你</div>
</body>

1.font-family:“字体样式”
2.font-size:“字体尺寸”
3.font-weight:“字体粗细”
4.font-style:“字体形态”
5.可以在CSS样式表中单独为标签设置对应的字体属性
6.字体复合属性可以同时设置多个字体属性，字体属性之间用空格隔开，拥有严格的顺序，并且font-size和font-family不能省略，顺序见下：
font:字体形态字体粗细字体尺寸字体样式
7.字体颜色可以直接输入相关英语单词，也可以利用#000000来定义颜色属性值，或者利用rgb(0,0,0)来定义颜色属性值

III.II.CSS文本外观

<style>
        h1 {
            /* 本质是让h1格式的文字水平居中对齐，此为文本对齐属性 */
            text-align: left;
        }

        .pink {
            /* 下划线 */
            text-decoration: underline;
        }

        /* 删除线 */
        .dele {
            text-decoration: line-through;
        }

        /* 上划线 */
        .use {
            text-decoration: overline;
        }

        a {
            /* 取消a默认的下划线 */
            text-decoration: none;
        }
    </style>
    </head>
<body>
    <h1>我永远喜欢凉宫春日</h1>
    <div class="pink">我永远喜欢凉宫春日</div>
    <div class="dele">谁是爷爷呀？</div>
    <div class="use">我是爷爷呀！</div>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>

1.text-align 文本对齐属性，对应的值有left,center,right;
2.text-decoration 文本线型属性，对应的值有underline(下划线),line-through(删除线),overline(上划线),none(取消线型属性，常用于a标签)

III.III.CSS文本段落属性

    <style>
        p {
            /* 文本的缩进用text-indent:xxem; */
            /* em是一个相对单位，对应的参考值就是当前元素一个文字的大小 */
            text-indent: 2em;
        }

        div {
            /* 行与行之间的距离用line-height属性，用于设置行间的距离，控制行与行的距离 */
            /* 行高是由上边距和下边距经过平均分配后决定的（还包括了文字的总高度） */
            line-height: 16px;
        }
    </style>
</head>

<body>
    <p>我永远喜欢凉宫春日！</p>
    <p>我永远喜欢朝仓凉子！</p>
    <div>我永远喜欢长门有希</div>
    <div>我永远喜欢鹤屋学姐</div>
</body>

1.一般可以在文本标签内部定义相关的文字段落属性
2.text-indent为缩进属性，相关单位为em,1em=1个文字的大小
3.line-height定义了行与行之间的距离，其单位为px，而行高本身是由上下边距经过平均分配决定的，行高的组成包括三大要素：文字本身的高度，上边距，下边距。

IV.CSS引入方式
1.其引入方式为三大样式表，内部样式表（和HTML内容一起写在一个HTML页面之中），行内样式表（卸载HTML内容的标签内部，很少使用），外部样式表（在头部标签内部，通过引入外部的样式表）

SC_XANA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
02-CSS基础知识梳理(I)

I.类选择器的使用<style> .box { width: 100px; height: 100px; } .red { /* 背景颜色 */ background-color: red; } .green { /* 背景颜色 */ back...
复制链接

扫一扫