Web前端教程2-CSS教程

目录

• 1. CSS基本语法
  • 1.1. CSS基本定义
  • 1.2. CSS布局属性
  • 1.3. CSS文本常用属性
• 2.CSS选择器
  • 2.1. 标签选择器
  • 2.2. id选择器
  • 2.3. 类选择器
  • 2.4. 层级选择器
  • 2.5.组选择器
  • 2.6. 伪类和伪元素选择器
• 3. 块元素、内联元素和内联块元素
  • 3.1. 块元素（行元素）
  • 3.2. 内联元素（行内元素）
  • 3.3. 内联块元素
  • 3.4. 实例： 设置导航栏
• 4.CSS表格
• 5.盒模型
  • 5.1. 什么是盒子模型
  • 5.2设置边框
  • 5.3. 盒子内边距
  • 5.4. 盒子外边距
  • 5.5. 盒子尺寸大小
  • 5.6. 盒子元素溢出
    • 5.6.1. margin-top塌陷
    • 5.6.2. 元素溢出
• 6. CSS浮动
  • 6.1. 浮动的特性
  • 6.2. 清除浮动
• 7. 定位
  • 7.1. 定位简介
    • 7.1.1. 相对定位
    • 7.1.2. 绝对定位
    • 7.1.3. 固定定位
  • 7.2. 定位元素的特性
  • 7.3. 定位元素层级
  • 7.4. 典型的 定位布局
  • 7.5. 浮动定位的范例
    • 1. 导航栏
    • 2. 新闻列表
• 8. CSS背景

1. CSS基本语法

CSS是层叠样式表

1.1. CSS基本定义

CSS的定义方法时：

选择器{
  属性： 值；
  属性： 值；
}

div{
    width:100px;
    height:100px;
    background:gold;
}

• 选择器是将样式和页面元素关联起来的名称
• 属性是希望设置的样式属性，每个属性有一个或多个值

CSS引入页面的方法

1. 在HTML中通过外联方法

<link rel = "stylesheet" type="text/css" href="css/style.css">

1. 内联式，通过标签的style属性，直接在标签上写样式

<div style="width: 100px; height: 100px">..</div>

1. 嵌入式： 通过style标签

<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

1.2. CSS布局属性

属性	说明
width	宽度
height	高度
background-color	背景颜色
border	border: 1px solid gold;设置元素边框
padding	设置内容和元素边框距离
margin	元素和容器的距离， margin: 10px auto 0居中
float	设置元素浮动

1.3. CSS文本常用属性

常用的应用文本的css样式

属性	说明	值
color	文本颜色	颜色值
font-size	文字大小	px值
font-family	文字字体	字体名称
font-style	字体是否倾斜	normal:不倾斜 italic：倾斜
font-weight	字体是否加粗	normal:不加粗 bold:加粗
font	同时设置上面的属性	加粗 字号 /行高 字体
line-height	文字的行高	px值
text-decoration	文字的下划线	none去除下划线
text-indent	文字的首行缩进	首行缩进24px
text-align	文字的水平对齐方式	center字体居中

2.CSS选择器

2.1. 标签选择器

• 直接通过html中的标签名字来选择对于的元素
• 选择面太广，很少用

/* 直接选择html中所有的div元素 */
div{
  color: red;
}

2.2. id选择器

• 在html中设置一个id，在css中引用设置它
• id只能是一个全局唯一样式
• 一次只能选择一个元素
• 很少用

#box{
  color: pink;
}

<div id="box">666</div>

2.3. 类选择器

• 为了补偿id选择器的缺点，可以一下子设置多个元素样式

.lei{
  color: red;
}

.indent{
  text-indent: 20px;
}

<div class="lei indent">1</div>
<div id = "box" class="lei">2</div>
<div class="lei">3</div>
<div class="lei">4</div>
<div class="lei">5</div>

2.4. 层级选择器

• 主要用于选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用

.list{
  height: 30px;
}

/* 这是一个两层的层级选择器 */
.list a{
  text-decoration: none;
  color: #333;
}

.list .num{
  color: #333;
}

