CSS(前)篇
1.1CSS重点总结
1.1.1 选择器
1.1.2 盒子模型
1.1.3 浮动
1.1.4定位
1.2CSS介绍
概念: 层叠样式表或者级联样式表(Cascading Style Sheets)
层叠:CSS的特性
CSS的作用: 设置网页结构样式(改变html),通过CSS给html标签设置属性达到改变标签样式。
CSS书写位置介绍:
内嵌式写法:
外链式写法:
行内式写法:
1.3 内嵌式写法:
内嵌:将CSS文件放到htm文件中设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*在这里面写CSS代码就是内嵌式写法*/ </style> </head> <body> </body> </html>
1.3.2外联式写法
新建一个CSS文件
使用link标签将外部的css文件引入页面
注意:一个页面可以引入多个样式表
1.3.2行内式写法
尽量不用
<!-- 行内式写法 --> <p style="color: red;font-size: 40px;font-weight=700">文字</p>
1.4CSS语法
选择器{属性: 值; 属性: 值;}
选择器: 选择标签的过程
标签选择器:
类选择器:
ID选择器:
通配符选择器:
交集选择器(标签指定式):
后代选择器:
子代选择器:
并集选择器:
补充的选择器(c3):
伪类选择器:
属性选择器:
伪元素选择器:
1.5.1常用的选择器属性
color: 前景色(文字颜色)、
background-color 背景色
font-size 设置文字大小
width设置宽度
height 设置高度
text-align:left |center |right 内容(文字图片)居中显示(注意:该属性只能给块级元素设置)
text-indent: 2em; 首行缩进两个汉字
1.5.1.1单位介绍
px 像素
em 1em=一个文字大小
1.5.1.2 颜色的表示方式
直接设置颜色的名称 red,green,pink...
使用十六进制表示 #0-f
使用三原色表示:
rgb()
r: red (0-255)
g: green (0-255)
b: blue (0-255)
使用RGB表示颜色:rgb(23,56,89);
半透明效果:rgba(r,g,b,a) a 0-1 例子:
background-color:rgba(0,0,0,.5);
使用opactiy实现半透明:(如果放在p等标签内,连文字也会变半透明)
background-color:red;
opacity: .5;
解决ie低版本不支持:
filter:Alpha(opacity=50); /*IE8以及更早的浏览器*/
1.5.2标签选择器
html 标签名 {属性: 值;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*标签选择器*/ p{ color: red; /*改变文字颜色*/ font-size: 50px; /*改变文字大小*/ background-color: pink; /*改变背景颜色*/ width: 300px; /*设置宽度*/ height: 300px; /*设置高度*/ } div{ color: blue; font-size: 30px; } </style> </head> <body> <p>段落文字</p> <div><p>div中的文字</p></div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </body> </html>
1.5.3类选择器
.自定义类名{ 属性: 值;}
类选择器的特点: 一个类样式可以被多个标签同时调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*类选择器 通过.自定义类名,定义一个类样式*/ .p_red{ color: red; } </style> </head> <body> <p class="p_red">段落文字1</p> /*标签通过class属性调用类样式*/ <p>段落文字2</p> <div>div1</div> <div>div2</div> </body> </html>
一个标签可以同时调用多个类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*类选择器*/ .p_red{ color: red; } .p_green{ color: green; } .publc{ font-size: 30px: } </style> </head> <body> <!-- public选择器式公共的选择器 --> <p class="p_red publc">段落文字1</p> <div class="p_green publc">div1</div> </body> </html>
类选择器的命名规范
合法类名:
a.不能用纯数字或者数字开头定义类名
b.不推荐使用汉字定义类名
c.不能使用特殊字符或者使用特殊字符开头定义类名
d.不推荐使用标签名定义类名
1.5.4 Id选择器(实际开发不建议使用)
语法: #自定名称{属性: 值;}
使用: 首先通过#定义一个id选择器样式 #p_color{color: red;}
标签通过id属性调用id样式
<p id="p_color"> </p>
id选择器与类选择器的区别:
页面中标签的id值必须唯一
一个标签只能调用一个id样式
1.5.5通配符选择器
语法:
*{属性: 值;}
特点: 该选择器会将页面中的所有标签都选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*通配符选择器 */ /*样式初始化的时候用*/ *{ font-size: 16px; font-family: 宋体; } </style> </head> <body> <div class="one">123</div> <div class="one">456</div> <span>789</span> </body> </html>
1.5.5.1交集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*交集选择器: 标签选择器永远放在最前面*/ p.abc{ color: skyblue; } </style> </head> <body> <p class="abc">年前</p> <p>年轻</p> <h1>物理</h1> <h2>化学</h2> </body> </html>
1.5.6 font 属性介绍
font-size 文字大小
font-weight: normal; 文字加粗效果
700;文字加粗
bold 文字加粗
400; 文字正常显示
font-style: 设置文字是否斜体显示
normal; 默认正常显示
italic; 斜体显示
font-family : 字体对应的名称(宋体等等)/字体对应的英文方式/字体对应的unicode--》设置文字字体
注意:font-fmaily 一次可以设置多个字体,字体与字体之间用逗号隔开
设置字体要设置常用的字体
字体对应的unicode获取方法
line-height:设置文字行高
1.5.7font 属性联写
font: font-weight font-style font-size/line-height font -family ---> font: 700 italic 30px/20px 微软雅黑
注意:1.属性联写中,必须设置font-size 和 font-family
2.在属性联写中,font-size 必须 放到font-family前面设置
3.如果font的属性全部要写,那么按照上面的例子写
1.5.8 复合选择器
标签指定式选择器
标签名.类名{ 属性: 值;} 或者 标签名#id名{属性:值;}
关系: 既....又.....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .one{ color: red; } /*标签指定式选择器*/ div.one{ color: green; } div#two{ color: pink; } </style> </head> <body> <div class="one">div中的文字</div><!-- 变绿 --> <p class="one">p中的文字</p> <div class="two" id="two">div中的文字</div><!-- 变粉色 --> <div class="one two">div中的文字</div><!-- 变绿 --> </body> </html>
1.5.9后代选择器
注意: 后代选择器 标签之间必须式嵌套关系 。
选择器与选择器之间必须要用空格隔开
后代选择器只能选择后代元素
语法:选择器 选择器 {属性:值;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father .son{ color: skyblue; } .father .child .small { color: pink; } </style> </head> <body> <div class="father"> <p class="son">儿子</p> <div class="child"> <p class="small">孙女</p> </div> </div> </body> </html>
1.5.10 并集选择器
语法: 选择器,选择器 {属性:值;}
注意: 1.选择器与选择器之间必须用逗号隔开
2.选择器标签之间的结构可以是任意的一种关系(并列或者父子等等都可以)
1.5.11补充
子代选择器 语法:选择器>选择器{属性: 值;}
注意:子代选择器之间必须是嵌套接结构,子代选择器只能选择直接后代元素,后代选择器可以选择所有的后代元素
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div>span{ color: red; } </style> </head> <body> <div class="one"> <span>直接后代或者直接子代</span> <p classs="two"><span>后代元素</span></p> </div> <p class="two">没有父元素的p</p> </body> </html>
属性选择器: 语法: [属性名]{属性:值;}
或者[属性=值]{属性:值;}
或者[属性^=字母]{} 选中以字母开始的标签
或者[属性$=字母]{} 选择以字母结束的标签
或者[属性*=字母]{} 选中包含字母的标签
例子1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*属性选择器1: E[attr] 找到E集合中具有attr属性的元素 */ /*.one[type] { color: red; }*/ /*属性选择器2:E[attr=val] 找到E集合中具有attr属性并且属性值为val的元素*/ /*input[type="text"] { width: 300px; height: 50px; }*/ </style> </head> <body> <!-- 请给type="text"的input设置width:300px height:50px --> <input class="one" type="text" value="我是默认值"> <input class="one" type="button" value="百度一下"> <div class="one">追命</div> </body> </html>
例子二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*属性选择器3:E[attr*=val] 找到E集合中所有具有attr属性的元素,并且这些元素的attr值中包含val(val的位置不限制)*/ /*div[class*=one] { color: red; }*/ /*属性选择器4: E[attr^=val] */ /*需求:找到页面上的所有div,并且div具有类名,并且类名以one开头*/ /*div[class^=one] { color: red; }*/ /*属性选择器4: E[attr$=val] */ /*需求:找到页面上所有div,并且div具有类名,并表类名以one结尾*/ /*div[class$=one] { color: red; }*/ </style> </head> <body> <div class="one">追命</div> <div class="Numbrone">无情</div> <div class="two">铁手</div> <div class="oneaa">冷血</div> </body> </html>
伪类选择器
结构伪类
语法: 选择器 : first-child{属性: 值;}
选择器 : last-child{属性: 值;}
选择器 : nth-child(n){属性: 值;}
选择器 : nth-last-child(n){属性: 值;}
选择器 : nth-child(odd){属性: 值;} 选择奇数
选择器 : nth-child(even){属性: 值;} 选择偶数
例子1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 结构伪类选择器 :first-child 找到第一个子元素 :last-child 找到最后一个子元素 */ li:first-child { color: red; } li:last-child { color: pink; } li:nth-child(3) { color: blue; } </style> </head> <body> <ul> <li>这是第1个儿子</li> <li>这是第2个儿子</li> <li>这是第3个儿子</li> <li>这是第4个儿子</li> <li>这是第5个儿子</li> <li>这是第6个儿子</li> <li>这是第7个儿子</li> <li>这是第8个儿子</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*li:nth-child(2n) { color: red; }*/ /*li:nth-last-child(1) { color: red; }*/ /* 选择偶数项时除了可用2n,还可以使用一个关键字even 选择奇数项时除了可以用2n+1/2n-1,还可以使用一个关键字odd */ li:nth-child(even) { color: blue; } li:nth-child(odd) { color: green; } </style> </head> <body> <!-- ajsfklsa;dfjas;lfdkjask;lfdasjf;lkak --> <ul> <li>这是第1个儿子</li> <li>这是第2个儿子</li> <li>这是第3个儿子</li> <li>这是第4个儿子</li> <li>这是第5个儿子</li> <li>这是第6个儿子</li> <li>这是第7个儿子</li> <li>这是第8个儿子</li> </ul> </body> </html>
例子3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*传入n,会选中所有的数,n=1,2,3,4,5,6...*/ /*li:nth-child(n) { color: blue; }*/ /*传入2n,表示选中的所有的偶数项*/ li:nth-child(2n) { color: red; } /*传入2n+1或者2n-1,都可以得到所有的奇数项*/ /*li:nth-child(2n+1) { color: yellow; }*/ li:nth-child(2n-1){ color: purple; } </style> </head> <body> <ul> <li>这是第1个儿子</li> <li>这是第2个儿子</li> <li>这是第3个儿子</li> <li>这是第4个儿子</li> <li>这是第5个儿子</li> <li>这是第6个儿子</li> <li>这是第7个儿子</li> <li>这是第8个儿子</li> </ul> </body> </html>
目标伪类
空伪类
排除伪类
伪元素选择器
1.6 元素显示方式
块级元素
代表:div,p,ul,ol,dl,li,dd,dt,h1~h6
特点:a.块级元素要独占一行显示
b.块级元素的默认宽度与其父元素的宽度一致
c.块级元素可以设置宽度和高度
行内元素
代表: span, a , font, strong ,i ,s.....
特点:a.行内元素在一行内显示
b.行内元素不能设置宽度和高度
行内块元素
代表: img ,input......
特点:a.元素可以在一行上显示
b.元素可以设置宽度和高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* div显示特点: 1)单独占一行 2)可以设置宽高 3)如果不设置宽高,那么宽与父元素的宽度保持一致,高度由内容决定: span显示特点: 1)一行内可以显示多个 2)无法设置宽高 3)宽高都由内容下 在css中我们把拥有div显示特点 的元素叫做:块级元素 拥有span显示特点 的元素叫做:行内元素。 针对这两种显示方式我们有对应的关键字: 块级元素: display: block; 1)单独占一行 2)可以设置宽高 3)如果不设置宽高,那么宽与父元素的宽度保持一致,高度由内容决定: 例:hn,p,div,ul,li,dl,dt,dd,ol 行内元素: display: inline; 1)一行内可以显示多个 2)无法设置宽高 3)宽高都由内容下 例:span,b,u,i,s,em,ins,del,strong,a 行内块级元素: display: inline-block; 1)一行内可以显示多个 2)可以设置宽高、 3)如果不设置宽高,宽高由内容决定 例: input,img */ div { /*width: 200px; height: 100px;*/ background-color: pink; } span { background-color: yellow; width: 200px; height: 100px; } input { width: 300px; height: 50px; } </style> </head> <body> <div>喜洋洋</div> <div>懒洋洋</div> <span>灰太郎</span> <span>红太郎</span> <input type="text"><input type="text"> </body> </html>
1.7元素的模式转换
转化为块级元素(以块级元素的方式去显示)
display: block;
转化为行内块元素
display: inline-block;
转化为行内元素
display: inline;
注意:1.可以把行内元素、块级元素转化为任何以一种元素
2.行内块元素转化 成行内元素没有效果
3.一般情况下会将行内元素进行转化(需要设置宽度和高度)
1.8 CSS三大特性
一.层叠性():在权重相同的情况下, 在同一个标签中样式方式冲突,后面的样式会将前面的样式给覆盖掉。
注意:样式与定义的顺序有关,与调用的顺序无关
下面例子的结果是文字变粉色
二.继承性:在默认情况下,如果子元素没有设置样式,那么该子元素会受父元素的样式影响
注意: 1.CSS继承性只能发生在标签嵌套结构中
2.宽度和高度不能被继承
可继承的属性:
1.color 可以被继承
2.font-size 可以被继承
3.与font属性相关的属性都可以被继承
4.行高(line-leight)也可以被继承
5.text-align 可以被继承
继承中的特殊标签:
1.a标签不能直接受父元素中的文字颜色影响
2.标题标签不能直接受父元素中的文字大小影响
三.优先级
默认样式<通配符选择器<标签选择器<类选择器 < id选择器 < 行内样式 < ! important
权重式优先级的一种算法:比较规则
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* css三大特点: 继承:给父元素设置属性,子元素也可以使用; 层叠性:是浏览器处理冲突 的一种能力 优先级:层叠性的规则 权重:是优先级的计算法则 如果冲突的属性所在的选择器是简单选择器,那么可以直接通过之前的排序来直接确定优先级的大小,但是如果一旦涉及到多个选择器,那么之前的排序就不适用了,所以需要权重来帮助我们计算出复杂选择器的优先级 表示式:(0,0,0,0) 第一个0:表示复杂选择器ImPortant的个数 第二个0:表示复杂选择器中id选择器的个数 第三个0:表示复杂选择器中类选择器的个数 第四个0:表示复杂选择器中标签选择的个数 比较方法: 浏览器在判断复杂选择器的优先级时,会先从左向右依次比较四个数字,如果左边的数字大,那么这个复杂选择器的优先级就高,如果数字相同,就比较下一个,依此类推 继承的权重为零。 就近原则 */ .father p.son { /*(0,0,2,1)*/ color: red; } p#i2.son { /*(0,1,1,1)*/ color: blue; } </style> </head> <body> <div class="father" id="i1"> <p class="son" id="i2">文字</p> </div> </body> </html>
注意: a.继承的权重为0, 权重(算法)
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div p{ color:red; } #box{ color:blue; } </style> </head> <body> <div id="box"> <p id="para" class="spec"> <span>文字</span><!--红色,继承权重为0--> </p> </div> </body> </html>
b.权重可以叠加 例子中div p{} > p 的权重
总结:如果通过选择器指向是同一个标签,如果权重不一样,那么只考虑优先级
1.9 伪类
a:link{属性: 值;} 设置a的默认样式 //如果给a标签设置样式,推荐使用标签选择器或者其他选择器,不推荐适合用这种方式
a:visited{属性: 值;} 设置a标签访问过后的样式
注意: :a.visited{}该伪类只能设置与颜色相关的属性
b.该伪类还具有缓存性
a:hove{属性: 值;} 设置鼠标悬停在a标签上的样式
a:active{属性:值;} 设置鼠标左键按上去不放的激活状态的样式
总结: 1 :hove {}该伪类能单独使用
2 如果以上伪类都要设置需要按照顺序设置 L V H A (link visied hover active)
伪类也有优先级。
1.10 其他伪类
目标伪类:
:targer{属性:值;}
注意:该伪类要配合锚链接使用
空伪类:
:empty{属性:值;}
排除伪类:
:not(选择器){属性:值;}
焦点伪类:
:focus{属性:值;}
1.11 背景(css手册)
background-color 背景颜色
默认值: transparent 透明色
background-image 设置背景图片:url(url);
background-repeat 设置背景图片平铺方式
repeat 默认值
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
background-attachment
background-position 设置背景图片位置
注意:当背景图片位置设置一个值的时候第二个默认值是center
当设置背景图片位置出现具体数字时候,第一个值代表水平方向,第二个值代表垂直方向的值
1.12background 属性联写
background: red url(2.png) no-repeat 20px 40px ;
注意: 1.该属性没有属性个数的限制
2.该属性没有属性顺序的限制