1.CSS简介
1.1 CSS简述
CSS:层叠样式表(英文全称: Cascading Style Sheets):
是一种用来表现HTML样式的语言,CSS不仅可以静态地修饰页面,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体,字号样式,支持几乎所有的网页对象和模型样式编辑的能力
1.2为什么需要样式表
是为了实现内容与样式的分离:
1)HTML:负责页面的结构与内容 2)CSS:样式表负责页面外观的渲染(相当于华丽的衣服)。
CSS的特性:
1)内容与表现分离。 2)网页的表现统一,容易修改。 3)丰富的样式,使得页面布局更加灵活。 4)减少网页代码量,增加网页的浏览速度,节省网络带宽 5)运用独立于页面的CSS,有利于网页被搜索引擎收录 6)由浏览器解释运行 7)不区分大小写
2.CSS语法
2.1 CSS基本语法
注)选择器: 选择器就是找到你要渲染的那个HTML标签
例子:
2.2 CSS选择器
1.基本选择器三种:
1)HTML标签选择器:直接作用于某个HTML标签
2)类选择器:可在页面中被多次使用
3)ID选择器:作用于同一个ID的某个资源,同一个页面只能使用一次
注:标签名称直接加括号写样式表,类选择器需要在html元素的class属性中添加类名,很多个html元素都可以使用一个类选择器,
2.层叠选择器
1)后代选择器 :E F选择所有被E元素包含的F元素
2)子选择器:E>F选择所有作为E元素的子元素F(只选择第一代子元素)
3)群组选择器: 多个选择器通过逗号连接而成,利用群组选择器同时声明份额改革相同样式
3.伪类选择器:
1)first-of-type: 选择一组子元素中的第一个(即使有其他元素,也不会受到影响)
2)last-of-type:选择一组子元素的最后一个(即使有其他子元素,也不会受到影响)
3.nth-of-type(): 使用索引来选择某一个子元素(即使有其他子元素,也不会受到影响)
2.3 CSS引入方式
1)行内样式:写在某个标签中,只对本行有效。(内联样式),这样写就写死了,一般不用
2)内嵌样式:样式写在某个页面的style标签中,支队本页面有效。前面的例子都是内嵌样式。
3)外部样式表:将样式代码写在一个单独的文件中(.CSS文件),使用时要将这个.CSS文件导入使用。
2.4 CSS优先级
1)引用方式优先级: 行内样式 > 内嵌样 > 外部样式
2)选择器优先级:ID选择器 > 类选择器(属性选择器,伪类选择器)>标签选择器
3)如果在同一选择器上,外部样式,内嵌样式,行内样式都对某一属性使用了样式,也就是存在样式叠加时,那么要使用以下三个原则决定到底哪一种有效。
就近原则:距离最近的样式有效。
顺序原则:这里顺序是指书写顺序,也就是最后书写(不是调用)的样式有效
精细原则:或者叫特殊原则。即选择器的指向约精细越优先
2.5 CSS继承
1.html文档树(DOM节点树)
整个html就是一个树型结构。它的根就是html。
2.CSS继承规则:
1)子标签可以继承父标签的样式风格
2)子标签的样式不会影响父标签的样式风格
3)一般只有文字文本具有继承特性,如文字大小,文字加粗,文字颜色,字体等
3.盒子模型
3.1盒子模型
每个HTML元素都可以看作一个装了东西的盒子:
1)宽度,高度:盒子本身具有宽度(width)和高度(height)
2)内边距: 盒子里面的内容到盒子边框之间的距离即内边距(padding)
3)边框:盒子本身的边框(border)。
4)外边距:盒子边框外和其他盒子之间,还有外边距(margin)
1.外边距样式
2.边框样式
3.内边距样式
4.盒子模型尺寸
1)盒子模型总尺寸=border(两个边框宽度) + padding(两个内边距宽度)+内容宽度
2)盒子模型内容占用控件=margin(两个外边框宽度)+盒子模型总尺寸
3.2 元素默认样式与CSS重置
常用元素默认样式:
1.标签的margin为8px
2.p标签的上下外边距为16px
3.h1标签的上下边距为21.440px
4.u1标签的上下外边距为16px,左边距为40px
CSS重置:在实际开发中为了兼容性,也为了开发者更好的设置自己想要的样式,那么凡是浏览模式的样式,都不会使用,这就是CSS重置
3.3 元素分类
1.三种元素
元素分类有三种:行级元素(内联元素),块级元素,行内块级元素,块级元素
1)块级元素 : div ,p,ul,h1....
2)内联元素(lnline行内元素): span,a,strong....
3) 块级内联元素:img,table,form.....
3.4 块状元素,与内联元素的盒子模型
1.内联元素是从左到右向向排列,到最右端自动折行,即部独占一行,块级以块状显现,并和同级块一次垂直排列,左右撑满,即独占一行
2.块级元素可以包含内联元素和块级元素(p标签不能包含p标签)。但内联元素不能包含块级元素。
3.内联元素与块级元素属性的不同,还主要体现在盒模型属性上。
1)内联元素它的宽度和高度是自动的,也就是由内容撑开的,因此设置width和height无效。但是可以设置line-height。
2)块级元素的border无效,margin上下无效,padding上下无效,也就是padding和margin的left和right是可以设置的。
3)img比较特殊,它的border,margin,padding是有效的。
3.5显示与隐藏
display样式有两个功能:
1)控制元素的显示和隐藏
2)块级元素和行级(内联)元素的转变
display样式的值有如下几种:
3.6内容溢出处理
如果块的尺寸是固定的,而内容却有可能超出其尺寸时,可以使用overflow. overflow属性:设置当对象的内容超过其指定的高度或宽度时如何处理内容。
4.元素定位
4.1元素定位概念
为了实现网页整体布局,我们先要知道,一个元素是如何定位到页面上的某个位置的,这就是元素定位。元素定位有四种,可以使用position样式来设置元素定位,所以此属性值有四种:
1)static:静态定位(默认)。依据文档流定位。
2)relative:相对定位。以自身为基准,设置坐标(left,top,right,bottom),不脱离文档流
3)absolute:绝对定位。以父元素为基准,设置坐标(left,top,right,bottom),脱离文档流。
4)fixed:固定定位,以浏览器窗口为基准,设置坐标(left,top,right,bottom),脱离文档流
1.静态定位(文档流定位)
特点: 1)将页面上的元素,按照html的书写顺序,从上到下,从左到右,依次排列
2)内联元素部独占一行,块级元素独占一行
2.相对定位
特点:1)以自身为基准,设置坐标(left,top,right,bottom),不脱离文档流。
2)不脱离文档流,也就是说:相对定位元素仍然会被文档流中的其他元素所影响。
3)根据坐标定位到新位置之后,并不回收原位置空间。
3.绝对定位
特点:1)以父元素为基准,设置坐标,脱离文档流。
也就是说绝对定位将不会被文档流中的其他元素所影响。
2)根据坐标定位到新位置之后,原位置控件会被回收。
3)如果父元素也为relative或absolute定位,那么就以父元素为基准。
4.固定定位
特点: 固定定位以浏览器窗口为基准,设置坐标(left,top,right,bottom),脱离文档流。
4.2 总结
1.绝对定位不能扩展和维护,只能应用在某个局部
2.相对定位只限制自身,只能应用在某个局部
3.固定定位只限制自身,只能应用在莫格局部
4.所以在实际开发中,都使用文档流定位来进行页面布局,就是静态定位(默认),它能够随着页面元素的变化而自动调节
5.另外绝对定位元素和固定定位元素脱离了文档流,当这些元素位置重叠时,就会出现覆盖问题,此问题使用z-index样式解决,z-index样式的值是一个整形数,就表示元素所在的层级。
5.弹性布局
5.1.页面布局概述
1)传统的DIV+CSS+float浮动(布局方式),适用于PC端。
2)自适应布局方式,要开发多套页面,服务器根据不同的客户端返回不同的页面
3)响应式布局方式,开发一套页面,根据媒体查询返回的结果,跳转布局以适用不同的客户端。
4)多布局方式,类似报纸排版的样式。
5)弹性布局,适用与PC端与移动端。
5.2.弹性布局介绍
一个元素的display属性值设置为flex,那么这个元素中的子元素,就会遵循弹性布局的规则。
1.主轴与侧轴
弹性布局中默认存在两根轴,一个是水平方向的主轴,一个是垂直方向的侧轴。
1)主轴开始的位置叫做main start 结束位置叫做main end;
2)侧轴的开始位置叫做cross end;
3)侧轴永远垂直于主轴
2.flex-direction样式
fiex-direction属性就是用来设置主轴的方向的。
完整例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
display: flex; /*将body设置为弹性布局*/
flex-direction: column; /*这里设置为侧轴方向排列*/
}
.son{
width: 100px;
height: 100px;
border: solid 2px #f90;
background-color: yellow;
}
</style>
</head>
<body>
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
</body>
</html>
总结:
1)在弹性容器中,子元素想要水平方向排列,那就在弹性盒子中设置:flex-direction:row
2)在弹性容器中,子元素想要垂直方向排列,那就在弹性盒子中设置:flex-direction:column
3)在弹性容器中,以前的“块状元素独占一行”,“内联元素不独占一行”,“元素水平排列时需要浮> 动”等等规则,一律不再有效。
3.flex-wrap样式
由于弹性布局中的子元素能自动伸缩,所以,当父容器此次小于子元素整体尺寸时,子元素不会自动换行,而是自动收缩
那么,如果想要让子元素自动换行可以用flex-wrap:wrap;
4. justify-content样式
以主轴方向为例:子元素水平方向排列后,默认依次靠左排列。如果向让子元素居中,居右等,那么就可以设置justify-content样式。值有五种:
1.flex-start(默认):左对齐
2.flex-end: 右对齐
3.center: 居中。
4.space-between: 两端对齐,子元素之间的间距都相等。
5.space-around: 每个子元素两次的间距相等。所以子元素之间间距比子元素到边框间距大一倍
5.align-items与align-content样式
以主轴方向为例:子元素水平方向排列后,如果想让子元素垂直居中,那么就可以设置align-items样式。常用值为三种:
1.flex-start(默认) :上对齐。
2.flex-end: 下对齐
3.center: 居中。
再来看align-content样式: align-content样式对单行没有效果,对多行有效果,而且是将多行整体作为一个这个题附加效果的。
总结:在弹性盒子中,子元素侧轴对齐方式可以使用align-items或align-content
1.align-items对单行和多行都有效,align-content对单行无效
2.在多行中,align-items让每一行都在各自范围中垂直居中,align-content将多行作为一个整体,然后居中。
6.flex样式
如果想让每个子元素所占空间不一致,那么可以使用flex给子元素分配控件。使用flex时要注意以下两点:
1.flex样式是设置在子元素上的。
2.如果设置了flex,那就说明要给子元素按比例分配空间,因此width与height就失效了。
实例1:
上面实例中:flex样式后跟1个值:表示子元素所占空间的比例。三个div的宽度分别是窗口的:1/4,1/2,1/4
实例2:
上面实例中:flex样式后跟3个值:
1.第一个值:子元素尺寸自动放大值
2.第二个值:子元素尺寸自动缩小值
3.第三个值:子元素尺寸
例如:
1) 0 1 auto(默认):父元素尺寸变化时,子元素不放大,只缩小,尺寸自动充满。
2) 1 1 auto 父元素尺寸变化时,子元素自动放大缩小,尺寸自动充满
3) 0 0 300px: 父元素尺寸变化时,子元素不放大缩小,尺寸固定
总结:可以使用flex让一行的所有子元素自动盛满窗口宽度。而且每个子元素的宽度可以按比例进行分配。
6.布局实例
6.1典型1-3-1布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header,nav,article, section,aside,footer{
background-color: turquoise;
}
.container{
width: 1200px;
margin: 0 auto;
}
.container header{
width: 100%;
height: 60px;
margin-bottom: 10px;
}
.container nav{
width:100%;
height: 60px;
margin-bottom: 10px;
}
.container .main{
width: 100%;
margin-bottom:10px;
display:flex;
}
.container .main article{
flex: 0 0 200px;
}
.container .main section{
flex:1;
margin:0 10px;
}
.container .main aside{
flex: 0 0 200px;
}
.container footer{
width: 100%;
height: 60px;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<nav></nav>
<div class ="main">
<article>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
</article>
<section>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
</section>
<aside>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
bbbbb<br>
</aside>
</div>
<footer></footer>
</div>
</body>
</html>
6.2 典型自适应高度后台管理布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
<style>
html,body, .container{
width:100%;
height:100%;
margin:0;
padding:0;
}
.container{
display:flex;
flex-direction: column;
}
.container header{
flex: 0 0 60px;
width:100%;
background-color:#B3C0D1;
}
.container .main{
flex: 1;
width:100%;
display: flex;
}
.container .main aside{
flex:0 0 200px;
background-color: #D3DCE6;
}
.container .main section{
flex: 1;
background-color: #e9eff3;
}
.container footer{
flex: 0 0 60px;
background-color:#B3C0D1;
}
</style>
</head>
<body>
<div class="container">
<header></header>
<div class="main">
<aside></aside>
<section></section>
</div>
<footer></footer>
</div>
</body>
</html>