<ul class="list">
  <li><a href = "">新闻标题</a></li>
  <li class="num"><a href = "">新闻标题</a></li>
  <li><a href = "">新闻标题</a></li>
  <li><a href = "">新闻标题</a></li>
</ul>

2.5.组选择器

• 多个选择器，有相同的样式设置，可使用组合选择器

/* 设置3个类的公共属性 */
.box1,.box2,.box3{
  font-size: 14px;
  text-indent: 28px;
}

/* 然后在使用类选择器个性化 */
.box1{
  color: red;
}

.box2{
  color: green;
}

.box3{
  color: orange;
}

/* 更多设置形式 */
/* 匹配所有的p,b,i,span元素 */
p,b,i,span {
  color: green;
}

<div class="box1">3</div>
<div class="box2">4</div>
<div class="box3">5</div>

2.6. 伪类和伪元素选择器

• 常用的伪类选择器为hover，表示鼠标悬停在元素上时的状态

/* 鼠标放到list类下的a时，会变色 */
.list a:hover{
  color: gold;
}

• 伪元素选择器有before和after，它们可通过样式在元素中插入内容

/* 块级首行 */
/* 在p,div，body等块级元素才有效果 */
::first-line{
  color: red;
}

/* 块级首字母 */
::first-letter{
  color: red;
}

/* 文本前插入内容 */
/* 变成：点击百度 */
a::before{
  content: '点击-';
}

/* 文本后插入内容 */
/* 百度搜索 */
a::after{
  content: '搜索';
}

3. 块元素、内联元素和内联块元素

3.1. 块元素（行元素）

• 块元素，也称为行元素，比如div,p,ul,li,h1-h6,dl,dt,dd等都是块元素
• 它的行为有：
  • 支持全部的样式
  • 如果没有设置宽度，默认宽度是父级宽度的100%
  • 盒子占据一行，即使设置了宽度

<style type="text/css">
  body{
    margin: 0;
  }

  div{
    background-color: gold;
    text-align: center;
    margin: 10px 0;
  }

  .box2{
    width: 200px;
  }

 .box3{
    width: 300px;
  }
</style>
...
<div class="">这是一个div元素</div>
<div class="box2">这是二个div元素</div>
<div class="box3">这是三个div元素</div>

3.2. 内联元素（行内元素）

• 内联元素，也是行内元素，布局中常用的有a, span,em,b,strong,i等都是行内元素
• 他们在布局中的行为是：
  • 支持部分样式(不支持宽，高，margin上下，padding上下)
  • 宽高由内容决定
  • 盒子挤在一行
  • 代码换行，盒子之间会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height设置垂直对齐方式

<style type="text/css">
body{
  margin: 0;
}

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto 0;
}

.con a{
  background-color: gold;
  width: 500px;
  height: 300px;
  margin-left: 30px;
  margin-top: 50px;
}

</style>
...
<div class="con">
<a href="#">这是一个a标签</a>
<a href="#">这是二个a标签</a>
</div>

解决内联元素之间的间隔问题

1. 去掉内联元素之间的换行
2. 将内联元素的父级设置font-size为0，然后再设置自身的font-size

<!--方法1：-->
<a href="#">这是一个a标签</a><a href="#">这是二个a标签</a>

<!--方法2：-->
<style type="text/css">
body{
  margin: 0;
}

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto 0;
  font-size: 0;
}

.con a{
  background-color: gold;
  width: 500px;
  height: 300px;
  margin-left: 30px;
  margin-top: 50px;
  font-size: 20px;
}

</style>

3.3. 内联块元素

• 结合了块元素和内元素的优点，通过display转换

• 他们的行为是：

  • 支持全部样式
  • 如果没有设置宽高，由内容决定
  • 盒子并在一行
  • 代码换行，由间距
  • 子元素是内联块元素，父元素可以通过text-align设置水平对齐方式，用line-height设置垂直对齐
  • display属性

属性	说明
none	隐藏不占用位置
block	块元素
inline	内联元素
inline-block	内联块元素

