这是我参与「第四届青训营」笔记创作活动的第2天

一、CSS简介

1.什么是CSS

CSS：Cascading Style Sheet 层叠样式表，是一组样式设置的规则，用于控制页面的外观样式

2.为什么要使用CSS

实现内容与样式的分离，便于团队开发

样式复用，便于网站的后期维护

页面的精确控制，让页面更精美

3.CSS的作用

美化界面，比如：设置标签文字大小、颜色、字体加粗等样式

控制页面布局,比如：设置浮动、定位等样式

让网页更加丰富多彩,布局更加灵活自如

二、CSS的基本语法

<head>
    <style>
        选择器{
            属性名：属性值；
            属性名：属性值；
        }
    </style>
</head>

选择器：要修饰的对象（东西）

属性名：修饰对象的哪一个属性（样式）

属性值：样式的取值

例如：

div{
    width:100px;
    height:100px;
    background:gold;
}

三、CSS的注释

快捷键：ctrl+/

例如：

/* 需要注释的内容 */

四、CSS的引用方式

内部样式

也称为内嵌样式，在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用

行内样式

也称为嵌入样式，使用HTML标签的style属性定义，只对设置style属性的标签起作用

外部样式

使用单独的.CSS文件定义，然后在页面中使用link标签引用

五、选择器

标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据

类选择器

使用自定义的名称，以.号作为前缀，然后再通过HTML标签的class属性调用类选择器以标签的class属性作为样式

ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配,以标签的id属性作为样式应用的依据，一一对应的关系

六、常用的CSS属性

字体属性

属性	含义	取值
ｆｏｎｔ－ｓｉｚｅ	大小	ｐｘ（像素）、％（百分比）、ｅｍ（倍数）
ｆｏｎｔ－ｗｅｉｇｈｔ	粗细	ｎｏｒｍａｌ（默认）、ｂｏｌｄ（粗体）、ｂｏｌｄｅｒ（更粗）
ｆｏｎｔ－ｆａｍｉｌｙ	字体	例如：宋体
ｆｏｎｔ－ｓｔｙｌｅ	样式	ｎｏｒｍａｌ（默认）、ｉｔａｌｉｃ（斜体）
ｆｏｎｔ－ｖａｒｉａｎｔ	转换	ｓｍａｌｌ－ｃａｐｓ（小写转大写）

文本属性

属性	含义	取值
ｃｏｌｏｒ	字体颜色	例如：ｒｅｄ
ｌｉｎｅ－ｈｅｉｇｈｔ	行高	５０ｐｘ
ｔｅｘｔ－ａｌｉｇｎ	水平对齐	left、center、right
ｖｅｒｔｉｃａｌ－ａｌｉｇｎ	垂直对齐	top、middle、bottom
ｔｅｘｔ－ｄｅｃｏｒｒａｔｉｏｎ	字体修饰	none、underline（下）、line-through（中）、overline（上）

背景属性

属性	含义	取值
background-color	背景颜色	例如:transparent
background-image	背景图片	使用url()说明图片路径
background-repeat	背景图片的重复方式	repeat、repeat-x、repeat-y
background-position	背景图片的显示位置	top、bottom、left、right、center
background-attachment	背景图片是否跟随滚动	scroll、fixed(不动)

CSS|青训营笔记