CSS基本概念与语法讲解

1、CSS简介

1.1 HTML的局限性

HTML只关注内容的语义

1.2 CSS

1、CSS是层叠样式表（Cascading Style Sheet）的简称

2、CSS也是一种标记语言

3、CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观样式

总结：

• HTML主要做结构，显示元素内容
• CSS美化HTML，布局网页
• CSS最大价值：由HTML专注做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

1.3 CSS语法规范

CSS规则由两个主要的部分组成：选择器以及一条或多条声明

• 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
• 属性和属性值以“键值对”的形式出现
• 属性和属性值之间用英文“：”分开
• 多个“键值对”之间用英文“；“进行区分

1.4 CSS代码风格

1、样式格式书写

• 紧凑格式
• 展开格式（推荐）

2、样式大小写

一般用小写字母书写

• 属性值前面，冒号后面，保留一个空格
• 选择器（标签）和大括号中间保留空格

2、CSS基础选择器

2.1 CSS选择器的作用

作用：选择标签

2.2 选择器分类

1、基础选择器

• 由单个选择器组成
• 包括标签选择器、类选择器、id选择器和配通符选择器

2.3 标签选择器

用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一样式的CSS样式

语法

标签名{
	属性1: 属性值1;
	...
}

作用

可以把某一类标签全部选择出来

优点

能快速为页面中同类型的标签统一设置样式

缺点

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

2.4 类选择器

若想差异化选择不同的标签，单独选择一个或某几个标签，可以使用类选择器

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点”."号显示。

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

语法

结构需要用class属性来调用class类的意思

<div class='red'>
    红色
</div>

类命名规则：

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

1、多类名使用方式

• 在标签class属性中写多个类名
• 多个类名中间必须用空格分开
• 这个标签可以分别具有这些类名的样式

2、多类名开发中使用场景

• 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
• 这些标签都可以调用这个公共的类，然后再调用自己独有的类
• 节省CSS代码，统一修改也非常方便

2.5 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以“#”定义

语法

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

与类选择器大的区别：

• 只能调用一次，别人切勿使用（id名唯一）
• 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

2.6 通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）

语法

* {
	属性1: 属性值1;
	...
}

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况才使用

3、CSS字体属性

3.1 字体系列

CSS用font-family属性定义文本的字体系列

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

4、CSS文本属性

4.1 文本颜色

color属性用于定义文本颜色

表示	属性值
预定义的颜色值	red, grennd, blue等
十六进制	#FF0000, #FF6600, #29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2 对齐文本

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

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

4.3 装饰文本

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

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

8、盒子模型

8.1 看透网页布局的本质

网页布局过程：

1、先准备好相关的网页元素，网页元素基本都是盒子Box

2、利用CSS设置好盒子样式，然后摆到相应位置

3、往盒子里面装内容

8.2 盒子模型（Box Model）组成

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

8.3 边框（border）

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框简写：

boder: 1px solid red; 没有顺序