1.css的引入方式(三种): a.行内样式<div> <p style="color: green">我是一个段落</p> </div> b.内接样式 <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style> c.外接样式 c.1 链接式 <link rel="stylesheet" href="./index.css"> c.2 导入式 <style type="text/css"> @import url('./index.css'); </style> 2.css的选择器 a.基础选择器 a.1 标签选择器 可以选择所有的标签,比如div,ul,li,p等等,不管标签藏得多深,都可以找到 /*标签选择器p*/ p{ color: red; font-size: 20px; } a.2 id选择器(方式:#id) 同一个页面中id不能重复,任何的标签都可以设置id(id命名规范同函数名) a.3 类选择器 a.3.1 所谓类,就是class 与id用法非常类似,任何标签都可以加类, 类还可以重复,属于归类的概念. a.3.2 同一个标签中可以携带多个类,用空格隔开 b.高级选择器 b.1 后代选择器 :使用空格表示后代选择器.顾名思义,父元素的后代(儿孙满堂) b.2 子代选择器 :使用>表示子代选择器.比如div>p,仅仅表示当前div元素选中的子代 b.3 并集选择器 :多个选择器用逗号隔开.表示选中的多个标签所选中的所有元素 b.4 交集选择器 :第一个标签必须是标签选择器,第二个必须是类选择器 语法:div.active{} b.5 属性选择器 :根据标签的属性选择,选中当前的标签 以for属性为例: 1 /*根据属性查找*/ 2 [for]{ 3 color: red; 4 } 6 /*找到for属性的等于username的元素 字体颜色设为红色*/ 7 [for='username']{ 8 color: yellow; 9 } 10 /*以....开头 ^*/ 12 [for^='user']{ 13 color: #008000; 14 } 15 16 /*以....结尾 $*/ 17 [for$='vvip']{ 18 color: red; 19 } 20 21 /*包含某元素的标签*/ 22 [for*="vip"]{ 23 color: #00BFFF; 24 } 28 /*指定单词的属性*/ 29 label[for~='user1']{ 30 color: red; 31 } 32 33 input[type='text']{ 34 background: red; 35 } b.6 伪类选择器 :伪类选择器一般用在超链接a标签中, 使用a标签的伪类选择器,要遵循"爱恨准则" LoVe HAte 示例: 1 /*没有被访问的a标签的样式*/ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*访问过后的a标签的样式*/ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠标悬停时a标签的样式*/ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠标摁住的时候a标签的样式*/ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 } b.7 伪元素选择器 示例: /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content:'alex'; } /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content:'&'; color: red; font-size: 40px; } 3.css的继承性和层叠性 a.继承性 继承特点：继承了父类的属性和方法 继承父类的属性 a.1 有些属性可以继承:color,font-*,text-*,line-*.主要是文本级的标签元素 a.2 一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承 b.层叠性 权重的标签覆盖了权重小的标签(谁的权大听谁的) b.1 数: id的数量 class的数量 标签的数量 (顺序不能乱) 权重100 权重10 权重1 b.2 继承来的属性,谁描述的近(距离) b.3 权重相同时，以后来设置的属性为准 b.4 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。 第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同 #box2 .wrap3 p{ color: yellow; } #box1 .wrap2 p{ color: red; } 我们会发现此时显示的是红色的。 第二种现象： 前选择器没选中内层标签，它是通过继承来设置的属性，那么它的权重为0。 后选择器选中内层标签，有权重。 #box1 #box2 .wrap3{ color: red; } #box2 .wrap3 p{ color: green; } 我们会发现此时显示的是绿色的。 第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则' #box1 #box2 .wrap3{ color: red; } .wrap1 #box2{ color: green; } 我们会发现此时显示的是绿色的。 b.5 !important :权限无限大(不能随便使用) 4.盒模型 内层到外层content padding border margin a.盒模型的属性: a.1 内容的宽度 a.2 height:内容的高度 a.3 padding:内边距,边框到内容的距离 1.padding区域有背景色,且背景颜色和内容颜色一样。也就是说background-color这个属性将 填充所有的border以内的区域 2.padding有四个方向,分别描述4个方向的padding 描述的方法有两种: 1、写小属性,分别设置不同方向的padding padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; 2、写综合属性，用空格隔开 /*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px; 3.一些标签默认有padding: 比如ul标签，有默认的padding-left值。 那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。 我们现在初学可以使用通配符选择器 *{ padding:0; margin:0; } But，这种方法效率不高。 所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css） a.4 border:边框,就是指盒子的宽度 边框三要素:粗细 线性样条 颜色 border- 3px; border-style: solid; border-color: red; 还可以单独对某一个方向进行设置(left,right,top,bottom) a.5 margin:外边框,盒子边框到附近最近盒子的距离 margin: 20px; /*表示四个方向的外边距离为20px*/ margin-top: 30px; /*表示盒子向下移动了30px*/ margin-left: 50px; /*表示盒子向右移动了50px*/ a.6 计算宽高 盒子的真实宽度=width+2*padding+2*border b.margin塌陷问题 1.设置浮动后,不会出现margin塌陷问题 2.设置浮动后,margin:0 auto;失效 两个标准流下兄弟盒子 设置垂直方向上的margin时，以较大的为准，这种现象叫塌陷. 没法解决，我们称为这种技巧叫“奇淫技巧”。 margin:0 auto;表示上下外边距离为0,左右为auto的距离 使用margin：0 auto;注意点： 1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center; 5.标准文档流 web网页制作,就是从上往下的排版,这个排版就是流(类似织毛衣) a.空白折叠现象 :多个空格在一起只会显示一个 b.高矮不齐,底边对齐 :文字,图片大小不一,会让页面的元素出现高矮不齐的现象,但是浏览器中会发现底边对齐. c.自动换行,一行写不满,换行写 6.行内元素和块级元素 a.行内元素,块级元素特点 a.1行内元素 1 与其他行内元素并排 2 不能设置宽高,默认宽度就是文字的宽度. a.2块级元素 1 霸占一行,不能与其他任何元素并列 2 并接受宽高的设定,默认宽度父亲的100% b.行内元素,块级元素区分 标签区分 1.文本级标签:p,span,a,b,i,u,em. 2.容器级标签:div,h系列,li,dt,dd. b.1 行内元素:除了p之外,所有文本级标签,都是行内元素.p是文本标签,却是个块级元素. b.2 块级元素:所有容器级标签都是块级元素,外加p这个块级元素. c.块级元素和行内元素的相互转换(display) c.1 块级元素转化成行内元素,例如div 对于div设置 display:inline 即可 c.2 行内元素转化成块级元素,例如span 对于span设置 display;block 即可 7.脱离标准流 a.float:浮动 (none,left,right) a.1 浮动元素特点: 1.浮动的元素脱标(脱离了标准流) 2 浮动的元素互相贴靠 3 浮动的元素有"子围"效果 4 浮动的元素收缩的效果(浮动元素紧凑效果) a.2 清除浮动: 1.清除浮动原因:影响页面布局,使页面排版错乱 2.清除浮动的方法: .1.给父盒子设置高度 一般会常用页面中固定高度,且子元素并排.如导航栏 .2.clear:both clear三值:left right both(当前元素左右两边都不允许有浮动) .3.伪元素清除法 给浮动元素父盒子,也就是不浮动元素,添加clearfix的类,然后设置 .clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; } 例:/*新浪首页清除浮动伪元素方法*/ content: "."; display: block; height: 0; clear: both; visibility: hidden .4.overflow:hidden 值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 b.绝对定位 c.固定定位 8.文本属性和字体属性 a.文本属性: a.1 文本对齐:text-align属性规定元素中的文本的水平对齐方式. 属性值:none center left right justify a.2 文本颜色: color属性 a.3 文本首行缩进: text-indent属性规定元素首行所进度的距离,单位建议使用em a.4 text-decoration属性规定文本修饰的样式 属性值:none(空 默认) underline(下划线) overline(定义文本上的一条线) line-through(定义穿过文本下的一条线) inherit(继承父元素的text-decoration属性的值) a.5 line-height 设定行高 b.字体属性: b.1 字体大小: font-size表示设定字体大小,如果设定成inherit表示继承父元素的字体大小值. b.2 字体粗细: font-weight表示设置字体的粗细 属性值:none(默认值,标准粗细) bold(粗体) broder(更粗) lighter(更细) 100~900(设置具体粗细,400等同于normal,而700等同于bold) inherit(继承父元素字体的粗细值) b.3 字体系列 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 出现浏览器不支持的字体,会尝试执行下一个 b.4 line-height行高 针对单行文本垂直居中 公式:行高的高度等于盒子的高度,可以是当行文本垂直居中,注意值适用于单行文本. 针对多行文本垂直居中 行高的高度不能小于字体的大小,不然上下字之间会紧挨在一起. padding-top:(盒子高度-行高*行数)/2px (同时需要将盒子的高度降低前面的值) 9.超链接导航栏案例 html结构 <div class="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> <li> <a href="">网站导航</a> </li> </ul> </div> css代码如下： *{ padding: 0; margin: 0; } ul{ list-style: none; } .nav{ 960px; /*height: 40px;*/ overflow: hidden; margin: 100px auto ; background-color: purple; /*设置圆角*/ border-radius: 5px; } .nav ul li{ float: left; 160px; height: 40px; line-height: 40px; text-align: center; } .nav ul li a{ display: block; 160px; height: 40px; color: white; font-size: 20px; text-decoration: none; font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{ background-color: red; font-size: 22px; } 10.background a. background-color属性表示背景颜色 b. background-img:表示设置次元素的背景图片 c. background-repeat:表示设置钙元素平铺的方式 值 描述 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。 d. background-position: 属性设置背景图像的起始位置。 这个属性设置背景原图像（由 background-image 定义）的位置 属性值： 值 top left top center top right center left center center center right bottom left bottom center bottom right 描述 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0 0； 这两个值必须挨在一起。 e.精灵图技术 css精灵图(雪碧图)原理: 只有一张大的合并图,需要显示小图标时,就需要截取大图的一小部分显示. css精灵图的好处: 1.利用css sprites能减少网页的http请求,从而大大提高页面的属性 2.css sprites能减少图片的字节 3.解决了网页设计师在图片命名上的困扰,提高网页的制作效率. 4.更换风光方便,只需改变一张,维护方便. css精灵图不足: 1.css精灵图最大问题是内存使用 2.拼图维护比较麻烦 3.使css的编写变得困难 4.css精灵图调用的图片不能被打印 可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，那么我们可以此属性来制作通天banner。 background: red url('./images/banner.jpg') no-repeat center top; background-attach 设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动 10.定位:1.相对定位 2.绝对定位 3.固定定位 1.相对定位:相当于自己原来的位置定位(参考点是原来的位置) 现象和使用: 1.如果当前元素仅仅设置了相对定位,那么与标准流的盒子没什么区别 2.设置相对定位之后,才可以使用四个方向的属性:top,bottom,left,right 特性: 1.不脱靶 2.形影分离 3.老家占坑(移动的过程也被占用) 用途: 1.微调元素位置 2.做绝对定位的参考(父相子绝) position:relative(相对定位) a.三大特性:1.不脱靶 2.形影不离 3.老家流坑 b.用途: 1.微调元素 2.做绝对定位的参考 3.作为"父相子绝"的参考 c.参考点:以自己原本的本身位置做可参考点 2.绝对定位: position:absolute(绝对定位) a.特性: 1.脱标 2.做遮盖效果,提成了层级 b.用途: 1.父相子绝,用途很多(绝对重点) c.参考点:单个绝对定位,top属性描述,是以页面左上角定位 如果是父相子绝的,那么是以父辈元素左上角基准点 3.position:static(固定定位) c.参考点:https://www.cnblogs.com/majj/p/9040408.html 4.position:fixed 注: 父相子绝:父辈元素设置相对定位,子元素设置绝对定位 5.定位优先级 z-index压盖现象的四条规则: (四大特性,记住就能找到盒子了) 1.z-index值表示谁压着谁,数值大的压着数值小的 2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使 用z-index,而浮动元素不能使用z-index. 3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家没有z-index值,谁在 上面压着别人,定位了元素,永远压住没有定位的元素. 4.从父现象:父亲怂了,儿子再牛逼也没用