CSS基础知识大总结

选择器

• 选择器基本知识

  行内样式表

   <div style="color:red; font-size: 12px;">啦啦啦啦</div> //样式 : 值 ;
  

  内部样式表

     h2{
    	color : green;
    font-size :12px;
    }

外部样式表

类选择器

    <style>
    .red{
    	color:red;
    }
    </style>
    <div class="red">嘿嘿,工作累最多</div> //常用 规范用英文命名class

多类名

id选择器

    #pink{
    color:pink;
    }
    <p id="pink">aaa</p>

通配符选择器

    *{  //选择所有标签
    	color:pink;  
    }

基础选择器总结

字体

• 字体基本知识

  字体大小: 谷歌浏览器默认16px

  通常给Body自定义大小 防止不同浏览器默认大小不一

   body{
   	font-size:16px;
   }
  

  字体

   .title{
   	font-family:"微软雅黑","黑体"; //优先使用前面字体 没有就往后执行
   }
  

  Unicode字体
  

  字体加粗 font-weight

   .title{
   	font-weight:bold;  //等价于 font-weight:700;
   }
   h1{
   	font-weight:normal; //让粗体不加粗 //等价于font-weight:400;
   }
  

  字体倾斜 font-style

   .title{
   	font-style:italic;
   }
   em{
   	font-style:normal;//让斜体不斜
   }
  

  字体综合性写法

   .title{//顺序: font-style font-weight font-size font-family
   	font:italic 700 20px "微软雅黑";  //顺序不能变,可不写即默认,font-size和font-family必须写
   }
  

  font总结

  

外观属性

• 外观属性基本知识

  颜色

    //红 绿 蓝
    #ff0000 可简写为 #f00
    #ffffff 可简写为 #fff    两两相同才可以简写
    .title{
    color:#FF6700;
    }
    .title{
    color:rgb(255,103,0);
    }
  

  文本对齐 text-align

    .title{
    	text-align:center; //水平居中对齐
    }//right left
  

  行间距 line-height

    p{
    	line-height:24px;
    }
  

  首行缩进

    p{
    	text-indent:2em;   /1em为一个字的距离
    }
  

  字体装饰

    a{
    text-decoration:none;
    }
    a{
    text-decoration:underline;//加下划线
    }
  

  

  外观属性总结:

  

  编译器快捷方式

  

  导航栏案例所需技术

  复合选择器

  • 复合选择器基础知识

  后代选择器 x y

    .nav a{//后代选择器
    	color:pink;  
    }
    <div class="nav">
    	<a href="#">内部链接</a>
    	<a href="#">内部链接</a>
    	<a href="#">内部链接</a>
    </div>
    
    .aka ul li{
    	color:pink;
    }
    <div class="aka">
    	<ul>
    		<li>aaa</li>
    		<li>aaa</li>
    		<li>aaa</li>
    	</ul>
    </div>
  

  子元素选择器 x>y

    //只能选子 不能选孙
    div>strong{
    	color:pink;
    }
    <div>
    	<strong>儿子<strong>
    	<strong>儿子<strong>
    </div>
  

  交集选择器 x.y

    <p class="red">红色</p>
    <p class="red">红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <p>蓝色</p>
    <p>蓝色</p>
    <p>蓝色</p>
    
    p.red{ //交集
    	color:red;
    }
  

  并集选择器 x,y

    <p>我和你</p>
    <p>我和你</p>
    <span>我和你</span>
    <span>我和你</span>
    
    p,span{
    	color:red;
    }
  

  链接伪类选择器 a:link visited hover active

    <a href="http://www.xiaomi.com">小米</a>
    //未访问链接状态
    a:link{
    	color:#333;
    text-decoration;none; //取消下划线
    }
    //已访问链接状态
    a:visited{
    		color:orange;
    }
    //鼠标经过状态
    a:hover{
    	color:red;
    }
    //鼠标点击状态
    a:active{
    	color:green;
    }
    //从上到下 尽量按这个顺序写 l v h a 
  

  

  一般浏览器a链接有默认样式 css操作一般给a指定操作(可用后代选择器)

  复合选择器总结

  