<style type="text/css">
  body{
    margin: 0;
  }

  .con{
    width: 500px;
    height: 300px;
    border: 1px solid #333;
    margin: 50px auto 0;
  }

  .con a{
    background-color: gold;
    width: 100px;
    height: 50px;
    display: inline-block;
  }

</style>

<div class="con">
  <a href="#">这是一个a标签</a>
  <a href="#">这是二个a标签</a>
</div>

3.4. 实例： 设置导航栏

<style type="text/css">
  body{
    margin: 0;
  }

  .menu{
    width: 694px;
    height: 50px;
    margin: 50px auto 0;
    list-style: none;
    padding: 0;
    font-size: 0;
  }

  .menu li{
    display: inline-block;
    width: 98px;
    height: 48px;
    border: 1px solid gold;
    font-size: 16px;
    margin-right: -1px;
    text-align: center;
    line-height: 48px;
  }

  .menu li:hover{
    background-color: orange;
  }

  .menu a{
    font-family: 'Microsoft Yahei';
    color: pink;
    text-decoration: none;
  }

  .menu a:hover{
    color: red;
  }

</style>
</head>
<body>
  <ul  class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司简介</a></li>
  </ul>
</body>

4.CSS表格

.goods{
  /* 通用属性 */
  width: 300px;
  height: 300px;
  text-align: center;

  /* 设置的单元格相邻边是否被合并
  separate: 单元格边框独立，默认
  collapse： 边框合并（变成实心的实现） */
  border-collapse: collapse;

  /* 设置单元格边框边距，只有在border-collapse为separate情况下才有用 */
  border-spacing: 10px;

  /* 标题方位
  top, bottom */
  caption-side: top;

  /* 空内容单元格的是否显示,hide */
  empty-cells: hide;

  /* 表格的排版方式
  auto: 内容过长的时候，会拉伸整个单元格，挤压其他单元格
  fixed： 内容过长时，不会拉伸，会换行处理 */
  table-layout: fixed;
}

/* 设置表头的背景颜色 */
.goods th{
  background-color: green;
  color: #ffffff;
}

<link rel="stylesheet" type="text/css" href="style.css">

<table class = "goods" border="1">
  <caption>人员表格</caption>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>34</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>男</td>
    <td>43</td>
  </tr>

5.盒模型

5.1. 什么是盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是现实盒子的比喻，帮组我们设置元素对应的样式

• 盒子的边框： border
• 盒子内的内容和边框的间距： padding
• 盒子和盒子之间的间距： margin

5.2设置边框

• border：长度值或者百分比
• border-top/bottom
• border-left/right

.box{
  width: 200px;
  height: 100px;
  background-color: red;

  /* 设置顶部边框的宽度，颜色 */
  /* border-top-width: 10px;
  border-top-color: #000; */
  /* 设置线的样式，实线solid， 虚线dashed， 点线dotted */
  /* border-top-style: solid; */
  /* 全部一下子来写 */
  /* border-top: 10px solid #000; */

  border: 10px solid orange;
}

<div class="box"></div>

5.3. 盒子内边距

• padding：长度值或者百分比
• padding-top/bottom
• padding-left/right

.box{
  padding: 20px;

  /* 上，右，下，左 */
  /* padding: 10px 20px, 10px, 20px; */
}

5.4. 盒子外边距

根据body文档的左上角为起点

• margin
• margin-top/bottom
• margin-left/right

注意

1. 当两个垂直外边距相遇时，它们将形成一个新的外边距，这个新的外边距长度等于两个发生合并的外边距的高度中的最大值，解决方法是

• 只设置margin-top,不设置margin-bottom
• 将元素浮动或者定位

1. 盒子水平居中方法 :使用auto平分水平距离

.box{
  margin: 100px auto;
}

5.5. 盒子尺寸大小

盒子宽度 = width + 左右padding值 + 左右的border值

盒子高度 = height + 上下的padding值+ 上下的border值

.box1,.box2,.box3{
  width: 50px;
  height: 50px;
  background-color: gold;
  margin: 20px;
}

.box2,.box3{
  border: 50px solid #000;
}

.box3{
  padding: 50px;
}

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

如何解决盒子尺寸动态变化的问题？

