- CSS基础语法(一)
- 一、CSS简介
- 1、CSS语法规范
- 2、CSS代码风格
- 二、CSS基础选择器
- 1、标签选择器
- 2、类选择器
- 3、id选择器
- 4、通配符选择器
- 5、总结
- 三、CSS字体属性
- 字体系列
- 字体大小
- 字体粗细
- 文字样式
- 复合属性
- 总结
- 四、文本属性
- 1、文本颜色
- 2、对齐文本
- 3、装饰文本
- 4、文本缩进
- 5、行间距
- 总结
- 五、CSS的引入方式
- 1、内部样式表
- 2、行内样式表
- 3、外部样式表
- 总结
- 六、Chrome调试工具
- 使用调试工具
- 七、Emmet语法
- 1、快速生成HTML结构语法
- 2、快速生成CSS样式语法
- 3.、快速格式化代码
- 一、CSS简介
CSS基础语法(一)
一、CSS简介
CSS是层叠样式表的简称,其是一门标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图形处理(宽高、边框样式、边距等)以及版面的布局和外观显示样式
1、CSS语法规范
使用HTML时,需要遵从一定的规范,CSS也是如此。想要熟练地使用CSS对网页进行修饰,首先要了解CSS样式规则
选择器 {属性:值}
Document
有点意思
选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
属性和值之间以”键值对“的形式出现
属性时对指定的对象设置的样式属性,例如字体大小(font-size)字体颜色(color)
属性和属性之间用英文“;”分开
CSS一般写在
标签里面
2、CSS代码风格
样式格式书写
-
紧凑格式
h3 {color: deeppink;font-size: 20px;}
-
展开格式
h3 { color: pink: font-size: 20px; }
强烈推荐第二种,更加直观
样式大小写
- 推荐用小写
空格规范
- 属性值前面,冒号后面,保留一个空格
- 选择器(标签)和大括号中间保留空格
二、CSS基础选择器
选择器(选择符)就是根据不同需求把不同标签选出来。有基础选择器和复合选择器
基础选择器
由单个选择器组成
基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器
1、标签选择器
指用HTML标签名称作为选择器,按标签分类,为页面中某一类标签指定统一的CSS样式
h3 {
color: pink:
font-size: 20px;
}
优点:能快速为页面中同类型的标签统一设置样式
缺点:不能差异化样式,只能选择全部的当前标签
2、类选择器
如果想要差异化选择不同的标签,单独选择一个或某几个标签
Document
有点意思
hello
- 类选择器的使用“.”(英文点号)进行标识,后面紧跟类名(自定义,自己命名)
- 可以理解为给这个标签起名字,来表示
- 长名称或词组可以使用横线来为选择器命名
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
多类名
使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 从而节省CSS代码,统一修改也非常方便
- 多类名选择器在后期布局比较复杂的情况下,较多使用
使用方式:
- 在标签class属性中写多个类名
- 多个类名必须用空格分开
- 这个标签就可以分别具有这些类名的样式
3、id选择器
Document
有点意思
hello
id选择器和类选择器的区别
- 类选择器可以被多次使用
- id选择器只能使用一次,不得重复
- id选择器和类选择器最大的区别在于使用次数
- 类选择器在修改样式中用的最多,id选择器一般用于唯一性元素上,经常和JavaScript搭配使用
4、通配符选择器
在CSS中,通配符选择器使用"*"定义,它表示选取页面中所有标签
* {
属性1:值1;
···;
}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况下使用,以下是清除所有的元素标签的内外边距
* { margin: 0; padding: 0; }
5、总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p {color: red;} |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
通配符选择器 | 选择所有标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * {color: red;} |
三、CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)
字体系列
CSS使用font-family属性定义文本的字体系列
p { /* p标签内的内容字体为微软雅黑 */
font-family:"微软雅黑";
}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体:"Microsoft YaHei", tahoma, arial, "Hiragino Sans GB"
字体大小
CSS使用font-size属性定义字体大小
body {
font-size: 20px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 20px;
}
px(像素)大小是我们网页常见的单位
Chrome默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,我们尽量明确大小,不要默认大小
可以给body指定整个页面文字的大小
字体粗细
CSS使用font-weight属性设置文本字体的粗细
body {
font-weight: normal
}
/* nomal(默认,正常字体,400)、bold(粗体,700)、bolder(特粗体)、lighter(细体)、自定义大小(直接写数字) */
文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal
}
/* normal(默认,标准字体样式)、italic(斜体) */
复合属性
简写方式,节约代码
font: font-style font-weight font-size/line-height font-famliy(按照顺序来哦)
p {
font:italic 700 16px "Microsoft YaHei";
}
使用font属性时,必须按照上面的语法格式中的顺序写,不能更换顺序,并且各个属性间以空格空开
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用
总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常的单位是px像素,一定要跟上单位 |
font-family | 字体 | 实际工作按照团队约定来写字体 |
font-weight | 字体粗细 | 加粗是700或者bold、不加粗是400或者normal,数字不要跟单位 |
font-style | 字体样式 | 斜体是italic、不倾斜是normal工作中我们常用normal |
font | 字体连写 | 1.字体连写是有顺序的,不能随便换位置2.其中字号和字体必须同时出现 |
四、文本属性
CSS Text(文本)属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、文本颜色
color属性表示颜色
p {
color: red
}
表示方法 | 属性值 |
---|---|
预定义的颜色值 | red, green, blue, pink等 |
十六进制 | #FF0000, #FF6600 |
RGB代码 | rgb(255, 0, 0)或(100%, 0%, 0%) |
2、对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center; /* 居中对齐 */
}
3、装饰文本
text-decoration属性规定添加到文本的装饰。可以给文本添加下划线(underline)、删除线(line-through)、上划线(overline)等,默认的是没有装饰线(none)
div {
text-decoration: underline;
}
4、文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进
p {
text-indent: 20px; /* 缩进20像素,如果是2em,则是缩进2个元素 */
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果单前元素没有设置大小,则会安照父元素的一个文字大小
5、行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
p {
line-height: 16px;
}
总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 我们通常使用十六进制表示颜色 |
text-align | 文本对齐 | 可以设定文字水平的方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进两个字符text-indent: 2em; |
line-height | 行高 | 控制行与行之间的距离 |
五、CSS的引入方式
1、内部样式表
内部样式表(内嵌样式表)是写到html页面的内部,是将所有的CSS代码抽取出来,单独放到一个