标签显示模式

• 标签显示模式基本知识

  块级元素

    div{
    	height:200px;
    	background-color:pink;
    }
  

  

  • p里面不能包含div
  • h类 dt类尽量不要放div

  行内元素

    常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<s>,<ins>,<u>,<span>
  

  

  行内块元素

    <img />,<input />,<td>
  

  

  标签显示模式总结

  

  行内元素转化成块级元素 display:block;

    <span>行内行内</span>
    
    span{
    	display:block;
    	width:100px;
    	height:100px;
    	background-color:pink;
    }
  

  块级元素转化成行内元素 display:inline;

    <div>块级块级</div>
    
    div{
    	display:inline;
    	width:200px; //无效了
    	background-color:pink;
    }
  

  将行内元素转化成行内块元素

    <a href="#">百度</a>
    
    a{
    	display:inline-block;
    	width:80px;
    	height:25px;
    	background-color:pink;
    }
  

  

  行高与高度三种关系 line-height

    <div>文字垂直居中</div>
    
    div{
    	width:100px;
    	height:50px;//
    	backgtound-color:pink;
    	line-height:50px;//
    }
  

  

背景

• CSS背景

  背景图片 background-image:url(xxx/xxx.jpg);

   <div class="bg">
   123
   </div>
   
   .bg{
   	width:800px;
   	height:500px;
   	background-image:url(images/xx.jpg); //images是文件夹路径名
   }
  

  • 必须加url
  • url不要加" "

  图片铺 background-repeat:repeat //no-repeat, repeat-x , repeat-y;

   <div class="bg">
   123
   </div>
   
   .bg{
   	width:800px;
   	height:500px;
   	background-omage:url(images/xx.jpg); //images是文件夹路径名
   	background-repeat:repeat //这是默认值 铺 
   	
   }
  

  背景位置 background-position: x坐标 y坐标

   .bg{
   	width:800px;
   	height:500px;
   	background-omage:url(images/xx.jpg); //images是文件夹路径名
   	background-repeat:repeat //这是默认值 铺 
   	background-position: right top //设图片在右上角,默认值在左上
   	background-position: left bottom //设图片在右上角,默认值在左上
   	background-position:center center
   	background-position:50px 10px //精确调整
   }
  

  

  背景大图首页

  

  背景附着 background-attachment： //fixed or scroll(默认)

   .bg{
   	background-omage:url(images/xx.jpg);
   	background-attachment:fixed ; //设置固定背景,默认是scroll
   }
  

  背景简写 background:背景颜色 背景图片地址 背景平铺 背景滑动 背景位置

   .bg{
   	background: #cc url(images/xx.jpg) no-repeat fixed center top ;不一定按顺序
   } 
  

  背景半透明

   .bg{
   		background:rgba(0,0,0,0.3);  /a指透明度 取值0-1 等效于:background:rgba(0,0,0,.3);
   }//指的是盒子半透明 不影响文字
  

  

  背景总结

  

CSS书写顺序

• CSS注意书写顺序

  

    .jbc {
    		display: block; //1.布局定位书写
    		postion: relative;
    		float: left;
    		width: 100px;//2.自身属性
    		height: 100px;
    		margin: 0 10px;
    		padding: 20px 0;
    		font-family: Arial,'Helvetica Neue', Helvetica, sans-serif;//3.文本属性
    		color: #333;
    		background: rgba(0,0,0,.5);//4.其他属性
    		-wenlit-border-radius: 10px;
    		-moz-border-radius: 10px;
    		-o-border-radius: 10px;
    		-ms-border-radius: 10px;
    		border-radius: 10px; 
    }
  

CSS三大特性

• CSS三大特性

  css层叠性:相同选择器时,就近原则叠加,不同样式不受影响

  css继承性

css优先级 当选择器不同时

//显示是蓝色

div{
    	color:pink!important;//权重最大
    }

PS工具操作

• cutterman插件
  

盒子模型

