这是我参与「第四届青训营 」笔记创作活动的的第1天
复习简介
- 什么是CSS？
- CSS基础选择器的使用
- 字体样式设置
- 文本样式设置
- CSS的三种引入方式
- 使用Chrome调试工具来调试样式
一、CSS简介
CSS主要使用场景：美化网页、布局页面
1、HTML局限性
- 只关注于内容语义；
- 虽然可以做简单样式，但是无比的臃肿与繁琐；
- ···
2、CSS————网页美容师
1）. CSS
CSS，全称：Cascading Style Sheets，即层叠样式表，CSS也是一种标记语言。
2）、CSS主要用来设置什么？
- HTML页面中的文本内容，如页面字体，字体大小，对齐方式等；
- 图片外形，如宽高，图片边框样式，边距等；
- 网页的版面布局，以及外观的显示样式等。
简单理解，即CSS可以美化HTML页面，使HTML页面更漂亮，让页面布局更加简单！
3）、简介总结
- HTML主要负责页面结构，比如显示页面元素、显示页面内容等；
- CSS用来美化HTML，布局整个HTML页面；
- CSS的最大价值：由HYML专注去做结构呈现，样式统统交给CSS来做，即结构（HTML）和样式（CSS）相分离。
3、CSS语法规范
CSS规则主要由两大部分组成：选择器，以及一条或多条声明
例：
h1{
color:red;
font-size:25px;
}
- h1{}:选择器
- color:red; :声明
- color :属性
- red ：属性值
概括来说，即给谁来改样式，以及要怎么去改；
选择器用于指定CSS样式的HTML标签；
花括号内则是对该对象设置的具体样式；
属性是对指定对象设置的样式属性，例如字体大小、文本颜色等；
属性与属性值以“键值对”的形式出现，属性与属性值之间用英文":"隔开，以英文";"结尾，
用以区分不同的“键值对”。
4、CSS代码风格
注：以下代码风格非强制性规范，而是符合实际开发的书写方式
1）、样式格式书写
- 紧凑格式
例如：
h3{color:deeppink;font-size:20px;}
- 展开格式
例如：
h3{
color:deeppink;
font-size:20px;
}
我们在实际开发过程中，会更加倾向于第二种书写格式，即展开格式。
2）、样式大小写
小写：
h3{
color:pink;
}
大写：
H3{
COLOR:PINK;
}
我们在开发过程中，一般全部以小写字母来写，特殊情况除外
3）、空格规范
h3 { color: pink; }
- 属性值前面、冒号后面，保留一个空格；
- 选择器标签与大括号之间保留一个空格。
