一、CSS层叠样式表概述
CSS :层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
多个样式可以层层覆盖叠加,如果不同的css样式对同一个html标签进行修饰,样式有冲突的,应用优先级高的,不冲突的样式规则共同作用。
1.CSS作用
修饰美化html网页。外部样式表可以提高代码复用性从而提高工作效率。html内容与样式表现分离,便于后期维护。2.CSS特点
丰富的样式定义CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。
另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。层叠
简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间
3. CSS语法规则
CSS 规则由两个主要的部分构成:
(1)选择器
(2)一条或多条声明
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
语法案例
选择器{属性:值;属性:值….. }<!--全局操作-->*{color:red;font-size:14px;}<!--针对某个属性标签操作-->div{color:red;font-size:14px;}<!--针对某个代号属性标签操作(微操)-->#div1{color:red;font-size:14px;}
注意事项
如果值为若干单词,则要给值加引号;font-family: “黑体”,“华文彩云”,“微软雅黑”,“arial”;
多个声明之间使用分号;分开
css对大小不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感
css注释/…/
二、HTML中三种引入CSS形式
1. 行内样式表(行内引入方式)
【body】下,在当前的标签【div】内使用了【style】属性,在style属性之后的内容都是CSS样式表CSS样式表中也是键值对形式,键值对的分隔符是一个 【:】,而且每一个属性之后都有 【;】结尾<div style="color: red;font-family: '隶书';font-size: 30px;">我爱中国</div>
2. 内联样式表
在【head】标签内,使用【style】标签,在style标签内都是CSS样式表style标签有一个type属性, text/css 可视化文本的css样式表在css文件中的注释方式 /**/ 可以作为单行注释,也可以作为多行<!--所有p标签可以使用-->p {color: green;font-size: 32px;font-family: "仿宋";}<!--操作某一个代号p标签修饰的字段-->#p1{color: darkred;}<p id="p1">日照香炉生紫烟</p>
3.外联样式表
在【head】标签内使用【link】标签,连接外部的CSS样式表(外部需要构建.css文件)link标签属性 -rel: 连接文件的类型type: text/css 可视化文本的css文件href: CSS文件所处的路径,可以是本地路径,也可以是网络路径<!--CSS文件-->table {border: 1px green solid;}td,th {border: 1px red solid;}<!--html导入--><link href="style.css" rel="stylesheet" type="text/css"/><style type="text/css">@import url(main.css);@import url(sheet1.css) all;@import url(print.css) print;h1{color:blue;}</style>
优势
可以满足多个页面的统一化处理,归纳总结思想可以提供用户访问网站的速度,外联样式表可以保存在本地,下一次打开网站不需要申请下载CSS样式表可以提供公司服务器带宽使用效率,降低带宽需求,可以满足更多的用户
优先级:内联样式>内部样式>外部样式
三、CSS选择器
1.基本选择器
除了前面提到的通过【标签】和【id】选择,还可以通过Class选择,因为id不能一样,所以只能操作一个标签,而标签选择操作范围又太大,这里便引入了class。
<style type="text/css">.s1{color: purple;font-size: 100px}.s2{color: pink;font-size: 100px}.s3{color: yellow;font-size: 100px}</style><div class="s1">hello,everyone!</div><div class="s2">hello,everyone!</div><div class="s3">hello,everyone!</div>
以上基本选择器的优先级从高到低:id >class >标签
2. 属性选择器
<style type="text/css">input[type='text'] {background-color: #FAEBD7;}a[href] {background-color: #8A2BE2;}</style><body><form name="login" action="#" method="get"><font size="3">用户名:<font> <input type="text" name="username" value="zhangsan" /> </br>密码: <input type="password" name="password" value="123456" /> </br><input type="submit" value="登录"></input></form><a href="">百度</a><a href="">京东</a></body>
3. 伪元素选择器
主要针对a标签使用,一般用于鼠标放到超链接标签上面的结果反映:
a:link 初始状态a:hover 鼠标经过状态a:active 激活状态a:visited 访问后状态
这里以颜色状态示例:
a:link {color: red;}a:hover {color: green;}a:active {color: yellow;}a:visited {color: blue;}
在实际应用中,都是将鼠标放到对应标签,会有下划线显示,表示hover状态,所以,实际使用情况是:(1)设置a (2)a:hover
a{color: black;font-size: 20px;text-decoration: none;/*默认下划线清除*/}a:hover{text-decoration: underline;/*在hover状态下显示下划线*/}
4. 层级选择器
4.1 列表
<!--第一个li-->ul li:first-child{color: red;}<!--最后一个li-->ul li:last-child {color:green;}<ul><li>苹果</li><li>香蕉</li><li>榴莲</li></ul>
4.2 后代选择器
div p{…} 表示div中的p标签,所有的p,后代div span{…} 表示div中的span标签,包括所有的span,后代4.3 子代选择器
div>span{…} 表示 div中有一个span, span是子代(只包含直接的后代)
4.4 相邻兄弟
/*相邻兄弟,从div位置开始,向后的相邻p标签*/div + p {font-size: 50px;}
4.5 通用兄弟
/*从div开始位置向下,所有的p标签*/div ~ p {color: aqua;}
4.6 其他选择器
/*全局选择器,对所有标签操作,包括body标签*/* {font-size: 35px;margin: 0;padding: 0;}/*群组选择器*/h1,h2 {background-color: red;}
四、CSS属性
1.文字属性
font-size:设置字体大小font-family:设置文字的字体,常见的值为 :黑体,宋体,楷体等font-style:规定斜体字,常见的值:normal - 文本正常显示
italic - 文本斜体显示 字体斜体
oblique - 文本倾斜显示 变形斜体font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。
100 对应最细的字体变形,900 对应最粗的字体变形。
数字 400 等价于 normal,而 700 等价于 bold。简写:
/*style weight size family swsf*/font: italic bold 30px "幼圆","黑体";
2.文本属性
color:设置文本颜色text-indent:缩进元素中文本的首行,取值类型如下:text-indent:5em;表示此段落第一行缩进5个字符的宽度
text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十text-decoration:
none:会关闭原本应用到一个元素上的所有装饰
underline: 添加下划线
overline:在文本的顶端画一个上划线
line-through:在文本中间画一个贯穿线,删除线
blink:让文本闪烁(无效果)text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)word-spacing: 字符之间的间隔letter-spacing: 单词或者字母之间的间隔line-height:设置行高 line-height:25px;与父容器高度一样,则是垂直居中
3. 背景属性
background-color:设置背景颜色,默认透明background-image:url(“图片路径”):设置背景图片background-repeat:repeat-y:只在垂直方向都平铺
repeat-x:只在水平方向都平铺
repeat:在水平垂直方向都平铺
no-repeat:任何方向都不平铺background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center简写:
background: red center no-repeat url(img/003.jpg);
4. 列表属性
list-style-type:decimal;改变列表的标志类型list-style-image: url(“images/dog.gif”);用图像表示标志list-style-position: inside;确定标志出现在列表项内容之外还是内容内部简写:list-style: decimal url(img/001.png) inside;
去掉样式
list-style:none;
list-style-type:none;
5. 尺寸显示轮廓属性
width:设置元素的宽度height:设置元素的高度显示属性(display)display: none 不显示
block:块级显示,有高度和宽度,块标签一行只能一个,不能并排,span可以通过该属性转为block
inline:行级显示,宽高没效果,但是一行可以多个,div可以通过该属性转为行级
inline-block:行级块,既能并排,又能调整高宽
#div1{width: 300px;height: 200px;background-color: #FAEBD7;border: 0px solid darkolivegreen;/*加厚外框,内边框300*200不变*/display: inline-block;/*bolck是块元素,有高度和宽度,块标签一行只能一个,不能并排*/}#div2{width: 300px;height: 200px;background-color: #556B2F;display: block;display: inline-block;/*inline-block即是块又是行,可以并排显示*/}
轮廓(outline)
绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
常用属性:
outline-style:solid(实线)/dotted(虚线)/dashed(虚线,虚线的每段较长)/double(框为空心);设置轮廓的样式
outline-color:red;设置轮廓的颜色
outline-width:10px设置轮廓的宽度
6. 浮动属性
浮动(float)的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在标准文档流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
三个标签块并排显示
<style type="text/css">#box1 {width: 100px;height: 100px;background-color: #808080;float: left;//定位属性float}#box2 {width: 100px;height: 100px;background-color: #006400;float: left;}#box3 {width: 100px;height: 100px;background-color: #DEB887;float: left;}#box4 {width: 100px;height: 100px;background-color: #5F9EA0;clear: both;/*前三个块并排,最后一个块另起一行开始,不受影响*/}</style>
7.定位属性
postion: static | relative| absolute| fixed
静态定位(默认定位方式)static,这里不做叙说。
7.1 相对定位(relative)
相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
<style type="text/css">#div1{width:200px;height: 200px;background-color: #556B2F;position: relative;/*相对定位,相对原来的位置*/left:10px;/*会发生碰撞*/top:10px;z-index: -1;/*被挡住,控制层叠位置*/}#div2{width:200px;height: 200px;background-color: #5F9EA0;position: absolute;/*以浏览器的窗口为依据定位*/left:0px;top:0px;}</style>
7.2 绝对定位(absolute)
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于视窗本身。
<style type="text/css">#div1{width:200px;height: 200px;background-color: #556B2F;position: relative;/*相对定位,相对原来的位置*/left:10px;/*会发生碰撞*/top:10px;z-index: -1;/*被挡住,控制层叠位置*/}#div2{width:200px;height: 200px;background-color: #5F9EA0;position: absolute;/*以浏览器的窗口为依据定位*/left:0px;top:0px;}</style>
7.3 固定定位(fixed)
元素框的表现类似于将 position 设置为 absolute,不过其位置相对于视窗本身。
示例如下(网站左下角和右下角广告):
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>#left {width: 200px;height: 200px;background-color: red;position: fixed;left: 0;bottom: 0;}#right {width: 200px;height: 200px;background-color: green;position: fixed;right: 0;bottom: 0;}#middle{width: 200px;height: 200px;background-color: blue;position: fixed;left: 0;bottom: 50%;}</style></head><body><div id="left"></div><div id="right"></div><div id="middle"></div></body></html>
五、盒子模型
盒子模型是由内到外进行的设置,元素内容为初始化尺寸(不变),通过设置内边距、边框等尺寸,使得整个元素尺寸发生变化
5.1 内边距属性
padding-top: 50px;
padding-left: 10px;
padding-bottom: 20px;
padding-right: 100px;
padding: 50px 100px 150px 200px;
一个数据: 上右下左都是一个数值
两个数据: 第一个数据,对应上下,第二个数值 对应左右
三个数据: 第一个数据对应上,第二个数据对应左右,第三个数据对应下
四个数据: 顺时针结构,上右下左
5.2 外边距属性
同padding,与界面边界或者其他元素之间的平面距离。
如果两个元素是纵向关系,外边距会产生一个合并关系,就是margin-top,和 margin-bottom合并,这里合并会采取较大的一方,作为两个元素之间的边距。
margin-top 塌陷
div2在div1的里面(div1是div2的父标签),在表现效果上,div2会覆盖div1;当div1和div2分别外边距100的时候,首先是按照div1在四个方向移动100,然后div2相对于div1再在四个方向移动100,但是由于margin-top塌陷问题,导致顶部没有变化。
解决办法
div1添加border属性父容器使用【overflow:hidden】,子标签【margin-top相对父容器顶部距离设置】,从而保证子标签在父容器垂直方向居中父容器使用【弹性盒子】
<html><head><meta charset="utf-8"><title>div的水平居中</title><style type="text/css">/*使div顶住浏览器的边框*/body{padding: 0;margin: 0;}#div1{/*上下为0,左右自动*/margin: 0 auto;width: 500px;height: 100px;background-color: #5F9EA0;overflow: hidden;/*溢出,当内容超出了盒子大小的时候进行处理,然后子块可以用margin-top调整*/ /*否则,外框顶部也会移动*/} #div1-1{margin:0 auto;margin-top: 25px;width: 200px;height: 50px;background-color: #D2691E;/*里面块垂直居中*/}#div2{/*上下为0,左右自动*/margin: 10px auto;width: 500px;height: 100px;background-color: #008000;/*使用弹性盒子*/display:flex;/*弹性盒子行对齐*/align-items: center;/*弹性盒子两端对齐*/justify-content: center;}#div2-1{width: 200px;height: 50px;background-color: #5F9EA0;}</style></head><body><!--div块在中间--><div id="div1"><div id="div1-1"></div></div><div id="div2"><div id="div2-1"></div></div></body></html>
六、CSS3扩展属性
6.1圆角属性
border-radius: 25px;/*半圆*/border-radius: 100px 100px 0px 0px;/*左上,右上,左下,右下*//* 四分之一圆*/border-radius: 100px 0px 0px 0px;/*左上,右上,左下,右下*/
6.2 阴影属性
用于向方框添加阴影
box-shadow: 10px 10px 5px #888888;
6.3 background-size背景图尺寸大小
<body style="text-align: center;background:url(img/1.png);background-size: 200px 300px;background-repeat: no-repeat;"></body>
6.4 text-shadow 文本阴影
/*第三个数值表示虚化程度*/text-shadow: 5px 5px 5px #ffff00;