CSS简介
1.CSS也是一种标记语言
2.CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式
3.CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单
4.CSS语法规范
CSS 规则由两个主要的部分构成:选择器以及一条或多条声明
5.选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
(1)属性和属性值以“键值对”的形式出现
(2)属性和属性值之间用英文“:”分开
(3)多个“键值对”之间用英文“;”进行区分
6.CSS代码风格:
(1)样式格式书写:
- 紧凑格式
- 展开格式【推荐使用】
(2)样式大小写 - 小写格式【全部使用,特殊除外】
- 大写样式
(3)空格规范 - 属性值前面,冒号后面,保留一个空格
- 选择器(标签)和大括号中间保留空格
CSS基础选择器
包括:标签选择器、类选择器、id 选择器和通配符选择器
- 标签选择器:(元素选择器)
是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式
- 类选择器:
单独选一个或者某几个标签
(1)类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
(2)可以理解为给这个标签起了一个名字,来表示
(3)长名称或词组可以使用中横线来为选择器命名
(4)不要使用纯数字、中文等命名,尽量使用英文字母来表示
(5)类选择器-多类名:我们可以给一个标签指定多个类名,从而达到更多的选择目的。 这些类名都可以选出这个标签。 简单理解就是一个标签有多个名字
- 多类名使用方式:
【1】在标签class 属性中写 多个类名
【2】多个类名中间必须用空格分开
【3】这个标签就可以分别具有这些类名的样式
-
id选择器:
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义
注意:id 属性只能在每个 HTML 文档中出现一次
id选择器和类选择器的区别:
(1)类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
(2)id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
(3)id 选择器和类选择器最大的不同在于使用次数上。
(4)类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。 -
通配符选择器:
用“*”定义,表示选取页面中所有元素和标签
注意:通配符选择器不需要调用,自动给所有的元素使用样式
CSS字体属性
- 字体系列:
(1)各种字体之间必须使用英文状态下的逗号隔开
(2)如果有空格隔开的多个单词组成的字体,加引号【双引号,单引号都可以】
(3)尽量使用系统已安装的字体【尽量跟在body之后】
2.字体大小:
CSS 使用 font-size 属性定义字体大小
注意:
(1)px(像素)大小是我们网页的最常用的单位
(2)谷歌浏览器默认的文字大小为16px
(3)不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
(4)可以给 body 指定整个页面文字的大小
- 字体粗细:
CSS 使用 font-weight 属性设置文本字体的粗细
属性值:
normal:默认值(不加粗);
bold:加粗;
bolder:特粗体;
lighter:细体;
100-900:400=normal;
700=bold;
注意:这些数字后面不跟单位
- 文字样式:
CSS 使用 font-style 属性设置文本的风格
normal —默认值,显示标准样式字体
italic —斜体
- font复合属性写法
注意:使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
CSS文本属性
-
文本颜色:
color 属性用于定义文本的颜色
(1)预定义的颜色值【color: red;】
(2)十六进制【color: #ff0000;】
(3)RGB代码 【rgb(255,0,0)或rgb(100%,0%,0%)】
-
对齐方式:
text-align:center 【水平对齐方式】
(1)left 左对齐【默认】
(2)right 右对齐
(3)center 居中对齐
-
修饰文本:
ext-decoration可以给文本添加下划线,删除线,上划线
(1)none 默认无装饰线(可以用来取消链接的下划线)
(2)underline 下划线(链接a自带下划线)
(3)overline 上划线
(4)line-through 删除线
-
文本缩进:
text-indent可以用来指定文本首行缩进
注意:em是一个 相对单位,是相对于本页当前元素一个文字的大小
-
行间距:
line-height 属性用于设置行间的距离(行高)
(1)行高的文本分为 :上间距 文本高度 下间距
【上间距+文本高度+下间距 = 行间距】
CSS的引入方式
- CSS的三种样式表
(1)行内样式表(行内式)
是在元素标签内部的 style 属性中设定 CSS 样式,适合于修改简单样式
(2)内部样式表(嵌入式)
行内样式表(内联样式表)是写到html页面内部,单独放在<style>
标签里
注意:控制整个页面中的元素样式设置
(3)外部样式表(链接式)
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中,之后把CSS文件引入到 HTML 页面中使用
- 方法:
【1】新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中
【2】在 HTML 页面中,使用link 标签引入这个文件
【CSS引入方式总结】
Chrome 调试工具
- 打开调试工具
打开Chrome浏览器按下F12或者单击鼠标右键,找到检查
- 使用调试工具
(1)Ctrl+滚轮 可以放大开发者工具代码大小
(2)左边是 HTML 元素结构,右边是 CSS 样式
(3)右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色
(4)Ctrl + 0 复原浏览器大小
(5)如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误
(6)如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误