一 css的四种引入方式
1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<body> <p style="background-color: green;color: red">行内是</p> </body>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head> <style type="text/css"> p{background-color: greenyellow; color: red;} </style> </head> <body> <p>嵌入是</p> </body>
3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
ss.css 模块名 .ld{ background-color: red; color: yellow; } ---------------------------------- <style type="text/css"> @import "ss.css"; </style> <body> <ld>导入时</ld> </body>
4.链接式
也是将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
a{
background-color: yellow;
color: red;
}
-----------------------
<head> <link href="cs.css" rel="stylesheet"> </head> <body> <a>连接时</a> </body>
注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。 这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不 会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
二 css的选择器（Selector）
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1 基础选择器：
＊ ： 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
<head> *{ background-color: green; } </head>
E ： 标签选择器，匹配所有使用E标签的元素p { color:green; }
<head> div{ height:300px; background-color:beige; float: left;70%; } </head> <body> <div>标签选择器</div> </body>
.info 和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
<head> .cc{ background-color: aqua; } </head> <body> <div class="cc">class选择器</div> </body
#info 和E#info id选择器， 匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
#ss{ background-color: greenyellow; } <div id="ss">id选择器</div>
2 组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }
E > F 子元素选择器，匹配所有E元素的子元素F div > strong { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }
<head> <meta charset="UTF-8"> <title>哈哈</title> <style> .a p{font-size: 30px; color: aqua} .a>p{font-size: 30px; color: rebeccapurple} .c + p{ background-color: blanchedalmond; color: chocolate; } </style> </head> <body> <div class="a"> <p>儿子</p> <div class="a1">儿子 <p>孙子</p> <p>sadsadsa</p> </div> <div class="c" >兄弟1</div> <p>兄弟2</p> </div> </body>
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）
<head> <style> [kkkk]{ color:#ff0033; } .qq>div{ color: #ffff33; } </style> <body> <div class="qq"> 111111111 <p class="dd">222222222 <div>333333333</div> </p> </div> ------------------------------- <div kkkk="ccc">4444 <p>55555</p> </div> <p kkkk="ddd">dddd <p>ppppppp</p></p> </body>
3 属性选择器
E[att] 匹配所有具有att属性的E元素，不考虑它的值。
（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
[shuxing]{ font-size: 40px; color: greenyellow; } <div shuxing="属性名">属性名字</div>
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
[shuxing='boy']{ font-size: 40px; color: firebrick; } <div shuxing="boy">属性名字</div>
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }
[shuxing~='ccc'] { font-size: 40px; color: red; } <div shuxing="ccc">属性值</div>
E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }
[shuxing|='aa'] { font-size: 40px; color: black;} <p shuxing="aa"> saaaaaaaaaa</p> p[shuxing|="en"]{ color: #ffff33; } <p shuxing="en-us">匹配一下</p>
E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
[shuxing^='te']{ background-color: chocolate; } [shuxing$='ss']{ background-color: firebrick; /*font-size: 60px;*/ } [shuxing*='w']{ background-color: aqua; } <div shuxing="ccddd">指定开头</div> <div shuxing="aaaass">指定结尾</div> <div shuxing="qwe">包含指定元素</div>
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}
p{ background-color: #ffff33; color: #000fff; } p:before{ content:"开始"; color: #ff0033; } p:after{ content:"结束"; color:#ffffff; } <p>开心</p> <p>哈哈</p>
4 伪类选择器：
伪类选择器： 专用于控制链接的显示效果，伪类选择器：
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #F00} /* 未访问的链接 */
a:visited {color: #FF0} /* 已访问的链接 */
a:hover {color: #F03} /* 鼠标移动到链接上 */
a:active {color: #000FFF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a:link {color: #f00} a:visited{ color: #ffff33 } a:hover{color: #ff0033} a:active{ color: #000fff;} </style> </head> <body> <a href="s1.html">hello-world</a> </body> </html>
三 CSS的常用属性
1 颜色属性：
<div style="color: red">hello-world</div> <div style="color: #ffff33">hello-word</div> <div style="color:rgb(255,0,255)">hello-world</div> <div style="color:rgba(255,0,0,0.5)">hwllo-word</div>
2 字体属性：
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">老男孩</h1>
<h1 style="font-size: 20px">字体</h1> <h2 style="font-size: larger">字体</h2> <h3 style="font-size: 50%">字体</h3> <h4 style="font-family:'华文宋体'">字体</h4> <h5 style="font-weight:lighter">字体</h5> <h6 style="font-weight: bold">字体</h6>
3 背景属性：
">background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
<div style=" 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
注意：如果讲背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个
width＝100px，你也看不出效果，除非你设置出html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{background-color: antiquewhite} body{ width:200px; height:500px; background-color: deeppink; background-image: url(cnyrjhod.bmp); background-repeat:no-repeat; background-position:center right ; } </style> </head> <body> <div>ssss</div> </body>
4 文本属性：
font-size: 10px; 字体大小
text-align: center;横向排列
line-height: 200px;文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
p{ 200px; height:200px; text-align:center; background-color: transparent; line-height: 200px; } <p style="font-size: 10px"> 字体大小</p> <p style="text-align: center">对齐方式 居中</p> <p style="line-height: 200px"> 字体百分比</p> <p style="line-height: inherit">哈哈哈</p> <p style="text-indent: 155px">文本缩进</p> <p style="letter-spacing:20px">字间距</p> <p style="word-spacing: 20px">调整间距</p> <p style="direction: rtl">sss</p> <p style="text-transform: capitalize;">文本大小写</p>
5 边框属性：
<head> <style> div{ background: rebeccapurple; 背景颜色 height: 400px; 高度 width: 400px; 宽度 /*border: solid 3px red;*/ 实线 border: dashed red 4px; 边界 虚线 } </style> </head> <body> <div>ssss</div> </body>
6 列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; list-style: circle;
list-style: upper-alpha;
list-style: disc; }
ul{ /*list-style: none; 无样式*/ /*list-style: decimal-leading-zero;*/ 数字 /*list-style: circle; 空心圆*/ /*list-style:upper-alpha; 英文字母*/ list-style: disc; 实心圆 } <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul>
7 dispaly属性
- none
- block
- inline
p{ background-color: #ff0033; display: inline; 显示内联 } span{ background-color: red; display: block; 显示一块 /*display: none;*/显示无样式 /*隐藏*/ 200px; 块的宽度 height:200px; 高度 } <p>块级变内联</p> <span>内联变块级</span>
8 盒子模型
padding:用于控制内容与边框之间的距离；
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
内边距会影响盒子的大小，外边距不会影响盒子的大小,需要设置
练习： 300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒 子 移到大盒子的中间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .kai{ width: 300px; height: 300px; background-color: #ff0033; border: 10px solid transparent; 边界透明度 } .inner{ width: 100px; height:100px; background-color: #ffff33; margin-top: 100px; margin-left: 100px; } </style> </head> <body> <div class="kai"> <div class="inner"></div> </body> </html> </div>
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情 况下，
body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点， 加上
body{ /*padding: 0px;*/ margin: 0px; 边缘 border: solid red 3px; 边界固体红 } <body> ssssssssssssssssss </body>
注意2：margin collapse（边界塌陷或者说边界重叠）
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场
1兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2父子div
if 父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin ；
解决方法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden;
.kai{ 300px; height: 300px; background-color: #ff0033; /* overflow-x:hidden */ padding:10px /* border: 10px solid transparent; 边界透明度 */ } .inner{ 100px; height:100px; background-color: #ffff33; margin-top: 100px; margin-left: 100px; } <div class="kai"> <div class="inner"></div> </div>
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ 光标值 /*cursor: pointer;*/ 指针 /*cursor: help;*/ /*cursor:wait;*/ /*cursor: move;*/ /*cursor: crosshair;*/ } body{ /*padding: 0px;*/ margin: 0px; 边缘 border: solid red 3px; 边界固体红 } .kai{ width: 300px; height: 300px; background-color: #ff0033; border: 20px solid transparent; 边界透明度 /*padding: 100px; !*扩充大小!**/ /*padding-top: 100px;*/ 上填充 /*padding-left: 100px ;*/ 左填充 } .inner{ width: 100px; height:100px; background-color: #ffff33; /*margin-top: 100px;*/ 上边距 /*margin-left: 100px;*/ 左边距 margin: 30px; 边缘 } </style> </head> <body> <a>ssssssss</a> <div class="kai"> <div class="inner"></div> <div class="inner"></div> </div> daaaaaaaaaaaaaaaaaaaaaaaaaaa </body> </html>
9 float
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float：
inherit：继承
none : 默认值。允许两边都可以有浮动对象
left : 左边有浮动对象
right : 右边有浮动对象
both : 两边有浮动对象
clear，官方定义如下：
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; float: left; background-color: chartreuse; } .div2{ background-color: red; float: left; width: 200px; height: 100px; clear: left; } .div3{ background-color: #000fff; float: left; width: 100px; height: 100px; } .div4{ background-color: #ff0033; width: 200px; float: left; } .div5{ width: 100px; height:100px; background-color: aqua; float: left; /*clear: both;*/ } .div6{ width: 100px; background-color: black; float: left; } </style> </head> <body> <div class="div1">div1</div> <div class="div4">div4</div> <div class="div6">s</div> <div class="div2">div2</div> <div class="div3">div4</div> <div class="div5">ssss</div> </body> </html>
效果图如下：
10 position
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
1 static，默认值 static：无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不 会被应用。 说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序， 也就是我们通常看到的由左 到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显 示。 默认值就 是让元素继续按照文档流显示，不作出任何改变。
2 position:relative
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative，就可以使用 top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置，只是视觉上相对于它在文档中的原有位置移动了] 当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素， 一直找到html为止。
3 position:fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。 而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流， 另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .q{ position:relative; background-color: #ff00ff; height: 400px; width:500px; } .w{ position: absolute; bottom: 30px; right: 30px } .e{ height: 200px; position: fixed; background-color: #ffff33 } .r{ position: static; background-color: #000fff; width: 100px; height: 100px; } </style> </head> <body> <div class="q"> <div class="w">固定</div> </div> <div class="e">sssss</div> <div class="r">sadfgffdd</div> </body> </html>