JAVAEE笔记——前端基础之CSS
目录
CSS
什么是CSS
-
CSS 指层叠样式表 (Cascading Style Sheets)
-
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹页。
-
样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题
-
外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率
-
多个样式定义可层叠为⼀，后者可以覆盖前者样式（前后者是指CSS仰视导入的次序）
样式层叠次序
-
当同⼀个 HTML 元素定义了多个样式时，应该使⽤哪个样式？
-
⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的优先权。
-
浏览器缺省设置
-
外部样式表
-
内部样式表（位于 <head> 标签内部）
-
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最⾼的优先权，这意味着它将优先于以下的样式声明： <head> åå标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省
值）。
我们可以在CSS的文件里设置权重来改变样式的优先级。
CSS语法
格式： 选择器{属性:值;属性:值;属性:值;....}
例子：
p{
color:red;
text-align:center; }
CSS中的注释
格式： /* ... */
CSS使用方式
如何插⼊样式表
-
CSS是负责美化⽹⻚的，在HTML中如何使⽤css样式(HTML中引⼊CSS的⽅式):
-
插⼊样式表的⽅法有三种:
-
外部样式表(External style sheet)，作用于作⽤于整个⽹站
-
内部样式表(Internal style sheet)，作用于当前页面
-
内联样式(Inline style)，作用于某段文字区域
-
-
优先级：当样式冲突时，就是采⽤就近原则，是值css属性离被修饰的内容最近的为主。
-
若没有样式冲突则采⽤叠加效果。
CSS样式使用例程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="my.css"> <!--导入外部样式表-->
<style>
li{color: green;font-size: 20px;line-height:30px} /*内部样式表*/
</style>
</head>
<body>
<h1>CSS样式的使用方式</h1>
<h4>插入样式表的方法有三种：</h4>
<ul>
<li>外部样式表</li>
<li style="color: lightpink">内部样式表</li> <!--内联样式-->
<li>内联样式表</li>
</ul>
</body>
</html>
CSS中常⽤选择器
css2的选择器(重要)
类选择器和id选择器的区别
-
id选择器比类选择器的级别要高，如果两者发生冲突时，优先选择id选择器的属性。
-
id标签中的id属性值是唯一的，用于修饰网页中唯一拥有的部分。类选择器中的属性值可以相同的。
-
选择符的优先级：从⼤到⼩ [ID选择符]->[class选择符]->[html选择符]->[html属性]。
6种选择器的使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1.html选择器*/
h3{color: red;}
/*2.类选择器*/
.cc{color: green} /*.cc：将网页中class属性为cc的标签采用此样式*/
.dd{background-color: #ddd;}
h1.cc{color: green}/*class属性值为cc的h1标题标签采用此样式*/
/*3. id选择器 */
#hid{font-size: 40px;} /*id属性值为hid的标签采用此样式*/
/*测试选择器的优先级*/
#cid{color: greenyellow}
.sc{color: green;background-color:#ddd;}
span{color: red !important;font-size: 18px }
/* 4.关联选择器(包含选择器)*/
ol li{color: lightseagreen} /*ol标签下的li标签采用此样式*/
/* 5.选择器组*/
h1,h2,h3,h4,h5,h6{background-color: linen;font-family: Arial,Helvetica,sans-serif;}
/*6.伪类选择器*/
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* **链接 */
</style>
</head>
<body>
<h1 class="cc">CSS常用选择器(选择符)</h1>
<h3 id="hid">什么是CSS</h3>
<ul>
<li>样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹页.</li>
<li class="cc dd"> 样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li> <!--用空格把属性相同的两个不同值隔开-->
<li>外部样式表(CSS文件)可以极大提高工作效率</li>
<li class="dd">多个样式定义可层叠为一，后者可以覆盖前者样式（前后者是指CSS仰视导入的次序）</li>
</ul>
<span class="sc" id="cid">CSS的常用选择器</span>
<h4>插入样式表的方法有三种：</h4>
<ol>
<li>外部样式表</li>
<li >内部样式表</li> <!--内联样式-->
<li>内联样式表</li>
</ol>
<ul>
<li><a href="cssGammar.html" id="1111">CSS语法实例</a></li>
<li><a href="CSS_USE.html.html">CSS样式使用方式</a></li>
</ul>
</body>
</html>
CSS3中的选择器（熟悉）
-
关系选择器
div>p 选择所有作为div元素的⼦元素p div+p 选择紧贴在div元素之后p元素 div~p 选择div元素后⾯的所有兄弟元素p
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择符实例</title>
<style>
/*ul中的所有子li标签都采用此样式*/
ul li{color: red;}
/*ul中的直接子li标签采用此样式（注意ol中的li不是）*/
ul>li{color: blue;}
/*紧邻div的一个p兄弟标签采用此样式*/
div+p{color: red}
/*div后面所有兄弟p标签都采用此样式*/
div~p{color: green}
</style>
</head>
<body>
<h1>关系选择器</h1>
<ul>
<li>列表一级子项目1</li>
<li>列表一级子项目2</li>
<ol>
<li>列表二级子项目1</li>
<li>列表二级子项目2</li>
</ol>
</ul>
<div>aaaaa</div>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
<div>bbbbb</div>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
<p>qqqqqqqqqq</p>
</body>
</html>
-
属性选择器
[attribute]选择具有attribute属性的元素。 [attribute=value]选择具有attribute属性且属性值等于value的元素。 [attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表，其中⼀个等于value的元素。 [attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。 [attibute^=value]匹配具有attribute属性、且值以valule开头的E元素 [attribute$=value]匹配具有attribute属性、且值以value结尾的E元素 [attribute*=value]匹配具有attribute属性、且值中含有value的E元素
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的属性选择器</title>
<style>
/* 含有title属性的li标签采用此样式*/
/*li[title]{color: red;}*/
/* 含有title属性值为bb的li标签采用此样式*/
/* li[title="id"]{color: red;}*/
/*含有class属性值（以空格分隔开）中有aa的li标签采用此样式*/
/*li[class~="aa"]{color: red;}*/
/*含有class属性值（以-分隔开）中有aa的li标签采用此样式*/
li[class|="aa"]{color: red;}
/*class属性值是以b子串开头的li标签采用此样式*/
/*li[class^="b"]{background-color: #ddd;}*/
/*class属性值是以b子串结尾的li标签采用此样式*/
/*li[class$="b"]{background-color: #ddd;}*/
/*class属性值中含有dd的li标签采用此样式*/
li[class*="dd"]{background-color:#ddd;}
</style>
</head>
<body>
<h1>CSS中的属性选择器</h1>
<ul>
<li class="aa-bb" title="html">1.html选择器</li>
<li class="bb-cc" >2.class类选择器</li>
<li class="cc-dd" title="id">3.id选择器</li>
<li class="bb-dd">4.关联选择器</li>
<li class="aa bb">5.组合选择器</li>
<li class="bb aa">6.伪类选择器</li>
</ul>
</body>
</html>
CSS伪类选择器
-
结构性伪类选择器：
::first-letter设置对象内的第⼀个字符的样式。 ::first-line设置对象内的第⼀⾏的样式。 :before设置在对象前（依据对象树的逻辑结构）发⽣的内容。 :after设置在对象后（依据对象树的逻辑结构）发⽣的内容。 :lang(language)匹配使⽤特殊语⾔的E元素。 :element1~element2: :first-of-type匹配同类型中的第⼀个同级兄弟元素 :last-of-type匹配同类型中的最后⼀个同级兄弟元素 :only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素 :only-child匹配⽗元素仅有的⼀个⼦元素 *:nth-child(n)匹配⽗元素的第n个⼦元素 :nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素 *:first-child 匹配⽗元素的第⼀个⼦元素 \* :last-child 匹配⽗元素的最后⼀个⼦元素 :root匹配元素在⽂档的根元素。在HTML中，根元素永远是HTML :empty匹配没有任何⼦元素（包括text节点）的元素
-
状态伪类选择器
:link 设置超链接a在未被访问前的样式。 :visited 设置超链接a在其链接地址已被访问过时的样式 :active 设置元素在被⽤户**（在⿏标点击与释放之间发⽣的事件）时的样式 *:hover 设置元素在其⿏标悬停时的样式 *:focus 设置元素在其获取焦点时的样式* :target 匹配相关URL指向的E元素 :enabled 匹配⽤户界⾯上处于可⽤状态的元素 :disabled 匹配⽤户界⾯上处于禁⽤状态的元素 :checked 匹配⽤户界⾯上处于选中状态的元素 :not(selector)匹配不含有selector选择符的元素 ::selection 设置对象被选择时的样式
-
其他伪类选择器
E:not(s) ： {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.cc:first-letter{color: blue;font-size: 30px} /*first-letter设置对象内的第⼀个字符的样式。*/
p.cc:first-line{color: red;} /* first-line设置对象内的第⼀⾏的样式。 */
h1:before{content:"湖人总冠军";color: red} /* 设置在对象前（依据对象树的逻辑结构）发⽣的内容。 */
h1:after{content: "选择器";color: #FF00FF;} /* 设置在对象后（依据对象树的逻辑结构）发⽣的内容。 */
ul li:first-child{color: red;} /* 匹配⽗元素的第⼀个⼦元素 */
ul li:last-child{color:red;} /* 匹配⽗元素的最后⼀个⼦元素 */
ul p:first-of-type{color: blue;} /* 匹配⽗元素的最后⼀个⼦元素 */
ul li:nth-child(4){background-color: #ddd;} /* 匹配⽗元素的第n个⼦元素 */
p:not(.cc){background-color: powderblue;} /* 非.cc类型的p采用此样式*/
h1:hover{color:red;font-size: 30px;}
</style>
</head>
<body>
<h1>CSS选择器：伪类/伪元素</h1>
<p class="cc">虎扑9月5日讯 火箭今天112-97击败湖人，西部季后赛第二轮大比分1-0领先对手，赛后ESPN Stats & Info统计了火箭球员PJ-塔克对湖人前锋安东尼-戴维斯的防守数据。
据统计，塔克在比赛的半场阵地战中一共防守戴维斯26个回合，只让后者出手1次，戴维斯没有得分并出现了2次失误。
“我们能做的事情，那就是战斗，我们都是战士。”塔克在赛后如此说道。
数据统计 展示出，当半场阵地战遇到塔克的防守时，戴维斯平均每100回合仅出手10.2次，并出现9.1次失误。本赛季在防守戴维斯至少30个回合的球员中，没有人能迫使他出现更高的失误率或更少的出手尝试。
今天全场比赛，塔克首发出战36分钟，7投2中得到6分9篮板1助攻2抢断；而安东尼-戴维斯代表湖人首发登场37分钟，16投10中得到25分14篮板1助攻3抢断。
火箭与湖人的第二场比赛将在北京时间9月7日早8:30进行。
</p>
<ul class="demo">
<li>1.aaaaaaa</li>
<li>2.aaaaaaa</li>
<p>bbbbbbbb</p>
<li>3.aaaaaaa</li>
<li>4.aaaaaaa</li>
<p>bbbbbbbb</p>
<li>5.aaaaaaa</li>
<li>6.aaaaaaa</li>
</ul>
</body>
</html>
CSS常用属性
CSS中的尺寸和单位
-
尺寸与单位
-
颜色
-
color颜⾊属性值
a. HSL颜⾊: 通过对⾊调(H)、饱和度(S)、亮度(L)三个颜⾊通道的变化以及它们相互之间的叠加来得到各式各样的颜⾊.
background-color: hsl(240,100%,50%);color:white；
b. HSLA颜⾊: ⾊调(H)、饱和度(S)、亮度(L)、透明度(A)；
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜⾊: 红(R)、绿(G)、蓝(B)三个颜⾊通道的变化
background-color: rgba(200,100,0);
d. RGBA颜⾊: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图⽚透明度的设置 img.opacity{ opacity:0.25;}
兼容IE8 filter:alpha(opacity=100);
颜色使用例程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div.cc{
width: 400px;
height: 400px;
/*background-color: rgb(28,137,196);*/
/*background-color: rgb(100%,0%,0%);*/
/*background-color: #1c89c4;*/
background-color: rgba(28,137,196,0.5); /*a表示透明度，a=0时全透明，a=1时不透明*/
}
</style>
<body>
<h1>CSS常用属性:尺寸与单位</h1>
<h3>颜色单位：</h3>
<ul>
<li>颜色单词名称：如：red/blue</li>
<li>RGB 值(比如rgb(255,0,0))：[rgb(0,0,0)~rgb(255,255,255)</li>
<li>RGB 百分⽐值 (⽐如 rgb(100%,0%,0%))</li>
<li>⼗六进制数 (⽐如 #ff0000)</li>
</ul>
<div class="cc">
如果RGB三个颜色值度一样，可以写成3位的. 如颜色值：#22aacc 可以写成: #2ac
#ddd #dddddd
</div>
</body>
</html>
CSS字体与文本属性
-
字体属性
font: 简写
*font-size: 字体⼤⼩：20px，60%基于⽗对象的百分⽐取值
*font-family： 字体：宋体，Arial
font-style： normal正常；italic斜体； oblique倾斜的字体
*font-weight： 字体加粗 ：bold
font-variant: small-caps ⼩型的⼤写字⺟字体
font-stretch: [了解]⽂字的拉伸是相对于浏览器显示的字体的正常宽度（⼤部分浏览器不⽀持）。
-
文本属性
text-indent: ⾸⾏缩进：text-indent:2em;
text-overflow： ⽂本的溢出是否使⽤省略标记（...）。clip|ellipsis（显示省略标记）
*text-align: ⽂本的位置：left center right
text-transform：对象中的⽂本的⼤⼩写：capitalize(⾸字⺟)|uppercase⼤写|lowercase⼩写
*text-decoration: 字体画线：none⽆、underline下画线，line-through贯穿线
text-decoration-line：[了解]⽂本装饰线条的位置（浏览器不兼容）
*text-shadow: ⽂本的⽂字是否有阴影及模糊效果
vertical-align: ⽂本的垂直对⻬⽅式
direction：⽂字流⽅向。ltr | rtl
white-space:nowrap; /* 强制在同⼀⾏内显示所有⽂本*/
*letter-spacing: ⽂字或字⺟的间距
word-spacing：单词间距
*line-height：⾏⾼
*color： 字体颜⾊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: blue;
text-shadow: 0px 0px 10px blue;
}
h3{
color: red;
}
h3:hover{
text-shadow: 0px 0px 6px red;
}
div.c1{
width: 480px; /*定义宽度*/
font-size: 20px;
font-family: "微软雅黑",Arial, Helvetica, sans-serif; /*字体*/ /*写多个字体是为了适应某些设备缺失某些字体，多个字体可以用于备选*/
font-style: italic; /*斜体*/
font-weight: bold; /*加粗 700*/
line-height: 1.5; /*行高，默认为倍数*/
}
/*下面的font字体修饰等价于上面效果*/
div.c2{
width: 480px;
font: italic bold 20px/1.5 "微软雅黑",Arial, Helvetica, sans-serif;
}
div.dcc{
width: 480px;
font:14px/1.5 "微软雅黑",Arial;
color: #333;
text-indent: 2em; /*每段文章的首行缩进两个字*/
letter-spacing: 1px;/*字间距*/
}
img{
float:left; /*字会环绕着图片*/
margin: 10px; /*指定图片像素大小*/
}
div.c3{
width: 480px;
height: 50px;
background-color:thistle ;
text-align: center;
line-height: 50px;/*使用字体大小相同的行高会使文字上下居中*/
text-decoration: line-through; /*贯穿线，也就是删除线*/
}
span.ss{
font-size: 30px;
vertical-align: middle; /*指定文字对齐方式：上对齐*/
}
</style>
</head>
<body>
<h1>CSS常用属性——字体和文本属性</h1>
<h3>不知道大家有没有遇到过衣服</h3>
<div class="c1">
不知道大家有没有遇到过衣服或者物品被偷的情况， 被偷的东西可能价值并不是很大，
但莫名其妙的被偷走也会让人非常生气。 这不近日一名女子就遇到了这样的行为，
在几个月内已经被偷走了10多条内裤，导致她现在连换洗的衣服都没有了，于是无奈之下便报了警。
那这到底是怎么一回事？
</div>
<div class="c2">
不知道大家有没有遇到过衣服或者物品被偷的情况， 被偷的东西可能价值并不是很大，
但莫名其妙的被偷走也会让人非常生气。 这不近日一名女子就遇到了这样的行为，
在几个月内已经被偷走了10多条内裤，导致她现在连换洗的衣服都没有了，于是无奈之下便报了警。
那这到底是怎么一回事？
</div>
<div class="dcc">
<img src="./images/guang.jpg" width="180"/>
<p>
不知道大家有没有遇到过衣服或者物品被偷的情况， 被偷的东西可能价值并不是很大，
但莫名其妙的被偷走也会让人非常生气。 这不近日一名女子就遇到了这样的行为，
在几个月内已经被偷走了10多条内裤，导致她现在连换洗的衣服都没有了，于是无奈之下便报了警。
那这到底是怎么一回事？
</p>
<p>
不知道大家有没有遇到过衣服或者物品被偷的情况， 被偷的东西可能价值并不是很大，
但莫名其妙的被偷走也会让人非常生气。 这不近日一名女子就遇到了这样的行为，
在几个月内已经被偷走了10多条内裤，导致她现在连换洗的衣服都没有了，于是无奈之下便报了警。
那这到底是怎么一回事？
</p>
<p>
不知道大家有没有遇到过衣服或者物品被偷的情况， 被偷的东西可能价值并不是很大，
但莫名其妙的被偷走也会让人非常生气。 这不近日一名女子就遇到了这样的行为，
在几个月内已经被偷走了10多条内裤，导致她现在连换洗的衣服都没有了，于是无奈之下便报了警。
那这到底是怎么一回事？
</p>
</div>
<hr/>
<div class="c3">
不知道大家有没有遇到过衣服或者物品被偷的情况
</div>
<span class="ss">不知道</span>大家有没有遇到过衣服或者物品被偷的情况
</body>
</html>
CSS背景属性
background：简写
*background-color: 背景颜⾊
*background-image: 背景图⽚
*background-repeat：是否重复，如何重复?(平铺)
*background-position：定位
background-attachment： 是否固定背景，
scroll:默认值。背景图像是随对象内容滚动
fixed:背景图像固定
css3的属性:
*background-size: 背景⼤⼩，如 background-size:100px 140px;
多层背景：
background:url(test1.jpg) no-repeat scroll 10px 20px,
url(test2.jpg) no-repeat scroll 50px 60px,
url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;
CSS边框属性
border:宽度 样式 颜⾊;
border-color;
border-style; 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
...
CSS3的样式
border-radius：圆⻆处理
box-shadow: 设置或检索对象阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:300px;
height:300px;
float: left;
margin: 10px; /*间距*/
}
div.c1{
/* border-width: 4px;
border-style: solid;
border-color: red;*/
border: 4px solid red; /*指定4px厚度的红色实线边框*/
}
div.c2{
/*单独的边框设置*/
border-top: 4px dotted blue;
border-left: 4px dashed orange ;
border-bottom: 4px solid red;
border-right: 4px double green;
}
/*边框的圆角处理*/
div.c3{
border: 4px solid green;
/*border-radius: 20px; !*四个半径为20px的圆角*!*/
/*border-radius: 20px 30px;!*左上和右下圆角半径20px,右上和左下半径30圆角*!
border-radius: 20px 30px 40px; !*左上半径20px,右上和左下半径30圆角,右下角半径40圆角*!*/
border-radius: 10px 20px 30px 40px; /*左上10 右上20 右下30 左下半径40*/
}
/*边框的圆角处理 单独设置圆角信息*/
div.c4{
border:4px solid red ;
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 80px;
}
div.c5{
border:4px solid red ;
border-radius:50% ; /*50%的圆角就是画圆*/
}
div.c6{
border: 2px solid #0000FF;
border-radius: 5px;
box-shadow: 0px 0px 4px 4px rgba(0,0,255,0.5);
}
div.c7{
border: 2px solid #0000FF;
border-radius: 5px;
}
div.c7:hover{
box-shadow: 0px 0px 4px 4px rgba(0,0,255,0.5);
}
</style>
</head>
<body>
<h1>CSS属性：border边框属性</h1>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
<div class="c6"></div>
<div class="c7"></div>
<div class="c8"></div>
</body>
</html>
css内外补白属性
-
内补白
padding： 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top： 检索或设置对象顶边的内部边距
padding-right： 检索或设置对象右边的内部边距
padding-bottom：检索或设置对象下边的内部边距
padding-left： 检索或设置对象左边的内部边距
-
外补白
margin： 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top： 检索或设置对象顶边的外延边距
margin-right： 检索或设置对象右边的外延边距
margin-bottom： 检索或设置对象下边的外延边距
margin-left： 检索或设置对象左边的外延边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.dd{
width: 400px;
border: 10px solid red;
padding: 10px ; /*设定内填充距离*//*内补白：边框与文字之间的距离*/
/*指定对外间距*/ /*外补白*/
margin: 50px;
}
div.ee{
width: 300px; /*默认内容宽度，不包含边框厚度和内补白*/
height: 300px;
border: 20px solid #333;
margin: 100px auto; /*上下100px,左右居中*/
/*设置盒模型组成模式：border-box表示盒子宽度包含边框厚度和内补白*/
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>CSS的尺寸和内外补白</h1>
<div class="dd">
在娱乐圈中有很多的女演员，她们有着超高的颜值，可以说是简直就是像仙女一样。
曾经在当年可以说是风华绝代惊艳了时光，但是后来随着年龄的增长，渐渐的淡出娱乐圈却依然被人们记住。
</div>
<div class="ee">
</div>
</body>
</html>
盒子模型实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*公共样式的设置*/
h4,body,ul,li,a{padding: 0px;margin: 0px;}/*取消内外补白*/
ul{list-style: none}/*废除无序列表符号*/
a{color: #222;text-decoration: none;}
a:hover{color:#F00;text-decoration: underline;}
/*盒子模的样式*/
.box{
width: 260px;
margin: 50px;
border: 1px solid #ddfab8;
}
.box .header{
width: 100%;
height:26px ;
background-image: url("./images2/spph_bg.gif");
}
.box .header h4{
font-size: 14px;
height: 26px;
line-height: 26px;
color: green;
padding-left: 8px;
}
.box .content{
padding: 5px;
}
.box .content ul li.tag{
line-height:23px;
line-height: 23px;
padding-left:30px;
background: url("./images2/spph_ico.gif") no-repeat;
}
.box .content ul li.t1{background-position: 8px 6px;}
.box .content ul li.t2{background-position: 8px -19px;}
.box .content ul li.t3{background-position: 8px -43px;}
.box .content ul li.t4{background-position: 8px -67px;}
.box .content ul li.t5{background-position: 8px -90px;}
.box .content ul li.t6{background-position: 8px -113px;}
.box .content ul li.t7{background-position: 8px -137px;}
.box .content ul li.t8{background-position: 8px -162px;}
.box .content ul li.t9{background-position: 8px -185px;}
.box .content ul li.t10{background-position: 8px -209px;}
.box .content ul li a{
font-size: 13px;
}
</style>
<body>
<h1>盒子模式实例</h1>
<div class="box">
<div class="header">
<h4>商品排行</h4>
</div>
<div class="content">
<ul>
<li class="tag t1"><a href="#">6月周年庆促销活动正式开始啦！</a></li>
<li class="tag t2"><a href="#">享不尽的百货盛宴！快来体验吧！</a></li>
<li class="tag t3"><a href="#">红六月手机家电会员回馈专场</a> </li>
<li class="tag t4"><a href="#">收纳用品春季热销 方便实用</a> </li>
<li class="tag t5"><a href="#">时尚挂表低折扣 精细准确</a> </li>
<li class="tag t6"><a href="#">24小时限时达！超时即免单</a> </li>
<li class="tag t7"><a href="#">注意啦，24小时限时达活动细</a> </li>
<li class="tag t8"><a href="#">2010年度加点风云榜评选活动揭晓</a> </li>
<li class="tag t9"><a href="#">享不尽的百货盛宴！快来体验吧！</a> </li>
<li class="tag t10"><a href="#">上海市企业客户参加以旧换新调整 </a> </li>
</ul>
</div>
</div>
</body>
</html>
CSS定位属性
*position: 定位⽅式：absolute(绝对定位)、fixed(固定)（relative定位参考，可对内部相对
absolute定位）
*z-index: 层叠顺序，值越⼤越在上⽅。
*top: 检索或设置对象与其最近⼀个定位的⽗对象顶部相关的位置
right: 检索或设置对象与其最近⼀个定位的⽗对象右边相关的位置
bottom: 检索或设置对象与其最近⼀个定位的⽗对象下边相关的位置
*left: 检索或设置对象与其最近⼀个定位的⽗对象左边相关的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#outer{
width: 500px;
height: 1000px;
background-color: #ddd;
position: relative;/*指定内层做相对定位*/
}
#inner{
width: 100px;
height: 100px;
background-color: red;
position: absolute; /*外层指定了相对定位，就导致此处是按照外层div做定位*/
top: 100px;
right: 200px;
}
/*绝对定位*/
#mid{
position: absolute;
z-index: 1; /*值越大图层越在上方 */
top: 100px;
}
/*固定定位*/
#mm{
position: fixed;
top: 100px;
right: -80px;
transition: right 0.5s ease; /*过渡：过渡属性 过渡完成时间 过渡的动画类型*/
}
#mm:hover{
right: 20px;
}
</style>
</head>
<body>
<h3>CSS实例：定位position属性</h3>
<div id="outer">
<div id="inner"></div>
</div>
<img id="mid" src="./images2/1.gif"/>
<img id="mm" src="./images2/mistakertu.gif"/>
</body>
</html>
CSS布局
*display： 是否及如何显示：none隐藏，block块状显示...
*float: 指出了对象是否及如何浮动:值none | left | right
*clear： 清除浮动：none | left | right | both两侧
visibility：设置或检索是否显示对象。visible|hidden|collapse。
与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
如：clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow: 超出隐藏：hidden，visible：不剪切内容
overflow-x：内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y：内容超过其指定⾼度时如何管理内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.d1,div.d2,div.d3{
width: 200px;height: 200px;
margin: 5px;
float: left;
}
div.d1{
background-color: red;
}
div.d2{
background-color: green;
}
div.d3{
background-color: blue;
clear: left;
}
span{
background-color: #ddd;
width: 200px;
height: 50px;
margin: 20px;
display: inline-block; /*指定对象为内联块元素，把span标签这种行内标签设置为块状标签*/
}
/*隐藏*/
h1{display: none}
</style>
</head>
<body>
<h1>CSS的Layout布局样式</h1>
<span>aaaaaaaaaaaa</span><span>bbbbbbbbb</span><br>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div style="width:300px;height:300px;overflow: hidden;border: 1px solid red;">
<!--overflow：hidden的作用：超出div的范围的图片部分就会被隐藏-->
<img src="./images2/Meinv083.jpg">
</div>
</body>
</html>
CSS实现导航实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0px;padding:0px;}
ul{list-style: none;}
#nav{
height: 50px;
background: url("./images2/repeat.png");
}
#nav ul li{
width: 140px;
float: left;
}
#nav ul li a{
display: block;
height: 50px;
width: 100px;
line-height: 50px;
text-decoration: none;
font-size: 18px;
font-weight:bold ;
color: white;
text-align: center;
}
#nav ul li a:hover{
background-color: white;
color: blue;
}
</style>
</head>
<body>
<h1>CSS案例：导航栏的实现</h1>
<div id="nav">
<ul>
<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>
</div>
</body>
</html>