CSS 入门基础(笔记)
in CSS笔记 with 0 comment

CSS 入门基础(笔记)

in CSS笔记 with 0 comment

CSS 简介

CSS简介

CSS 是层叠样式表 的简称
有时我们也会称之为 CSS 样式表 或 级联样式表
CSS 也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

CSS 语法规范

CSS 规则由两个主要的部分构成:选择器 和 一条或多条声明。
举例:

<head>
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

注意:

  1. 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式。
  2. 属性和属性值以 “键值对” 的形式出现。
  3. 属性和属性值之间用 : 分割。
  4. 结尾必须加 ;

CSS 选择器

CSS 选择器的作用

选择器就是根据不同的需求把不同的标签选出来,就是选择器的作用。简单来说,就是选择标签用的。

选择器的分类

选择器分为两类:基础选择器 和 复合选择器。

基础选择器

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

标签选择器

标签选择器是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中的某一类标签指定统一的 CSS样式 。
基本语法:

标签名{
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ……
}

作用:
标签选择器可以把同一类标签的所有内容选中。

类选择器

如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器。
基本语法:

.类名{
    属性1: 属性值1;
    ……
}

结构要用 class 属性来调用 class 类的属性。例如:

(css 部分)
<style>
    .red{
        color: red;
    }
</style>

(html 部分)
<div class = 'red'>变红色</div>

注意:

  1. 不能使用标签名,只能自定义。
  2. 长名称或词组可以用中横线来为选择器命名。
  3. 不要使用纯数字或中文等命名。
    多类名

多类名的使用方式:在类名之间打一个空格即可使用多类名。

id 选择器

id 选择器可以为标有特定的 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 以 "#" 来定义。
基本语法:

#id 名{
    属性1:属性值1;
    ……
}
……

注意:

  1. id 选择器只允许被调用一次。
  2. 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一的元素上,经常和 JavaScript 搭配使用。

通配符选择器

通配符选择器用 * 即可。

CSS 字体属性

字体系列

CSS 使用 font-family 属性定义文本的字体系列。
语法规范:

p{
    font-family: "微软雅黑";
}

字体大小

CSS 使用 font-size 属性定义字体大小。
语法规范:

p{
    font-size: "20px";
}

注意:

  1. Chrome 默认字体大小为 16px。
  2. 标题标签要单独指定大小。

字体粗细

CSS 使用 font-weight 属性定义字体粗细。

属性值描述
normal正常值(默认值)
bold加粗
100-900400(默认值)、700(加粗)

文字样式

CSS 使用 font-style 属性定义文字样式

属性值描述
normal正常值(默认值)
italic倾斜

字体复合属性

格式:
font: font-style font-weight font-size/line-height font-family
注意:

  1. 以上格式有顺序,不允许前后调换。(分别是:文字样式(倾斜)、字体粗细、字体大小/行间距、字体)
  2. 不需要设置的属性可以省略,但是 font-size 和 font-family 不可省略。

CSS文本属性

CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color 属性用于定义文本颜色
举例:

div{
    color: red;
}

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。

属性值解释
left左对齐(默认值)
right右对齐
center居中对齐

装饰文本

text-decoration 属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等。

属性值描述
none默认。没有装饰线(最常用)
underline下划线。链接 a 自带下划线(常用)
overline上划线(几乎不用)
line-througe删除线。(不常用)

文本缩进

text-indent 属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。
em 是当前元素的一个文字大小。

行间距

line-height 属性用于定义行间的距离(行间距)。
行间距的上下间距 = 像素值 - 字体大小。

留言: