CSS层叠样式表
* 通过CSS可以控制多重网页的样式和布局
* CSS指层叠样式表
* 样式定义了如果显示HTML元素
* 样式存放与样式表中
* 把样式添加到HTML中，是味蕾解决内容和表现分离问题
* 外部样式可以极大提高工作样式，提高维护效率
* 多个样式定义可以层叠唯一（相当于JAVA中的继承）
div是一个容器，可以存放各种组件，存放的组件随着div移动移动，div+css可以用作灵活布局,控制显示位置和大小效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DIV标签</title>
</head>
<body>
<!--div是一个容器，可以存放各种组件，存放的组件随着div移动移动-->
<div>
this is a div
</div>
<div>
this is a div
</div>
</body>
</html>
CSS基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
selector {declaration1; declaration2; ... declarationN }
语法
选择器{
属性名：属性值；
}
引用的三种方法：1.行内引用，在标签内写属性 2.内部样式，在head中书写样式 3.外部样式，需新建CSS外部样式表
* 内部样式引用优先级：id选择器>class类选择器>标签选择器
* 外部样式引用优先级：行内样式>外部样式 行内样式>内部样式 内部样式和外部样式以就近原则，谁离标签近，谁优先级高 (就近原则生效要在标签完成一样的情况下).!important可以提高优先级，为最高优先级
* 类选择器样式可以叠加多个引用，用空格隔开 class="样式1 样式二"
* id在网页中要保持一致
注意：id和class命名都不能以数字开头，也不能是纯数字
行内样式：属性在标签属性类
<!--行内样式-->
<div style="color: blueviolet">
<p> this is p1</p>
<p>this is p2</p>
this is a div
this is a div
</div >
内部样式 书写在head中
<!--行内样式-->
<div style="color: blueviolet">
<p> this is p1</p>
<p>this is p2</p>
this is a div
this is a div
</div >
内部样式 书写在head中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DIV标签</title>
<style type="text/css ">
/*选择器：1.标签选择器 2.id选择器（ID不能为纯数字，也不能以数字开头） 3.clsss(类)选择器
优先级 id选择器>l类选择器>标签选择器
*/
p{
/*标签选择器 标签名{}，定义所有p标签字体样式为黄色*/
color:greenyellow;
}
#div1{
/*id选择器 #id名{}，只能用于一个id的样式*/
color: red;
}
.fanwei{
/*类选择器 .类名{}，能用于相同类名的标签*/
color:green;
}
</style>
</head>
<body>
<!--语法
选择器{
属性名：属性值；
}
引用的三种方法：1.行内引用，在标签内写属性 内部样式，在head中书写样式 3.外部样式，需新建CSS外部样式表
-->
<!--div是一个容器，可以存放各种组件，存放的组件随着div移动移动-->
<div id="div1">
<p> this is p1</p>
<p>this is p2</p>
this is a div
this is a div
</div >
<div >
this is a div
</div>
<span class="fanwei"> 范围标签</span>
</body>
</html>
外部样式，需另外建立一个stylesheet,需遵循HTML内部样式语法规范
/*外部连接同样遵循HTML语法*/ a{ color: brown; }
外部样式引用 需要使用link
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!--引入外部样式表-->
<link rel="stylesheet" href="mycss.css">
<style type="text/css">
a{
color: aqua;
}
</style>
</head>
<body>
<p>this is p</p>
<!--行内样式>外部样式 行内样式>内部样式 内部样式和外部样式以就近原则，谁离标签近，谁优先级高 !important可以提高优先级，为最高优先级-->
<a href="#" style="color: red">这是一个超链接</a>
</body>
</html>
CSS 派生选择器
* 派生选择器允许你根据文档的上下文关系来确定某个标签的样式
* * 号表示所有的样式
* CSS 派生选择器,a和p标签共用同一种格式，父级标签定义了格式，其子元素会显示父级标签样式，但是当子标签自身定义样式，会就近原则显示子标签样式
* 逗号表示a和p两个标签的样式，同级关系
* 空格表示div内的strong标签的样式，上下级关系，下一级，下下级，只要在区域内都可以
* >符号只表示下一级标签效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*CSS 派生选择器,a和p标签共用同一种格式，父级标签定义了格式，其子元素会显示父级标签样式，
但是当子标签自身定义样式，会就近原则显示子标签样式*/
a,p{
/*逗号表示a和p两个标签的样式，同级关系*/
color: red;
}
div strong{
/*空格表示div内的strong标签的样式，上下级关系，下一级，下下级，只要在区域内都可以*/
color: green;
}
div > strong{
/* >符号只表示下一级标签效果*/
}
</style>
</head>
<body>
<a href="#"/>aaaaaaaaaaaaaa</a>
<p>bbbbbbbbbb</p>
<div>
<strong>加粗文字</strong>
<p>段落</p>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*{
/* * 号表示所有的格式应用*/
color: darkmagenta;
}
</style>
</head>
<body>
<div>
div1
</div>
<a>a1</a>
<p>p1</p>
</body>
</html>
CSS相邻兄弟选择器和属性选择器
* 兄弟选择器，表示和p1相邻的p2的标签才会有效果
* 属性选择器，具有某种属性的标签样式生效
* 属性选择器和类选择器同级
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*兄弟选择器，表示和p1相邻的p2的标签才会有效果*/
.p1+.p2{
color: red;
}
/*属性选择器，具有某种属性的标签样式生效*/
[class]{
color: darkmagenta;
}
</style>
</head>
<body>
<p class="p1">AAAAAA</p>
<p class="p2">AAAAAAAA</p>
</body>
</html>
优先级总结
* ！important优先级最高>行内样式>id选择器>class和属性选择器>标签选择器>*
* (内部样式>外部样式)（内部样式&&外部样式就近原则 ）
* 范围越大的优先级越低
CSS样式属性
css背景
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{
/*可以通过heingt widh控制高度和宽度*/
width: 335px;
height: 335px;
/*背景颜色，可以用单词，rgb值，HEX16进制值*/
background-color: red;
/*图片连接地址*/
background-image: url("../images/index.jpg");
/*repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺*/
background-repeat: repeat-y;
/*声明图像相对于可视区是固定的（fixed)*/
background-attachment:fixed;
/*背景偏移技术进行图片截取 ,通过控制偏移量可以使用 px 第一个左右，第二个上下，关键字：top、bottom、left、right 和 center*/
background-position:-335px -335px;
/*可以把属性写在一起，用空格隔开 默认为先设置颜色，再设置背景图，再设置表现方法，在设置位置*/
background: red url("../images/1.jpg") no-repeat fixed center ;
}
</style>
</head>
<body>
<div>div1</div>
</body>
</html>
CSS文本
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>边框练习</title>
<style>
.dotted{
/*点点边框*/
border: dotted;
}
.dashed{
/*虚线*/
border: dashed;
}
.solid{
/*实线*/
border: solid;
}
.double{
/*双实线*/
border: double;
}
.groove{
/*下陷边框*/
border: groove;
}
.ridge{
/*突出边框*/
border: ridge;
}
.inset{
/*嵌入边框*/
border: inset;
}
.outset{
/*凸起边框*/
border: outset;
}
.color{
border: solid;
/*设置边框颜色，一个参数表示全部颜色，两个参数第一为上下，第二个为左右 三个参数第三个表示下，四个参数，第一表示上，第二个表示右，第三个表示下，第四个表示左 顺时针*/
border-color: red saddlebrown seagreen royalblue;
}
.width{
border: solid;
/*border-bottom-width: 30px; top表示删边框，botton表示下边框，left表示左边框，right表示右边框 直接写width表示四周*/
border-width: 50px;
}
.allWidth{
border: inset;
/*上边框，右边框，下边看，左边框顺时针*/
border-width: 50px 40px 30px 20px;
}
.long{
/*可以使用一条语句进行多个声明 同时也可以用botton top left right对单边样式进行声明，用空格隔开 可以设置宽度，颜色，边框类型*/
border-top: 50px wheat inset;
}
.all{
/*可以用一条语句对边框所有属性进行声明，四周均变化*/
border: dashed 50px wheat;
}
</style>
</head>
<body>
<p class="dotted">点点边框</p>
<p class="dashed">虚线</p>
<p class="solid">实线</p>
<p class="double">双实线</p>
<p class="groove">下陷边框</p>
<p class="ridge">突出边框</p>
<p class="inset">嵌入边框</p>
<p class="outset">凸起边框</p>
<p class="color">边框演示</p>
<p class="width">边框宽度</p>
<p class="long">一条语句多个声明</p>
<p class="all">一条语句声明所有属性</p>
<p class="allWidth">宽度声明</p>
</body>
</html>
实现圆角边框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 400px;
height: 300px;
/*border-width: 10px 30px 40px 50px;*/
/*background-color: burlywood;*/
/*border-style: solid;*/
/*border-color: aqua;*/
border-width: 2px;
border-color: blueviolet;
border-style: solid;
/*实现圆角*/
border-radius: 20px;
/*实现div内容滚动条*/
overflow: auto;
}
</style>
</head>
<body>
<div>this is div</div>
</body>
</html>
CSS列表样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>列表样式</title>
<style type="text/css">
.ulStyle{
/*设置项目符号 none为空*/
list-style-type: none;
/*图片设置列表图标*/
list-style-image: url("../images/1.jpg");
/*设置列表位置，out靠边，in靠外侧 inherit是随父级样式*/
list-style-position:inside ;
/*也可以一句话同时设置三个属性，需注意图片优先级高于符号，如果设置图片，会覆盖显示图片*/
}
.ul2Style{
/*有序列表与无序列表设置相同，不过注意属性书写方法*/
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ul class="ulStyle">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
<ol class="ul2Style">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
</body>
</html>
float浮动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>浮动</title>
<style type="text/css">
.div1,.div2{
width: 200px;
height: 200px;
}
.div1{
background-color: red;
/*靠左漂浮*/
float: right;
}
.div2{
background-color: green;
/*靠左漂浮，会和上一个漂浮并排漂浮*/
float: right;
}
.div3{
float: left;
}
/*可以用clear关键字清除浮动到来的印象，leift right both*/
p{
clear: left;
}
.lifloat{
float: left;
}
.display{
/*显示属性，none会隐藏，inline=block会把块级元素转为行级元素 block可以直接把行级变块级*/
display: inline-block;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"><img src="../images/11.gif" alt=""></div>
<p>文字环绕图片</p>
<ul type="none">
<li class="lifloat"><a href="#"><img src="../images/1.jpg" alt=""></a></li>
<li class="lifloat"><a href="#"><img src="../images/2.jpg" alt=""></a></li>
<li class="lifloat"><a href="#"><img src="../images/3.jpg" alt=""></a></li>
</ul>
<div class="display">div1</div>
<div class="display">div2</div>
<div class="display">div3</div>
</body>
</html>
CSS定位
* static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
* relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
* absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
* fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
零零点位置
* relative ：相对定位,需先确认原始坐标,相对自己左上角偏移零零点
* absolute ：绝对定位,以父级的位置左上角为零零点定位,如果父级没有定位，会再找上一级，直到被定位的父级，只要有定位关键字就可以了，不管是相对还是绝对，除了static
* fixed ：固定定位，定位在网页的绝对位置，以游览器左上角为零零点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>postionStyle</title>
<style type="text/css">
.postionStyle{
height: 300px;
width: 400px;
background-color: aqua;
/*相对定位,需先确认原始坐标,相对自己左上角偏移零零点 relative*/
position:relative;
left: 100px;
top: 100px;
}
.postionAbusolute{
height: 300px;
width: 400px;
background-color: grey;
/*绝对定位,以父级的位置左上角为零零点定位,如果父级没有定位，会再找上一级，直到被定位的父级，只要有定位关键字就可以了，不管是相对还是绝对，除了static*/
position: absolute;
top: 100px;
left: 100px;
}
.postionChild{
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
bottom: 100px;
right: 100px;
}
</style>
</head>
<body>
<div class="postionStyle"></div><br><br><br><br><br><br>
<div style="width: 500px ;height: 500px;background-color: greenyellow;position: relative;left: 100px ;top: 100px">
<div style="width: 200px;height: 100px;background-color: red;position: relative;left: 100px;top: 100px"></div>
</div><br><br><br><br><br><br><br><br><br>
<div class="postionAbusolute">
<div class="postionChild">
</div>
<!--固定定位，定位在网页的绝对位置，以游览器左上角为零零点-->
<div style="width: 200px;height: 200px; position: fixed; background-color: darkolivegreen">
</div>
</div>
</body>
</html>
层叠顺序
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
注释：Z-index 仅能在定位元素上奏效，除开static,如果定位为默认的，就不会生效
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 300px;
width: 300px;
}
.div1{
background-color: red;
position: relative;
top: 100px;
left: 100px;
/*z-index控制显示层次，负数远离用户，正数靠近用户*/
z-index: -1;
}
.div2{
background-color: grey;
position: relative;
z-index: 2;
}
.div3{
background-color: greenyellow;
position: relative;
top: -220px;
left: 100px;
z-index: 3;
}
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
分类：如何改变光标
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>改变指针图标</title>
<style type="text/css">
a{
/*改变光标样式，关键字控制*/
cursor:crosshair;
}
</style>
</head>
<body>
<a class="">超链接</a>
</body>
</html>
字体显示
fount-style最常用于规定斜体文本。
该属性有三个值：
* normal - 文本正常显示
* italic - 文本斜体显示
* oblique - 文本倾斜显示
fount-size设置字体大小
fount-weigth设置字体粗细
overflow溢出剪切
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.test{
width: 300px;
height: 300px;
/*溢出剪切，超出部分剪切不显示*/
overflow:hidden;
}
</style>
</head>
<body>
<div class="test"><img src="../images/index.jpg" alt=""></div>
</body>
</html>
设置图片透明度
值越小越透明，最大值为1就为不透明
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
伪类
* 伪类样式只小于id选择器，大于类选择器，大于标签选择器
* li:hover 表示li标签下的鼠标悬停状态
* 所有的标签都有伪类，只有超链接才有active
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>伪类</title>
<style type="text/css">
ul li{
list-style-type: none;
float: left;
width: 200px;
}
/*伪类格式冒号：link表示初始化样式*/
a:link{
/*去掉下划线*/
text-decoration: none;
/*修改字体样式*/
color: grey;
}
/*鼠标划过的时候*/
a:hover{
/*鼠标划过时变大*/
font-size: 50px;
color: red;
}
/*访问过后颜色*/
a:visited{
color: red;
}
/*点击不放的时候*/
a:active{
color: blueviolet;
font-size: 80px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
CSS 框模型概述
* CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
* 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
* 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* 注释：背景应用于由内容和内边距、边框组成的区域。
* 上下拼接时文字间距可以用内边距产生间距，div框起开
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
img{
width: 200px;
height: 200px;
}
div{
float: left;
/*添加外边距，盒子和盒子之间的距离，两个值表示上下，左右*/
margin: 30px;
/*设置边框*/
border: 10px red solid;
/*类边距,内容到外边框的距离*/
padding: 20px;
}
.div1{
/*设置类元素边框，会优先使用此参数*/
margin: 50px;
}
</style>
</head>
<body>
<div class="div1">
<dl>
<dt><img src="../images/9.jpg" alt=""></dt>
<dd>价格<span style="color: red">99</span> </dd>
</dl>
</div>
<div>
<dl>
<dt><img src="../images/9.jpg" alt=""></dt>
<dd>价格<span style="color: red">99</span> </dd>
</dl>
</div>
<div>
<dl>
<dt><img src="../images/9.jpg" alt=""></dt>
<dd>价格<span style="color: red">99</span> </dd>
</dl>
</div>
</body>
</html>
网友评论