1. 使用indent： 首行缩进
2. 文本垂直居中line-height
3. 文本水平居中text-align
4. 盒子水平居中margin: 10px auto;

假设设置一个高宽45*400px的盒子

.box2{
  width: 400px;
  height: 50px;
  border-top: 1px solid #f00;
  border-bottom: 3px solid #666;
  font-size: 20px;
  font-family: "Microsoft Yahei";
  text-indent: 15px;
  /* 让文字居中 */
  line-height: 50px;
}

5.6. 盒子元素溢出

5.6.1. margin-top塌陷

在两个盒子嵌套的时候，内部的盒子设置的margin-top会加到外部的盒子上（只有外部的盒子有margin-top），导致内部的盒子margin-top设置失败，解决方法如下：

1. 外部盒子设置一个边框
2. 外部盒子设置overflow: hidden
3. 外部盒子使用伪元素类(常用)

/* 类似于加边框 */
.clearfix:before{
  content: "";
  display: table;
}

/* <div class= "non clearfix"></div> */

5.6.2. 元素溢出

当子元素的尺寸超出父元素的尺寸时， 需要设置父元素显示溢出的子元素的方式，设置的方法通过overflow属性设置

属性值	说明
visible	内容不会被修剪，会呈现在元素框外部，默认
hidden	内容会被修剪，并且其他内容不可见，此属性还有清除浮动、清除margin-top塌陷的功能
scroll	内容会被修剪，通过滚动条显示
auto	如果内容被修剪，就通过滚动条显示
inherit	规定应该从父元素继承overflow属性的值

什么是溢出

<div class="con">
  <div class="box">

  </div>
</div>

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto;
}

.box{
  width: 400px;
  height: 600px;
  background-color: gold;
}

以下这个图就是溢出

设置溢出方法

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto;
  overflow: scroll;
}

6. CSS浮动

文档流

文档流，是指按照html标签编写的顺序一次从上到下，从左到右排列，块元素占一行，行内元素在一行只能从左到右排列，先写的先排，后写的后排，每个盒子都占据自己的位置， 浮动，定位可以打破这种规律

6.1. 浮动的特性

1. 浮动元素有左浮动(float:left)和右浮动(float:right)
2. 浮动的元素会向左或者向右浮动，直到碰到了父元素边界，浮动元素，或者未浮动元素才会停下来
3. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
4. 浮动会让行内元素或者块元素自动转为行内块元素
5. 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果--也就是说浮动元素像是浮起来一样，后面的元素就占据了浮动起来空的位置，但是其中的文字会避开浮动的元素 浮动相当于飘起来了，到了天上，空出来的位置就会被占据（但是文字不会，从而形成文字饶图）
6. 父元素内整体浮动的元素无法撑开父类，需要清除浮动
7. 浮动元素之间没有垂直margin的合并

浮动特性1-5

/* 碰到父元素边界停下 */
.box1{
  float: left;
}

/* 碰到父元素边界停下 */
.box2{
  float: right;
}

/* 碰到box1浮动元素边界停下 */
.box3{
  float: left;
}

6.2. 清除浮动

• 父级上增加属性overflow: hidden（在定位的时候会有问题 ）
• 在最后一个子元素的后面加入空的div，给它样式属性clear: both(不推荐)
• 使用成熟的清浮动样式类(推荐)

