CSS-第一天（B站黑马程序员）

yapple223

已于 2024-02-26 15:25:08 修改

阅读量372

点赞数 8

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

于 2024-01-18 19:10:58 首次发布

本文链接：https://blog.csdn.net/m0_64180838/article/details/135681302

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、CSS简介

1、是什么

CSS是层叠样式表的简称，有时称为CSS样式表或级联样式表。

2、作用

设置HTML文本内容（字体、大小对齐方式等等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

3、语法规范

选择器是用于指定 CSS 样式的 HTML 标签，{ }内是对该对象设置的具体样式。

选择器 {

属性1：属性值；

属性2：属性值；

……

}

二、CSS基础选择器

选择器的作用：选择标签。

分类：基础选择器，复合选择器。在此先讲解基础选择器的分类。

1、标签选择器

按标签名称分类，为HTML页面中某一类标签设置统一的CSS样式。

能快速为页面中同类型的标签统一设置样式。不能设计差异化样式，只能选择全部的当前标签。

<style>
    /* 将页面中所有段落设置成绿色 */
    p {
        color: green;
    }
</style>

2、类选择器

单独选一个或某几个标签。不要用纯数字、中文命名。

结构需要用 class 属性来调用。

<style>
   /*将所有class属性为red的标签设置为红色*/
    .red {
       color: red;
    }

    /*将所有class属性为star-sing的标签设置为绿色*/
    .star-sing {
        color: green;
    }
</style>

<body>
    <ul>
        <li class="red">冰雨</li>
        <li class="red">来生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li class="star-sing">江南style</li>
    </ul>
    <div class="red">我也想变成红色</div>
</body>

多类名的使用方法：同一个标签可以有多个类名，这些类选择器都被被调用。

<style>
    .red {
        color: red;
    }

    .font35 {
        font-size: 35px;
    }
</style>

<body>
    <!-- class属性中写多类名，中间用空格分隔 -->
    <div class="red font35">刘德华</div>
</body>

3、id选择器

类似于类选择器，但是id选择器仅能被调用一次，因为每个标签的id不一样。

一般和js搭配使用。

<style>
    #pink {
        color: pink;
    }
</style>

<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>
</body>

4、通配符选择器

选择页面中所有元素。无需编写调用代码，自动给所有元素。

<style>
    * {
        color: red;
    }
</style>

三、CSS字体属性

1、字体系列

//字体设置为微软雅黑

font-family：'Microsoft YaHei';

2、字体大小

// px 像素不可以省略

font-size：16px；

3、字体粗细

// 数值100 - 900；正常 normal=400；加粗 bold=700；

font-weight：400；

4、文字样式

// 正常 normal；倾斜 italic；

font-style：normal；

5、复合属性

//前后顺序不能颠倒

//size和family不可省略，其他可以省略

//font：font-style font-weight/line-height font-size font-family；

font：16px 'Microsoft YaHei';

四、CSS文本属性

1、文本颜色

//预定义颜色

color：pink；

//十六进制，最常用

color：#888888；

//RGB

color：rgb（255，0，255）；

2、文本对齐

text-align：center / left / right；

3、文本装饰

超文本链接删除下划线：none

// 正常 none；下划线 underline；上划线 overline；贯穿线 line-through；闪烁 blink；

text-decoration：none；

4、文本缩进

首行缩进

// 缩进像素

text-indent：16px；

//缩进相对单位，常用

//em相对单位，当前一个文字元素为一个单位

//缩进两字符

text-indent：2em

5、行间距

行间距=上间距+文本高度+下间距

line-height：26px

五、CSS引入方式

1、行内样式表

在元素标签内部的style属性中设定CSS样式。

<p style="color: red; font-size: 20px;">浪漫的抱着你看着日落</p>

2、内部样式表

将所有CSS代码写入style标签中，style标签在HTML页面文件中。

/* style 标签一般放在 head 标签内部*/
<style>
    div {
        color: pink;
    }
</style>

3、外部样式表

将所有CSS代码写入一个单独CSS文件中，在HTML文件中引入。

/* CSS文件里面只有样式，没有标签 */
div {
    color: pink;
}

/* 一般放在 head 标签内部 */
<link rel="stylesheet" href="CSS文件路径">