• 盒子模型基础知识

  边框

    div{
    	width:200px;
    	height:200px;
    	border-width:1px;边框粗细
    	border-style:solid; //实线
    	border-style:dashed; //虚线
    	border-style:dotted;//点线
    	border-color:pink;//边框颜色
    }
  

  边框简写 没有顺序

    div{//边框粗细 边框样式 边框颜色
    	border:5px dotted pink;
    }
  

  可指定4个边框样式

边框合并 border-collapse

    table,td,th{
    	border:1px solid deeppink;
    	border-collapse:collapse;//将相邻的单元格边框合并
    }

内边距 padding-left //top bottom right

    <div>啊啊啊啊</div>
    div{
    	width:200px;
    	height:200px;
    	border：1px solid red;
    	padding-left:10px;
    }

内边距简写 padding:

    div{
    	width:200px;
    	height:200px;
    	border：1px solid red;
    	padding:20px; //上下左右都是20
    	padding:20px 10px;//上下20 左右10
    	padding:20px 10px 30px;//上20 左右10 下30px
    	padding:20px 10px 30px 40px; // 顺时针 上右下左  会撑大盒子
    }

盒子实际大小=内容宽度和高度+内边框 +边框

为了保证盒子是100px 只能改为如下 ：通过设置宽高的盒子减去相应的内边框 维持盒子原有大小

• 如果一个盒子没有设宽度 则padding不会撑开盒子

  外边距 margin-top // left right bottom

  div{
  	margin:100px;//简写   上 右 下 左
  }
  

  让块级盒子居中

  • 必须要有宽度
  • 左右边距设置为auto

 div{
        	width:600px;
        	height:400px;
        	background-color:pink;
        	margin-left:auto;
        	margin-right:auto;
        	margin:0 auto ;//也可以
        	margin:auto; //也可以
        	text-align:center;//盒子里的文字水平对齐
        }

插入的图片和背景图片区别

img{//插入图片设置 (使用最多)
	width:200px;
	height:210px;
	margin-top:30px;//更改插入图片位置，也可以用padding
	margin-left:50px;
}

div{ 
	width:400px;
	height:400px;
	border:1px solid purple;
	background:#fff url(images/xx.jpg);
	background-postion:30px 50px;
}

清除元素默认的的内外边距 (一般css的第一句)

*{
	margin:0;
	padding:0;
}

• 行内元素 尽量只设置左右外边距 不设上下

外边距垂直合并(默认)

嵌套关系外边距合并(默认) 子不孝 父子之过(父类操作防止)

.father{
	width:500px;
	height:500px;
	background-color:pink;
	border-top:1px solid transparent;//嵌套关系 垂直外边距合并解决方案,transparent透明色
	//padding-top:1px; //此方法也行
	//overflow:hidden; 次方法也行
}
.son{
	width:200px;
	height:200px;
	background-color:purple;
	margin-top:100px; //会把父类跟着塌陷
}

布局

去掉列表样式

li{
	list-style:none; //为了以小图片代替
}

圆角边框 border -radius

border -radius:50%;

p{
width:100px;
height:20px;
background-color:red;
font-size:12px;
color:#fff;
text-height:20px;
border-radius:10px; //只需高度的一半即可
}//效果为以下图片

盒子阴影 box-shadow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/外阴影

box-shadow:2px 2px 2px 2px #f00   //默认外阴影足矣

浮动

浮动关系

img { 
	float:left;//左浮动    /none,right
}

'脱离标准流，漂浮起来 ，原来的位置就给其他标准流盒子

.one {
	float:left;//浮起来
	width:200px;
	height: 200px;
	background-color; pink;
}
.two {
	width: 300px;
	height: 300px;
	background-color; purple;
}//效果如下

float特性会改变display特性:变成相当于行内块的存在

//浮动元素之间没有空隙, 行内块之间有,和真正行内块就这区别
.one,
 two {
	width:200px;
	height:200px;
	background-color: pink;
}
.one {
	float: left;
}
.two {
	background-color: purple;
	float: left;
}

• 浮动的元素互相贴靠一起的,但是如果父级宽度装不下这些浮动的盒子,多出的盒子另起一行

一个标准的网页是: 标准流+浮动+定位

大部分的a 都在 li 里面