/* 既可以清除margin-top的bug，也可以清除浮动 */
.clearfix:after, .clearfix:before{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

.clearfix{
  zoom: 1;
}

清除浮动的用法(在父级上添加)

<div class = "con clearfix">

7. 定位

7.1. 定位简介

可以使用CSS的position属性来设置元素的定位类型，position的设置项如下：

• relative： 相对定位元素，元素所占的文档流位置不变，元素本身相对文档流进行位置偏移
• absolute： 绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，就相当于body元素定位
• fixed： 固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为为漂浮在文档流的上方，当有滚动条的时候，元素会跟随滚动条一直显示
• static: 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
• inherit: 从父元素继承position的值

7.1.1. 相对定位

.con{
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 100px auto 0;
}

.con div{
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: gold;
  font-size: 40px;
  text-align: center;
  line-height: 100px;

}

.box01{
  position: relative;
  top: 80px;
  left: 50px;
  background-color: green;
}

7.1.2. 绝对定位

.box01{
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: green;
}

我们也可把外部容器设置为定位的起点

.con{
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 100px auto 0;
  position: relative;
}

.box01{
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: green;
}

7.1.3. 固定定位

• 跟随滚动框走

.box01{
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: green;
}

7.2. 定位元素的特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

7.3. 定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

7.4. 典型的 定位布局

• 固定在顶部的菜单
• 水平垂直居中的弹框
• 固定的侧边的工具栏
• 固定在底部的按钮

7.5. 浮动定位的范例

1. 导航栏

<ul class="menu">
  <li class="active"><a href="">首 页</a></li>
  <li><a href="">网站建设</a></li>
  <li><a href="">网站建设</a></li>
  <li><a href="">网站建设</a></li>
  <li><a href="">网站建设</a></li>
  <li><a href="">网站建设</a></li>
  <li><a href="">网站建设</a></li>
  <li class="new"></li>
</ul>

.menu{
  width: 950px;
  height: 40px;
  margin: 50px auto 0;
  list-style: none;
  background-color: #55a8ea;
  padding: 0;
  position: relative;
}

.menu li{
  float: left;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.menu li a{
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  color: #fff;
  text-decoration: none;
}

.menu .active{
  background-color: #00619f;
}

.menu li:hover{
  background-color: #00619f;
}

.menu .new{
  width: 30px;
  height: 30px;
  background: url(new.png) no-repeat;
  position: absolute;
  left: 433px;
  top: -20px;
}

.menu .new:hover{
  background: url(new.png) no-repeat;
}

2. 新闻列表

<div class="news_list_con">
  <h3><span>新闻标题</span></h3>
  <ul>
    <li><a href="">特征布局：新闻列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征布局：新闻列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征布局：新闻列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征布局：新闻列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征布局：新闻列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征布局：新闻列表所需要的至少</a><span>2016-12-25</span></li>

  </ul>
</div>

.news_list_con{
  width: 600px;
  height: 290px;
  border: 1px solid #ddd;
  margin: 50px auto 0;
  overflow: hidden;
}

.news_list_con h3{
  height: 50px;
  width: 560px;
  border-bottom: 1px solid #ddd;
  margin: 0px auto;
}

.news_list_con h3 span{
  display: inline-block;
  height: 50px;
  border-bottom: 2px solid red;
  font-size: 18px;
  line-height: 50px;
  font-family: 'Microsoft Yahei';
  padding: 0 15px;
}

.news_list_con ul{
  list-style: none;
  padding: 0;
  width: 560px;
  height: 238px;
  margin: 7px auto 0;
}

.news_list_con ul li{
  height: 38px;
  border-bottom: 1px solid #ddd;
}

.news_list_con ul a{
  float: left;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  text-decoration: none;
  color: #000;
}

.news_list_con ul a:before{
  content: ".";
}

.news_list_con ul a:hover{
  color: red;
}

.news_list_con ul span{
  float: right;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  color: #000;
}

8. CSS背景

页面上放图片的方法

方法	说明
直接通过src	占用空间
通过backgound-image	图片不占用空间，只是作为背景，可以在上面写字..

backgound-image属性解释

background是CSS中很重要的一个属性，它复制给盒子设置背景图片和背景颜色的，background是一个复合属性，他可以分解成如下几个设置项

• backgound-color： 设置背景颜色
  • image postion color repeat
• backgound-image： 设置背景图片地址
• backgound-repeat： 设置背景图片如何重复平铺
  • repeat(default),repeat-X,repeat-Y, no-repeat
• backgound-position： 设置背景图片位置
  • 水平(left/right/center) 垂直(top/bottom/center)同时设置:必须在no-repeat情况下使用
  • 水平偏移(10px) 垂直偏移(0px)：参考点是 父元素的左上角
• backgound-attachment： 设置背景图片是固定还是随着页面滚动条滚动
  • fixed：不随着滚动

.box{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background-image: url(news.png);
}