实习的Day5（学习css基础样式上）
今天学习引入css样式表，老师首先告诉我们css有三种样式表，他们各有优势、缺点，优先级也不一样。他们分别是内部样式表、行内式（又称内联样式）、外部样式表（外链式）。接下来就来一一介绍。
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
行内式（内联样式）
通过标签的style属性来设置元素的样式，其基本语法格式如下：
<head>
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
</head>
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构的分离 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式分离 | 没有完全分离 | 较多 | 控制一个页面的标签 |
| 外部样式表 | 完全实现样式和结构的分离 | 需要引入 | 最多，墙裂推荐 | 控制整个站点 |
标签显示模式
块级元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建
块级元素的特点：
- 总是从新行开始
- 高度，行高，外边距及内边距都可以控制
- 宽度都是容器的100%
- 可以容纳内联元素和其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素(内联元素)并没有独立的空间，靠内容(文字，图片)来撑起结构的，一般不可以设置宽高，对齐等属性，常用域控制页面中的文本的样式
行内元素的特点:
- 和相邻的行内元素在同一行上
- 宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
- 默认宽度就是本身内容的宽度‘
- 行内元素能容文本或其他行内元素
块级元素和行内元素区别
块级元素的特点
-
总是从新行开始
-
高度，行高，外边距及内边距都可以控制
-
宽度都是容器的100%
-
可以容纳内联元素和其他块级元素
行内元素的特点:
- 和相邻的行内元素在同一行上
- 宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
- 默认宽度就是本身内容的宽度
- 行内元素能容文本或其他行内元素
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点:
- 和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
- 默认宽度也本身内容的宽度
- 行高，宽高都可以控制
标签显示模式转换 display
块级元素转化行内元素
display:inline
行内转块级
display:block;
块级元素行内元素转行内块
display:inline-block;
**CSS复合选择器** 交集选择器:
由两个选择器组成，标签选择器，第二个class选择器，两个选择器之间不能有空格
p .p1{
color: red;
}
并集选择器:
并集选择器用逗号链接，任何形式的选择器都可以作为并集选择器的一部分
div,p{
color: red;
}
后代选择器:
也称为包含选择器，用空格连接，子子孙孙都可以被选中
注意：把外层标签写在前面，内层标签写在后面，中间用空格分割
子元素选择器:
只包含子元素，父级标签写在前面自己标签写在后面，中间用>连接
属性选择器:
div[class^=font]{
color: red;
}
div[class$=font]{
color: blue;
}
div[class*=font]{
color: pink;
}
^起始位置
$结束位置
*任意位置
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
