CSS 介绍
html具有局限性，它只负责页面的架构，只关注内容的语义。而美化是由CSS来处理的。
CSS: cascading style sheets，翻译过来是层叠样式表，或者，级联样式表。
CSS 语法规范
CSS有两部分：选择器，样式：属性：值。
属性：值，称为键值对。
写在head标签里面：
<head>
<style>
p {
color: red;
font-size: 12px;
}
</style>
</head>
CSS 代码风格
- 紧凑风格
h4 { color: red;font-size: 12px;}
- 展开风格
h4 {
color: red;
font-size: 12px;
}
提倡第二种风格，看起来更加直观。另外，提倡小写来书写CSS。
空格规范：
- 冒号后面+一个空格
- 选择器后面+一个空格+{
CSS 选择器
CSS 选择器分类
选择器可以分为基础选择器和复合选择器两类。
基础选择器：
- 由单个选择器组成
- 标签选择器，类选择器，id选择器，通配符选择器，等都是基础选择器
标签选择器：
就是使用HTML标签，比如div, p, h1, h2等，作为选择器。
局限性：不能差异化，只能选择全部的标签，比如只想设置第一个p标签的话，就做不到
类选择器：
单独选择一个，或者，几个，标签进行设置，哪个HTML标签需要这个样式就去调用这个类。
长名词中间使用短横线作为分割：.color-red
有一个命名规范：前端开发命名规范手册
.red {
color: red;
}
<li class="red">大明王朝</li>
多类名使用：中间用空格隔开
- 可以把共同的样式归并到一个类中
- 公共的类被调用，然后再调用单独的类
- 节省CSS代码，统一修改也非常方便
<div class="red font"></div>
.red {
color: red;
}
.font {
font-size: 20px;
}
id选择器
只允许调用一次，别的标签切勿使用
<div id="pink"></div>
#pink {
color: pink;
}
类选择器类似名字，可以重名，被多个人使用。
id选择器是身份证号，只允许一个人有一个号。
类选择器是最常使用，id选择器常用于唯一的元素上，且和JS搭配使用。
通配符选择器：
通配符*，表示所有标签。特殊情况下会使用，比如清除边距。
- {
attribute: value;
}
基础选择器的总结
图片来源B站pink老师
CSS 字体属性
font-family
中间用英文逗号隔开，并且多个单词组合的字体用引号包裹。
尽量使用浏览器默认的字体，保证在任何用户的浏览器中都能显示。
多个字体并排，计算机会从第一个字体开始，依次寻找，先找到哪个就用哪个。
一般是给body标签指定字体。
h2 {
font-family: Arial, 'Microsoft Yahei';
}
font-size
Chrome默认的字体大小是16px。
标题标签比较特殊，需要单独指定字体大小，不然的话，在body里的字体不会影响标题的字体大小。
body {
font-size: 16px;
}
h2 {
font-size: 18px;
}
font-weight
指定文字粗细效果，实际开发中，提倡用数字。normal=400, bold=700
number是不用加单位的。
body {
font-weight: bold;
font-weight: 700;
}
normal|bold|bolder|light|number
font-style
只要针对斜体，等同使用em标签。
body {
font-style: italic;
}
normal|italic
font 的复合写法
记得用空格隔开。而font-family是用英文逗号隔开。
必须保留font-size, font-family这2个属性，否则font属性不起作用。
body {
font: italic bold 16px 'Microsoft Yahei';
}
CSS字体属性的总结
图片来源B站pink老师
CSS 文本属性
color
开发中最多使用的是十六进制。
- 预定义的颜色red, green等单词
- 十六进制，#000000
- RGB, rgb(255,255,255)
text-align
只能设置文本的水平对齐。
div {
text-align: center;
}
left【默认值】 | right | center
text-decoration
可以用于去除a标签的下划线，所以最常用的是none。
div {
text-decoration: none;
}
none【默认值】 | underline【下划线】 | overline【上划线】| line-through【删除线】
text-indent
段落的首行缩进，可以取正数或者负数值。
p {
text-indent: 20px | 2em;
}
em是一个相对单位，1em就是当前元素一个文字的大小。如果没有设置文字大小，则按照父元素的大小进行设置。
line-height
行间距，控制行与行之间的距离。
行间距=上间距+文字高度+下间距。在文字高度不变的情况下，改变的是上、下间距。
p {
line-height: 20px;
}
图片来源B站pink老师
CSS 文本属性总结
图片来源B站pink老师
CSS 引入方式
- 行内-行内样式表
- 嵌入-内部样式表
- 链接-外部样式表
行内样式表
写在标签里面。
<div style="color: red; font-size: 12px;">Hello World </div>
内部样式表
写在html的head中，用<style></style>标签包裹。<style></style>其实可以放html任何地方，但是一般放在head中。
外部样式表
在开发中使用最多：把CSS写在单独的文件中，用的时候在HTML中引用。
<link rel="stylesheet" href="css文件路径">
rel表示被链接的文件是一个样式表
href可是是相对路径，也可以是绝对路径
CSS 引入方式的总结
图片来源B站pink老师
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
