CSS基础（一）

wtbdwzbh

于 2024-08-13 00:03:36 发布

阅读量468

点赞数 19

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

本文链接：https://blog.csdn.net/m0_73378139/article/details/141143952

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、基础选择器

作用：选择器（选择符）的作用是选择标签用的。

选择器分类：

基础选择器
复合选择器

基础选择器是由单个选择器组成的
基础选择器又包括： 标签选择器、类选择器、ID选择器、通配符选择器。

1、标签选择器

定义：标签选择器（元素选择器）是指HTML标签名称作为选择器，按标签进行分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签名{

属性1：属性值1；

属性2：属性值2；

......

}

作用：标签选择器可以把某一类标签全部选择出来。

优点：能快速为页面中同类的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

2、类选择器

定义：可以进行差异化选择不同的标签，单独选一个或者几个标签。类选择器在HTML中以class属性表示，在CSS中以 “ . ” 表示

语法：

.类名（不可以用标签名来做类名）{

属性1：属性值1；

......

}

注意：

类选择器使用 “ . ”进行标识，后面紧跟类名。
可以理解为为这个标签起一个名字类表示。
长名或者词组可以用“ - ”来为选择器命名。
不要使用纯数字、中文等命名，可以用英文或者拼音（望文知义）。

多类名类选择器

各个类名用空格隔开。
简单理解：这个标签有多个名字。
这个标签就可以分别具有这些类名。
优势：多类名选择器的使用可以减少CSS代码，统一修改也会比较方便。
使用场景：多类名选择器在后期布局比较复杂的编程时使用较多。

3、ID选择器

样式用“#”定义，结构ID调用，只能调用一次。
ID选择器相当于身份证号码（唯一性），区别于类选择器（重复性）。
ID选择器一般用于页面唯一性的元素上面，经常和JavaScript搭配使用。

4、通配符选择器

在CSS中，通配符选择器使用 “ * ”定义，它表示选取页面中所有元素。
通配选择器不需要调用，自动就给所有的元素使用样式。
特殊情况下才使用。

* {
    padding:0;
    margin:0;
}

二、字体设置

1、font-family

作用：属性定义文本的字体序列。

 p { font-family: "Mirosoft yahei";}
 div { font-family: "Micosoft yahei", Arial;}

各种字体之间使用逗号(英文)隔开。
一般情况下，如果有空格隔开的单词组合应该加引号。
尽量使用系统默认自带的字体，可以保证在任何用户的浏览器中都能正常显示。
常见的几种字体：body { font-family: "Micosoft yahei", tahoma, arial； }

2、font-size

作用：定义字体大小。

 p {
     font-size: 14px;
  }

px（像素）大小是网页最常用的基本单位。
不同浏览器默认的字体大小可能会不能，尽量不要使用默认字体。
可以给body指定整个页面字体的大小。
标题标签比较特殊，需要单独设置字体大小。

3、font-weight

作用：设置文本字体的粗细。

p {
    font-weight: bold;
}

normal，默认值（不加粗）
bold，加粗
范围（100~900）， 400等同于normal， 700等同于bold, 注意这个数字后面不能带单位
在实际开发中用数字代替normal和bold。

4、font-style

作用：设置文本风格。

normal，默认值浏览器会显示的字体样式
italic，浏览器会显示斜体样式

em 标签和 i 标签都是斜体标签

把倾斜字体改为不倾斜字体是比较常用

<style>

em {

font-style: normal;

}

</style>

<body>

<em>我本身是倾斜的</em>

</body>

5、字体的复合属性

<style>
    div {
        /*分散*/
        font-style : normal;
        font-weight : 400;
        font-size : 20px;
        font-family : "Microsoft yahei";
        /*复合*/
        /*font : font-style font-weight font-size font-family;*/
        font :  normal 700 16px "Microsoft yahei";   
    }
</style>

font复合属性里面的属性值font-style和font-weight的属性值可以省略；但是font-size和font-family必须存在，且才有作用。
复合属性的属性不能随意改变位置。

三、文本属性

1、文本颜色color

div {
    color : red;
}

最常用十六进制

2、文本对齐text-alight

div {
    text-alight: center;
  }

3、装饰文本text-decoration

div {
    text-decoration: underline;
}

4、文本缩进text-indent

div {
    text-indent: 10px;
}

还有另外一种表示方法（比较少用）

p {
    text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如当前元素没有设置大小，则会按照父元素的1个文字大小。

5、行间距line-height

p {
    line-height: 20px;
}

line-height属性用于设置行间的距离，可以控制文字行与行之间的距离。

公式：行间距 = 上间距 + 下间距 + 文本高度

四、引入方式

1、行内式

定义：行内样式（内联样式表）是在标签内部的style属性中设定CSS样式。适合用于修改简单的样式。

<div style="color: red; font-size: 12px;">
    好好学习，天天向上。
</div>

style其实就是标签的属性。
在双引号中间，写法要符合CSS规范。
可以控制当前标签设置样式。
没有体现结构与样式分离的思想，不推荐大量使用。在只对该元素添加简单样式时，才用。

2、内部式

定义：内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
通过这种方式，可以方便控制整个页面中的元素样式设置。
代码清晰，但是没有实现结构与样式分离。

3、外部式

定义：样式单独写在CSS文件中，之后再导入HTML文件中使用。

<link rel="stylesheet" href="css文件的路径">

新建一个后缀名为 .css的样式文件，把所有CSS代码都放入这个文件。
在HTML页面中，使用<link >标签引入这个文件。

wtbdwzbh

关注

19
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（一）

作用：选择器（选择符）的作用是的。
复制链接

扫一扫

专栏目录