文章目录
选择器
-
选择器基本知识
行内样式表
<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 :after{}此方式清除浮动最好
<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文件在根目录 (原来有的图标还是有,不影响原网页图标!)