引入CSS样式表
CSS可以写到那个位置？ 是不是一定写到html文件里面呢？
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
1.在html5中可以省略，但一般都会写上，比较规范
2.一般放在head标签内，也可以放在其他位置
行内式（内联样式）
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表（外链式）
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
link单标签，放在头部head里面
1.herf，定义外部样式文件的URL，可以是相对路径，也可以是绝对路径
2.type，所连接文档的类型，text/CSS表示是一个css文件
3.rel 定义当前文档和所链接文档的关系，在这里需要指定stylesheet，表示链接的是一个样式表文件
三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构的分离 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式分离 | 没有完全分离 | 较多 | |
| 外部样式表 | 完全实现样式和结构的分离 | 需要引入 | 最多，墙裂推荐 | 控制整个站点 |
标签显示模式（display）
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：
块级元素(block-level)
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建
块级元素的特点
- 总是从新行开始
- 高度，行高，外边距及内边距都可以控制
- 宽度都是容器的100%
- 可以容纳内联元素和其他块级元素
行内元素(inline-level)
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素(内联元素)并没有独立的空间，靠内容(文字，图片)来撑起结构的，一般不可以设置宽高，对齐等属性，常用域控制页面中的文本的样式
行内元素的特点:
- 和相邻的行内元素在同一行上
- 宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
- 默认宽度就是本身内容的宽度‘
- 行内元素能容文本或其他行内元素
1.链接里面不可以放链接
2.行内元素不可以放块级标签
块级元素和行内元素区别
块级元素的特点
-
总是从新行开始
-
高度，行高，外边距及内边距都可以控制
-
宽度都是容器的100%
-
可以容纳内联元素和其他块级元素
行内元素的特点:
- 和相邻的行内元素在同一行上
- 宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
- 默认宽度就是本身内容的宽度
- 行内元素能容文本或其他行内元素
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点:
- 和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
- 默认宽度也本身内容的宽度
- 行高，宽高都可以控制
标签显示模式转换 display
块级元素转化行内元素
display:inline
行内转块级
display:block;
块级元素行内元素转行内块
display:inline-block;
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
交集选择器
由两个选择器组成，标签选择器，第二个class选择器，两个选择器之间不能有空格
p .p1{
color: red;
}
交集用的比较少
并集选择器
并集选择器用逗号链接，任何形式的选择器都可以作为并集选择器的一部分
div,p{
color: red;
}
后代选择器
也称为包含选择器，用空格连接，子子孙孙都可以被选中
注意：把外层标签写在前面，内层标签写在后面，中间用空格分割
子元素选择器
只包含子元素，父级标签写在前面自己标签写在后面，中间用>连接
测试题
<div class="nav"> <!-- 主导航栏 -->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
<style>
.site-r a{
color:red;
}
.nav ul li a{
color: skyblue;
}
</style>
在不修改以上代码的前提下，完成以下任务：
-
链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为蓝色
-
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。
-
主导航栏里面的一级菜单链接文字颜色为绿色。
属性选择器
选取标签带有某些特殊属性的选择器 我们称为属性选择器
div[class^=font]{
color: red;
}
div[class$=font]{
color: blue;
}
div[class*=font]{
color: pink;
}
标签名[属性名^=属性值]{ 属性名1：属性值1;
}
^起始位置
$结束位置
*任意位置
伪元素选择器（CSS3)
1.E::first-letter 文本的第一个单词或字
2.E::first-line文本第一行
3.E::selection，可以改变选中文本的样式
4.E::before 和E::after
在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，必须要结合content属性使用
伪类是一个冒号。伪元素是两个冒号
CSS书写规范
要养成良好的代码规范，这是专业化的开始
空格规范
【强制】选择器与{之间必须包含空格
.one { }
【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格
font-size: 12px;
选择器规范
【强制】当包含多个选择器时，每个选择器声明都必须独占一行
.one, .two, .three{ } 错误写法
.one, 正确写法
.two,
.three { }
【建议】选择器的嵌套层级不应该大于三级
属性规范
【强制】属性定义必须另起一行
【强制】属性定义后必须加上分号
CSS 背景(background)
CSS 可以添加背景颜色和背景图片，以及来进行图片设置。
| background-color | 背景颜色 |
|---|---|
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景固定还是滚动 |
| 背景的合写（复合属性） | |
| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
背景图片(image)
语法：
background-image : none | url (url)
none 无背景图
url 背景图片的地址
背景平铺（repeat）
语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
背景位置(position)
语法：
background-position : length || length
background-position : position || position
背景附着
语法：
background-attachment : scroll | fixed
背景简写
background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: color url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
背景缩放(CSS3)
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
凹凸文字
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background-color: #ccc;
color: #ccc;
font-size: 60px;
font-weight: bold;
font-family: "微软雅黑";
}
div:first-child {
text-shadow: 1px 1px 1px black;
}
div:last-child {
text-shadow: -1px -1px 1px black;
}
</style>
</head>
<body>
<div>
我是凹文字
</div>
<div>
我是凸文字
</div>
</body>
</html>
导航栏案例
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
nav{
border-top: 5px solid orange;
border-bottom: 1px solid gray;
height: 40px;
line-height: 40px;
}
nav a{
text-decoration: none;
color: black;
padding: 0 15px;
display: inline-block;
}
nav a:hover {
background-color: gray;
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">手机新浪网</a>
<a href="#">网站导航</a>
<a href="#">三个字</a>
</nav>
</body>
</html>
4292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
