前端与CSS(上)|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第二天
一.CSS是什么？
CSS(Cascading Style Sheets,层叠演示表)是用来给HTML标签添加样式的语言 用来定义页面元素的样式、设置字体颜色、设置位置大小添加动画效果
二.CSS是如何工作的？
三.选择器Selector
找出页面中的元素,以便给他们设置样式并使用多种方式选择元素、按照标签名类名或id、按照属性、按照DOM树中的位置
基础选择器
由单个选择器组成的基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器
1. 标签选择器
标签选择器是指用HTML标签名作为选择器、按标签名称分类，为页面中某一类标签指定统一的CSS样式
2. 类选择器
差异化选择不同的标签，单独选一个或者多个标签可以使用类选择器
类选择器-多类名：
一个标签可以有多个类命
使用方式：
<div class="red font20">多类名</div>
(1).在标签class属性中写多个类名
(2).多个类命中间必须用空格分开
3. id选择器
区别:只能调用一次，别人切勿使用（一次性）
id选择器可以标有id的HTML元素指定的样式
HTML元素以ID属性来设置id选择器，CSS中的id选择器以"#"来定义
语法：
#id名{
属性1；
属性2；
}
4. 通配符选择器
在CSS中，通配符选择器使用"*",他表示选取页面中所有的元素(标签)
语法：
*{
属性
}
复合选择器
在CSS中，可以根据选择器的类型分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的
- 复合选择器可以更准确的、更高效的选择目标元素（标签）
- 复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
1. 后代选择器(重要)
后代选择器又称为包含选择器，可以选择父类元素里的子元素
语法：
元素1 元素2{样式声明}
上述语法表示选择元素1里面的所有元素2（后代元素）
例如
ul li {样式声明}
元素1和元素2是分开的 中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
2. 子选择器(重要)
子元素选择器只能选择作为某元素
元素1>元素2{样式声明}
例如：
div>p
元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子都不归他管
3. 并集选择器(重要)
并集选择器可以选择多组标签，同时为他们定义样式，任何形式都可以做并集选择器，逗号分隔
4. 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如：hover、：first-child
| 链接伪类选择器 | 描述 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:avtive | 选择活动链接（鼠标按下为弹起的链接） |
注意书写顺序：为了确保生效按照：link-visited-hover-active
5. :focus伪类选择器
：focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input:focus{
background-colo:yellow;
}
四.组合(Combinators)
名称 语法 说明 示例
直接组合 AB 满足A同时满足B input:focus
后代组合 AB 选中B，如果他是A的子孙 nav a
亲子组合 A>B 选中B，如果他是A的子元素 section>p
兄弟选择器 A~B 选中B，如果他在A后且和A同级 h2~p
相邻选择器 A+B 选中B，如果它紧跟在A后面 h2+p
五.通用字体族
- Serif衬线体(Georgia、宋体)
- Sans-Serif无线体(Arial、Helvetica、黑体、微软雅黑)
- Cursive手写体(Caflisch Script、楷体)
- Fantasy(Comic Sans MS,Papyrus)
- Monospace 等宽字体(Consolas、Courier、中文字体)
1. 字体系列
CSS使用font-family属性定义文本的字体系列
p{ font-famliy:"微软雅黑";}
div{font-famliy:Arial,"microsoft Yahei","微软雅黑";}
各个字体之前需要用英文逗号隔开 ; 一般情况下，如果有空格隔开的多个单词组成的字体，加引导; 经量使用系统默认自带字体，保证在任何用户的浏览器中可以正确显示; 常见的几个字体：body{font-family:'microsoft Yahei',tahoma，Arial,'Hiragino Sans GB';}
2. 字体大小 css使用font-size属性定义定义字体大小
p{
font-size:20px;
}
px（像素）大小是我们网页最常用的单位, 谷歌浏览器默认的文字大小为16px, 不同浏览器可能默认显示字号大小不一致，尽量给一个明确值大小，不要默认大小, 可以给body指定整个页面文字的大小
3. 文字粗细
CSS使用font-weight属性文字粗细; 列如:strong 加粗
4. 文字样式
SS使用font-style属性设置文本的风格
p{ font-style:namal; }
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style:normal; |
| italic | 浏览器会显示斜体的字体样式 |
5. 字体复合属性
body{
font:font-style font-weigth font-size/line-height font-family;
}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序。并且各个属性间空格隔开；不需要设置的属性可以省略（取默认值），但必须保留font-size和font-famliy属性，否则font属性将不起作用
字体属性总结
属性 表示 注意点
font-size 字号 我们通常用的单位是PX像素，一定要跟上单位
font-famliy 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是700或者不加粗是normal或者400记住数字不跟单位
font-style 字体样式 记住倾斜是italic 不倾斜是normal工作中常用normal
font 字体连写 1.字体连写是有顺序的 不能随意换位置。2.其中字号和字体必须同时出现
六.文本
1. 装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线
div{
text-decoration:underline;
}
| 属性值 | 描述 |
|---|---|
| none | 默认.没有下划线（最常用） |
| underline | 下划线。链接a自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
2. 文本缩进
text-indent属性用来指用文本的第一行的缩进，通常是将段落的首行缩进
div{
text-indent:10px;
}
可以设置负值
p{
text-indent:2em;
}
em是一个相对的单位，就是当元素（font-size）1个文字的大小。如果当前元素没有设置大小，则会按照父元素的1个文字大小
3. 行间距 (文本缩进里面)
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离(字段的上间距和下间距)
P{
line-height:26px;
}
文本属性总结
属性 表示 注意点
color 文本颜色 我们通常用 十六进制 比如而且是简写的#fff
text-align 文本对其 设定文字水平的方式
text-indent 文本缩进 用于段落首行缩进的2个字符 text-align:2em;
text-decoration 文本修饰 记住 添加下划线underline 取消下划线 none
line-height 行高 控制行于行之间的距离
七.CSS的三种样式表
按照CSS样式书写的位置（或者引入的方式），CSS样式可以分为三大类
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式） 1. 内部样式表（内嵌样式表）
是写到html页面的内部，是将所有的CSS代码抽取出来，单独放到一个标签中
<style>
div{
color:red;
font-size:12px;
}
</style>
2. 行内样式表（使用较少）
内联样式表是在元素的标签内部的style属性中设置CSS样式，适用于修改简单的样式
div style="color:red;font-size:12px">青春常在</div>
style其实就是标签的属性在双引号中间，写法要求符合CSS规范可以控制当前的标签设置样式
3. 外部样式表
实际开发都是外部样式表，适用于比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用
<link rel="stylesheet" href="CSS文件路径">
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet".表明被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式
CSS引入方式总结
样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便，权重高 结构样式混写 较少 控制一个标签
内部样式表 部分结构和样式的相分离 没有彻底分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多 控制多个页面
八.Emmet语法(扩展)
ul>li
div>span
$自增符号
九.CSS的元素显示模式和转换
CSS的元素显示模式
HTML元素一般分为块元素和行内元素两种类型
块元素特点：
- 独占一行
- 高度，宽度，外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：文字类的元素内不能使用块级元素
例如：<p>、<h1>~<h6>
行类元素称为内联元素
行内元素: <a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
行类元素特点：
-
相邻行内元素在一行上，一行可以显示多个
-
高，宽直接设置是无效的
-
默认宽度就是它本身内容的宽度
-
行内元素只能容纳文本或其他行内元素 注意：链接里面不能再放链接了
特殊行内元素<a>里面可放块级元素，但是给<a>转换一下块级模式最安全
行内块元素的特点:
-
和相邻行内元素（行内块）在一行，但是他们之间会有空白缝隙。一行可以显示多个（行内块元素特点）
-
默认宽度就是它本身内容的宽度（行内元素特点）
-
高度，行高，外边距以及内边距都可以控制（块级元素特点）
几个特殊标签<img/>,<input/>,<td>同时具有块元素和行元素的特点
元素显示模式总结:
元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或其他行内元素
行内块元素 一行放多个行块元素 可以设置宽度和高度 它本身内容的宽度
元素显示模式转换
特殊情况下，需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围。
- 转换块元素：display:block;
- 转换行内元素：dispaly:inline;
- 转换为行内块元素：display：inlink-block;
十.CSS的背景
1. 背景演示background-color
一般情况下元素背景颜色默认值是transparent(透明的)
2. 背景图片background-image
background-image:none/url(图片地址);
3. 背景平铺
如果需要再HTML页面上对背景图象进行平铺，可以使用background-repeat属性
- background-repeat:
- repeat|背景图片在纵向和横向上平铺
- no-repeat|背景图片不平铺
- repeat-x|背景图象在横向上平铺
- repeat-y|背景图图象在纵向上平
4. 背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position:x y;
参数代表的意思是：X坐标和Y坐标。可以使用方位名词或者精确单位
| 参数值 | 说明 |
|---|---|
| length | 百分数、有浮点数和单位标识符组成的长度值 |
| position | top、cent、bottom、left、right 方位名词 |
5. 参数
- 参数是方位名词
如果指定两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致
如果只是指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
- 参数是精确单位
如果参数值是精确坐标，那么第一个肯定是X坐标，第二个一定是Y坐标
如果只定义一个值另外一个就是垂直居中
- 参数是混合单位
一个精确单位加一个方位名词
补充 （背景复合型写法）
background:背景颜色 背景图片地址 背景平铺 背景图象滚动 背景图片位置
6. 背景图象固定(背景附着)
background-attachment属性设置背景图片像是否固定或者随着页面的其余部分滚动
| 参数 | 作用 |
|---|---|
| scroll | 背景图象是随对象内容滚动 |
| fixed | 背景图象固定 |
7. 背景颜色半透明（alpha透明度）**
background:rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0~1之间
注意:盒子背景色半透明
背景总结
属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url（图片路径）
background-repeat 是否平铺 repeat/no-repeat-x/erpeat-y
background-position 背景位置 length/position 分别是X和Y坐标
background-attachment 背景附着 scroll（背景滚动）/fixed（背景固定)
