层叠样式表 cascading style sheets
1. 字体
自定义字体：将 .ttf 字体文件 保存在 font 目录下。 使用 @font-face 指定字体的名字和路径，注意只能写在外部，不能写在选择器里面
<style type="text/css">
@font-face {
font-family: "gadugi";
src: url("font/gadugi.ttf");
}
.box1{
font: 40px "gadugi";
}
</style>这里要注意的是，如果使用 iconfont 直接生成的话，前面要加 iconfont
<i class="iconfont icon-shanchu"></i>如果使用 icoMoon生成的话，可以不写iconfont
<i class="icon-shanchu"></i>原因在于：选择器，前者使用：
.iconfont{
font-family: "iconfont" !important;
}
.icon-shanchu:before{
content: "\e625";
}后者使用：[class^="icon-"] 类名以icon- 开头的所有元素，[class*=" icon-"] 类名包含 icon- (前面有个空格)的所有元素，地址
[class^="icon-"],[class*=" icon-"]{
font-family: "iconfont" !important;
}
.icon-shanchu:before{
content: "\e625";
}2. 透明：
之前是使用 rgb(0,0,0); 现在使用 rgba(0,0,0,1); 第4位表示透明度，取值范围 0~1
background-color: rgba(0,0,0,0.5);可以直接使用 opacity: 0.5; 设置透明度，取值范围也是 0~1
学到一招，F12控制台时，按shift，鼠标点击 rgba()能够切换为 #fffff 格式
3.文字阴影。 第二个是 x 轴偏移量，第三个是y轴偏移量， 第4个是 阴影的length(默认为0，越大则阴影越模糊)
text-shadow: pink 10px 10px 100px;这里的颜色当然可以使用 rgba(), rgb()
text-shadow: rgba(0,0,0,0.5) 10px 10px 100px;设置背景的大小：
background: url("1.png") no-repeat fixed;
background-size: 100% 100%;背景模糊：
filter: blur(10px);
==========================================================================================
这个主讲人讲的太烂了，换一个黑马的视频学习： 地址( • ̀ω•́ )✧这老师讲的既详细又有趣
1. css命名规范： 不要使用下划线 _ ，尽量使用 中划线 -
头部： header 内容： content/container 尾部： footer 导航： nav 子导航: subnav 侧栏: sidebar
栏目: column 页面外围控制整体布局宽度: wrapper 登录条: loginbar 标志: logo 题目 title
广告: banner 页面主体：main 热点: hot 新闻: news 下载：download 标签 tab 提示信息: msq
菜单: menu 子菜单: submenu 搜索: search 友情链接: friendlink 版权: copyright 滚动 scroll 小技巧tips
2. 一般网页不用纯黑色,用淡灰色: #3c3c3c
body{
color: #3c3c3c;
font-size: 16px;
}href 和 src 的区别: 地址
<link rel="stylesheet" href="1.css"/>
<script src="1.js"></script>display: block;
display: inline;
display: inline-block;
background-size: 50% 50%; 会导致图片失真. 最好只写一个, 这样会自动匹配,图片不会失真 background-size: 50%;
用的最多的是 cover
background: gray url(image/1.png) no-repeat;
background-size: cover;多背景 的情况: 使用逗号, 记住 要在 最后一组 定义 background-color;
background: url(image/1.png) no-repeat left top,
url(image/2.png) no-repeat right bottom gray;3. 凹凸效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background-color: #ccc;
}
div{
color: #ccc;
font: 700 80px "微软雅黑";
}
div.ao{
text-shadow: 1px 1px #000, -1px -1px #fff;
}
div.tu{
text-shadow: -1px -1px #000, 1px 1px #fff;
}
</style>
</head>
<body>
<div class="ao">凹的文字</div>
<div class="tu">凸的文字</div>
</body>
</html>这里 font: 700 80px "微软雅黑"; 其中 fonr-weight 为400的话相当于 noraml, 为700相当于 bold
4. 经常使用这种方式进行网页布局:
.header{
width: 960px;
margin: 0 auto;
}清除元素默认内外边距
* {
margin: 0;
padding: 0;
}行内元素(display: inline; ) 是没有上下外边距 和 上下内边距的, 只 可以设置 左右 内/外边距。
垂直方向的外边距会合并, margin-top 和 margin-bottom
如果是父子元素, 父元素的margin-top 将从 子元素的margin-top和父元素的margin-top中选出一个最大的值
<head>
<style type="text/css">
.father{
width: 200px;
height: 200px;
background-color: #bfa;
margin-top: 30px;
}
.son{
width: 100px;
height: 100px;
background-color: #fba;
margin-top: 60px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<hr/>
</body>这里 可以看出, 本意是 son 要与 father 拉开60px 的距离, 结果变成 两个一起 向下拉了60px距离.
解决这种问题: 可以给 father 添加 1px 的 border
border: 1px solid white;或者给 father 添加 1px 的 内边距
padding: 1px;或者给 father 添加 (开启BFC)
overflow: hidden; 
padding 不影响 盒子宽度的情况: 没有设置 width; 就不会被撑开. 或者继承了父元素的宽度(默认和父亲一样宽),但自己没有明确设置宽度,也不会被撑开
参照视频写了个[搜索趣图]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul li {
list-style: none;
}
.searchPis{
width: 250px;
height: 380px;
border: 2px solid rgb(236,239,242);
border-top: 4px solid #ff8400;
margin: 100px;
}
.searchPis h3{
height: 35px;
line-height: 35px;
font-size: 16px;
font-weight: normal;
padding-left: 8px;
border-bottom: 2px solid rgb(236,239,242);
}
.searchPis img{
margin: 8px 0 0 8px;
}
.searchPis ul li{
margin-left: 8px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: url("dot.png") left center no-repeat;
background-size: 5px 5px;
}
.searchPis li a {
margin-left: 14px;
text-decoration: none;
color: #484848;
}
</style>
</head>
<body>
<div class="searchPis">
<h3>搜索趣图</h3>
<img src="4.gif" width="234px" height="234px" alt=""/>
<ul>
<li><a href="#">皮卡丘，快使出十万伏特！！</a></li>
<li><a href="#">去吧，皮卡丘，就决定是你了！！</a></li>
<li><a href="#">皮卡，皮卡皮卡丘~</a></li>
</ul>
</div>
</body>
</html>结果:
5. 使用的方便程度: width > padding > margin
box-sizing: content-box; 以前的盒模型, 设置了 width, 再设置 padding 或 border, 盒子总宽度会被撑开
box-sizing: border-box; 新的盒模型,设置了 width, 就是固定大小,不会被 padding或border给撑开
box-shadow
浮动 float ---> 目的是 让多个块级元素在一行显示.
那使用 display: inline-block; 不是也可以吗? 存在的缺点是中间存在空格
, 你要写成 <div></div><div></div> 而不能写成 <div></div> <div></div> (书写代码时要写在一行,不能换行,不能有空格)
通常做法是 给 要浮动的子元素 添加一个将它包起来的 父元素,这样就不会影响之后的布局.
清除浮动的方式一: (这里 content 加了个点, 因为 firefox7.0版本前会生成空格)
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}清除浮动的方式二: 小米商城中的写法:
.clearfix{
*zoom:1
}
.clearfix:before,
.clearfix:after
content:" ";
display:table
}
.clearfix:after {
clear:both
}做的效果图: 这是我写的代码地址: github地址(*･ω< ) 
闲来无事，在codepen学着做了几个小样式:
第一, codepen地址 ヾ(◍°∇°◍)ﾉﾞ , 以及我写的代码地址: github地址(๑╹◡╹)ﾉ"""
第二, 地址 (*/ω＼*) ， 以及我写的代码地址: github地址ヽ(･ω･´ﾒ)
1，这个布局很有意思 display: flex; 目前只懂得如何居中显示,可能只有在codepen网站用的比较多
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}这里的 height: 100vh; 相当于 height: 100%; 但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开，和屏幕高度一致。
2，之前只知道 position: static; 是默认值，设置 top: 25%; left: 25%; 是肯定不起作用的, 反正都是默认的写不写都无关紧要，那它有什么作用呢? 一般用它来 清除定位， 一个原来有定位的盒子不想定位了，就可以加这句话。
position: relative; 自恋型 相对于自己原先的左上角, 不脱离标准流, 位置还占着.
position: absolute; 拼爹型 脱离标准流
这个图是我自己用CSS写的, 这个箭头是用两个<div></div>拼接起来的, github代码地址٩(๑❛ᴗ❛๑)۶
扫一扫
272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