浮动元素与父级关系

浮动元素兄弟之间关系

• 父级盒子一般不合适给高度，让子级是多少就显示多少撑开

清除浮动

<div class="one">
	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="class"></div> //额外标签法（隔墙法）
</div>

.class{
	clear:both;//最后一个子级加的
}

.one{
	width;500px;
	border:1px; solid red;
	overflow:hidden; //父级添加overflow 清除浮动  也会清除子类超过它范围的导致子类不会自动换行，所以此方法并不万能
}

• 滑轮上下 auto 把多出的子类 集中 通过滚条查看
• 滑轮左右上下 scroll

声明清除浮动样式 使用after伪元素 : .xxx :ａｆｔｅｒ｛｝此方式清除浮动最好

<div class="one clearfix">
	<div class="damo"></div>  //浮动情况
		<div class="ermao"></div> //浮动情况
</div>

<div class="two"> </div>

.clearfix :after{
		content:"";
		display:block;
		height:0;
		visibility:hidden;
		clear:both;
}
.clearfix {
	*zoom:1; //ie6,7 专门清除浮动样式
}

• 相当于隔墙法升级版

双伪元素清除标签

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;	
}

.clearfix:after{
		clear:both;
}
.clearfix {
	*zoom: 1
}
//clearfix 为父类 其子类浮动情况下导致父类撑不开  清除浮动 用以上方法

清除浮动总结

• 一有全有 父级里的孩子 有一个浮动 其他也弄浮动 不然麻烦

定位

• 定位模式 + 边偏移
  

定位模式

• 静态定位 : 相当于没有定位 (几乎不适用)

相对定位 position:relative;(自恋型) //原来的位置还保留！ 不脱标

div{ //相对原来标准流的位置移动
	width:200px;
	height:200px;
	backgroungd-color:pink;
	position:relative; 
	top:100px;//边偏移
	right:100px; //边偏移
}

绝对定位(拼爹型) //原来的位置不保留！ 完全脱标

.father{ //相对原来标准流的位置移动
	width:200px;
	height:200px;
	backgroungd-color:pink;
	position:sbsolute; //子盒子总是以父级为准移动(父亲带着儿子走)
	top:50px;//边偏移
	right:50px; //边偏移
}
.son {
		width:100px;
		height:100px;
		backgroungd-color:red;
		position:sbsolute; //如果父级或祖先级没有定位 绝对定位的子盒子以文档(浏览器)为准
		top:50px;//边偏移
		right:50px; //边偏移
}

• 通常采用 子绝父相 来布局

固定定位 position:fixed //完全脱标,和父级没有关系, 对准于浏览器可视区域,不随页面滚动

img {
	position:fixed;//属于固定定位
	right:0px;
	top:0px;
}

• 如果是绝对定位，使用margin是不能让盒子水平居中

  解放绝对定位盒子居中方法:

div {
	positon:absolute;
	left:50%;//走父级宽度一半
	margin-left:-100px;//走自己宽度一半
	width:200px;
	height:200px;
}

叠盒子规则

自定义叠盒子顺序 z-index

.damao{
	z-index:1;
}

定位改变display属性

• 块级元素 不给width 默认通栏显示
• 行内块不给wid 默认的宽度就是内容的宽度 (浮动也是，特殊的行内块),绝对定位和固定定位也是如此情况
• 一个盒子加了浮动，固定和绝对定位，不用转换就可以直接给这个盒子加宽度和高度
• 以后，定位的盒子很多情况下需要单写宽度
• 定位的盒子如果需要通栏，宽度就给%100

圆角矩形设置4个角

定位总结

CSS高级技巧

元素显示和隐藏

• display visibility overflow

display:none  //隐藏对象 不再保留位置
display:block //除了转换为块级元素外 还有显示的意思！

visibility:hidden  //隐藏对象 会保留位置
visibility:visible //显示

overflow:visible //默认显示
overflow:hidden //隐藏溢出部分 超出盒子大小的部分隐藏掉了！
overflow:scroll; //显示滚动条 不会超出盒子大小 内容能显示全  缺点：丑
overflow:scroll;//内容超出就显示滚动条  ， 不超出就不显示 缺点:丑

