从头学前端-CSS基础01

CSS简介：

CSS是层叠样式表的简称，有时也会称之为CSS样式表或级联样式表。CSS也是一种标记语言(和html一样，不是个编程语言)； Html主要是页面结构，显示元素内容，CSS是美化页面，布局网页；

CSS规则主要有选择器和样式声明组成；样式声明以键值对的形式出现；如下：

p{

font-size: 12px,

color:'red'

}

CSS基础选择器

选择器就是根据不同的需求把不同的标签选出来；CSS就是找的指定的标签，设置标签样式；

• 选择器分为基础选择器和复合选择器两大类；基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器;
• 标签选择器是指用html标签名称作为选择器，把某一类标签设置样式；不能对标签进行差异化设置
• 类选择器可以单独选一个或多个标签，进行差异化设置；需要给标签设置class属性；（不要使用纯数字，中文，标签名作为类名）使用的时候，class前面加符号. 语法如下：.类名{ k:v} 一个标签页可以使用多个类名；在标签的class属性中，写多个类名，以空格分开；
• id选择器是通过标签的Id属性值作为选择器，id以#开始；其他与类选择器类似；相比类选择器，id可以表示一个标签，id只能使用一次；
• 通配符选择器使用*定义，它表示选取页面所有的元素；

在这里插入图片描述

CSS字体属性

字体属性用于定义字体系列，大小，粗细和文字样式等；

• 字体系列：font-family
• 字体大小： font-size; 大小以px(像素)为单位；谷歌浏览器默认的大小为16px; 一般情况下给body添加此属性；标题标签特殊设置
• 字体粗细：font-weight : 常用值 normal(400) bold(700) bolder和数字(100-900)
• 文字样式： font-style 常用值normal和italic
• 字体复合属性：font {font-style(可省略) font-weight(可省略) font-size(必需)/line-height font-family(必需) } 空格隔开，顺序不可以更改

CSS文本属性

css文本属性主要定义文本的外观属性，如文本的颜色，文本对齐，缩进，行间距等；

• 文本颜色： color; 三种标识方式，预定义颜色值，RGB和16进制
• 对齐文本： text-align用于设置水平对齐方式，属性值，left right center
• 装饰文本： text-decoration 给文本添加下划线，删除线，上划线，默认值：none
• 文本缩进： text-indent 文本首行缩进，用于段落开头；可以取负值，单位px或em
• 行间距： line-height 设置行与行之间的距离，行间距包含：文字大小，上间距和下间距；

CSS引入方式

引入方式分三种，内部引用(style标签)，行内引用(style属性) 外部样式引用(link标签)，权重依次递减。

一个页面的搭建过程

• 搭建页面html结构 > 根据页面展示内容，设置页面标签
• 添加CSS样式 > 添加body全局css

添加各个标签样式

注意

图片标签没有水平居中样式，如要水平居中，需要放到行标签中，如p和div标签