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 width:内容的宽度
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-width: 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{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 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.从父现象:父亲怂了,儿子再牛逼也没用