用户图形界面：

鼠标样式 cursor

轮廓线

防止拖拽文本域 textarea

textarea {
		resize: none;
}

用户界面总结

垂直对齐 vertical-align

<div>
	<img src="images/2.jpg" alt="" class="one" >你愁啥
</div>
<div>
	<img src="images/2.jpg" alt="" class="two" >你愁啥
</div>

.one {
	vertical-align: baseline;//默认基线对齐
}
.two {
	vertical-align: middle;//让图片中线对齐
}
.three {
	vertical-align:top; //

去除图片底层

div{
	border: 1px solid red;
}
div img {
	vertical-align: bottom;消除了底层空白缝隙
	vertical-align: middle; 不是基线对齐都可以消除
}
<div>
	<img src="images/3.jpg" alt="">
</div>

• vertical-align: 对块级元素是无效的 就不会有基线对齐问题

溢出的文字用省略号显示

div {

		white-space:normal; //默认 自动换行
		white-space: nowrap; //要求文字强制一行内显示 除非遇到br
		
		overflow:hidden; //隐藏溢出部分
		
		text-overflow: clip; //默认 裁切
		text-overflow:ellipsis;// 省略号显示溢出标记
	} 

• background-position: x轴px y轴px; 选定精灵图定位
  

滑动门原理

• a是设置左侧背景(左门)
• span是设置 右侧背景(右门)
• 因为整个导航栏都是链接 所有a要包含span
• 因为是滑动门，左右推拉，跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块 inline-block

<a href="#">
	<span> 首页</span>
</a>
a {
	display:inline-block;
	height:33pc;
	background:url(images/xx.jpg) no-repeat;
	padding-left: 15px;
}
a span{
		display:inline-block;
		height:33pc;
		background:url(images/xx.jpg) no-repeat right top;
		padding-right: 15px;
}

总结：

margin 负值之美

• 
  定位的盒子是最顶层可以压住其他盒子
  
  
  另一种方法 盒子本身就是定位的 则可以用 z-index:
  

三角形之美:

只要上面的红三角 border-color:red transparent transparent transparent

p{
	width:0;
	height:0;
	border-style: solid;
	border-width: 10px;
	border-color : red transparent  transparent transparent ;//其他不能为空 用transparent透明代替
	font-size:0;//为了兼容性
	line-height:0;
}

拓展

过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始 //搭配hover或focus使用)

div {
transition: width 1s ease 0s , height 1s ease 0s  //多组属性 用逗号隔开
transition: all 1s ease 0s;
transition: all 0.5s;
}

焦点元素

input:focus {
	width:80px;
	border:1px solid pink;
}

网站三大标签

标题命名，为了方便搜索引擎

网站说明 Description //在head里定义

<meta name="description" content="xxx" />

关键词 Keywords //页面关键词 是搜索引擎关注点之一 应该限制在6~8个关键词

<meta name="Keywords" content="网上购物xxx,xxx,xxx" />

字体图标

字体图标概念

• 网址最后加/favicon.ico 可获取标题图标，把它放在根目录下
• 在网页的head中引入 <link rel=“shortcut icon” href=“favicon.ico” / >也可以自己制作图标
  
• http://www.bitbug.net/ 可将自定义的png图片转化成ico网页的图标

增添图标实现步骤

• 在 https://icomoon.io/app/#/select 中下载图标后 把压缩包里的fonts放入根目录
• 点击压缩包里的demo.html 复制对应图标的小方框图标 放入body代码里
• 在样式里面声明字体:告诉别人我们自己定义的字体(要注意文字文件路径问题和字体名称font-family:’’) //css的style中定义

@font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }

span{
	font-family:'icommon';  //给盒子定义此字体   则成功转化成图标！
}

追加图标

• 在网址https://icomoon.io/app/#/select 点击左上角的import icoms,然后选择图标压缩包里的json文件，即可追加更多图标进去，重新下载一个全新得到图标压缩包
  
• 然后重新替换里面的fonts文件在根目录 (原来有的图标还是有,不影响原网页图标！)