知识点
CSS样式表的书写位置
内嵌式
外链式
行内样式表
标签分类
块元素
行内元素
行内块元素
块元素、行内元素
CSS三大特性
链接伪类
背景属性
CSS样式表的书写位置
内嵌式写法
<head> <style type=”text/css”> 样式表写法 </style> </head>
外链式写法
写在head里
<link rel=”stylesheet” href=”1.css”>
行内样式表
写在标签上
<h1 style="font-size:30px; color:red">霸气威武</h1>
三种写法特点:
内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
标签分类(显示方式)
块元素
特点:
独占一行
可以设置宽高
嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。典型代表
divh1~h6pulli
行内元素
特点：
在一行上显示
不能直接设置宽高
元素的宽和高就是内容撑开的宽高。
典型代表：
spanastrongemdelins
行内块元素(内联元素)
特点：
在一行上显示
可以设置宽高典型代表
inputimg
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img{ width: 300px; vertical-align: top; } input{ width: 300px; height: 200px; background-color: #ffff00; } </style> </head> <body>  <input type="text" name="myname"/> </body> </html>块元素、行内元素转换
块元素转行内元素
display:inline;
块元素被转为行内元素就不再具有块元素的特性，而具有行内元素的所有特性
行内元素转块元素
display:block;
块元素或行内元素转行内块元素
display:inline-block;
css三大特性
层叠型
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
继承性
继承性发生的前提是包含（嵌套关系）
文字颜色可以继承
文字大小可以继承
字体可以继续
字体粗细可以继承
文字风格可以继承
行高可以继承总结：文字的所有属性都可以继承。
特殊情况：
h系列不能继承文字大小。(实质上是继承了，h1默认的文字大小是2em,如果继承过来的文字大小为60，则h1的文字大小变为260*)
a标签不能继承文字颜色。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*.father{ color: red; font-size: 50px; font-family: 宋体; font-weight: 700; font-style: italic; line-height: 20px; }*/ .box{ font-size: 60px; color: red; } </style> </head> <body> <!-- <div class="father"> <p>14威武</p> </div> --> <div class="box"> <h1>威武</h1> <h2>nihaoh2</h2> <h3>nihaoh2</h3> <a href="#">你好</a> <p>你好</p> </div> </body> </html>优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 100以上
注意：数字知识描述权重的大概，并不是精确的。
优先级特点
继承的权重为0
权重会叠加
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ color: red !important; } .box{ color: green; } #con{ color: yellow; font-size: 50px; } </style> </head> <body> <div class="box" id="con" style="font-size:100px;color:blue;">nihao</div> </body> </html>权重叠加：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p.son{/* 权重叠加： 1+10=11 */ color: yellow; } p{ color: red; } .son{ color: blue; } .father .son{/*权重叠加：10+10=10；*/ color: green; font-size: 50px; } .father #baby{/*权重叠加：10+100=110；*/ color: orange; font-size: 70px; } </style> </head> <body> <div class="father"> <p class="son" id="baby">web威武</p> </div> </body> </html>链接伪类
a:link{属性:值;} a{属性:值}效果是一样的。
a:link{属性:值;} 链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态 ：focus{属性:值；} 获取焦点注意：如果四个链接伪类都使用，必须按顺序书写。
导航条案例
案例效果图
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .nav{ text-align: center; height: 60px; background-color: #aaa; } a{ display: inline-block; width: 100px; height: 100%; line-height: 60px;/*垂直方向要居中必须添加此属性*/ vertical-align: center; text-decoration: none; font-weight: 700; } a:hover{ background-color: #eee; text-decoration: underline; } .public{ color: #f14400; } </style> </head> <body> <div class="nav"> <a href="#" class="public">天猫</a> <a href="#" class="public">聚划算</a> <a href="#" class="public">超市</a> <a href="#" class="public">头条</a> <a href="#">阿里旅游</a> <a href="#">电器城</a> <a href="#">淘抢购</a> <a href="#">苏宁易购</a> <a href="#">智能生活</a> </div> </body> </html>背景效果
background-color背景颜色background-image背景图片Background-repeatrepeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺repeat：默认值，水平和垂直方向都平铺
no-repeat：水平和垂直方向都不平铺
repeat-x：只有水平方向平铺
repeat-y：只有垂直方向平铺
当同时有两个属性：repeat-x|repeat-y;相当于默认值repeat,水平和垂直方向都平铺。
Background-positionleft | right | center | top | bottom 背景定位当只写水平方位的时候，垂直方位居中
background-position: right;
当`background-position: right;`时
当只写垂直方位的时候，水平方位居中：
background-position: top;
当`background-position: top;`时
当写两个值的时候，顺序无要求
background-position: right bottom; background-position: bottom right;
上面的效果是一样的
写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
background-position: 200px 50px;
当`background-position: 200px 50px;`时
Background-attachment背景是否滚动scroll | fixed
scroll:是指当标签滚动的时候，被跟着滚动直到消失
当div滚动的时候，图片也跟着向上走了
fixed:是指当标签滚动的时候，背景不会跟着标签滚动。
div已经滚动了，但是背景图片的位置没有动
当div滚动的时候，图片也跟着向上走了 
div已经滚动了，但是背景图片的位置没有动注意：
当background-position: center; background-attachment: fixed;，此时的背景图不再是基于div的居中了，而是基于浏览器的body的居中，所以这个时候如果div变小，背景图片可能会看不见。
当background-position: center; background-attachment: scroll;，这个时候才是基于div的居中，无论div的多大，都在div的中间。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ /*无论是设置背景颜色还是背景图片都必须有高度，否则没有效果*/ height: 400px; background-color: #999; background-image: url('1.png'); background-repeat:no-repeat; /* repeat-x|repeat-y;这样相当于：repeat */ background-position: center; background-attachment: fixed; } </style> </head> <body> <div class="box"> <p>nihao</p> <p>nihao</p> <p>nihao</p> <p>nihao</p> <p>nihao</p> <p>nihao</p> ...... <!--- 多复制几个p标签，让浏览器出现滚动条，测试background-attachment: fixed|scroll属性 ----> </div> </body> </html>背景属性连写
background: red url('1.png') repeat-x top fixed;注意：
1.连写的时候没有顺序要求
2.url('1.png')不能省略，其他都可以省略
练习
搜索框的案例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input{ width: 470px; height: 30px; background: white url('search.jpg') no-repeat 440px center scroll; } </style> </head> <body> <input type="text" name="mytext" placeholder="请输入关键字"> </body> </html>带图标的列表
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li{ list-style-type: none; background: white url('li.gif') no-repeat left center scroll; text-indent: 1.5em; } </style> </head> <body> <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> </body> </html>购物车
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a{ display: inline-block; background:url('110.png'); width: 67px; height: 32px; } a:hover{ background: url('110.png') bottom; } </style> </head> <body> <a href="#"></a> </body> </html> 
购物车练习
五彩导航
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> a{ display: inline-block; width: 120px; height: 58px; text-align: center; line-height: 50px; text-decoration: none; } a.one{ background:url('images/bg1.png'); } a.one:hover{ background:url('images/bg2.png'); } a.two{ background:url('images/bg4.png'); } a.two:hover{ background:url('images/bg3.png'); } a.three{ background:url('images/bg5.png'); } a.three:hover{ background:url('images/bg6.png'); } a.four{ background:url('images/bg7.png'); } a.four:hover{ background:url('images/bg3.png'); } </style> </head> <body> <a href="#" class="one">五彩导航</a> <a href="#" class="two">五彩导航</a> <a href="#" class="three">五彩导航</a> <a href="#" class="four">五彩导航</a> </body> </html> 
五彩导航
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/d68cbfa98b89
共同学习，写下你的评论
评论加载中...
作者其他优质文章
