学习css

学习资料 :
Google: 关键词 MDN
//重要 CSS Tricks shape(�形状)
Google: 阮一峰 css
张鑫旭的 240 多篇 CSS 博客
Codrops 炫酷 CSS 效果
一本书: CSS揭秘
CSS 2.1 中文 spec
Magic of CSS 免费在线书

如何做横向布局（float + clearfix）
如何取色、量尺寸、预览字体（Word）
如何使用开发者工具查看样式、继承样式
四种引入 CSS 的方式：style 属性、style 标签、css link、css import
常见 CSS 属性：
font-family font-size font-weight
ul、body 的默认 margin 和 padding
color、background-color、margin、padding
line-height

让li从竖着变成横着

左浮动 right右浮动
让ul前面的原点消失

加上边框属性
border: 1px solid red;

//重点浮动的布局问题
第一步: 在子元素中加上
在子控件加上class类

在子控件加上class类

第二步:在父元素上class加上clearfix:
例如:

.clearfix::after{
content: '';
display: block;
clear: both;
}

//去掉下划线
text-decorarion:none;
//字体加粗
font-weight:bold;

//当字体悬停的关键字:hover
.topNavbar > nav > ul > ui > a:hover{
//例如加个底部边框
}

color是可以继承的

position: fixed; 脱离文档流就是只针对屏幕做frame,
脱离文档流的时候 width:100% 会出bug;

宽度100%会加上左右padding的值导致宽度超长
解决方法:
在最外面的div里面加个div
外面的div设置 pandding上下20
里面的dic设置 pandding左右20 完美解决~!

image:
background-position 第一个center背景水平居中
第二个center背景竖值居中

background-size:cover 盖住所有的面积,按照比例缩放

margin-left/right: auto 控件水平居中死记

内联元素制定宽高没有效果. 使用这个字段display: inline-block;即可解决
/*
display: inline-block;
width: 70px;
height: 29px;
line-height: 29px;
text-align: center;
*/
这是新手的做法
另外一种做法设置内边距属性: padding: 3px 16px;
设置内边距就可以根据文字去设置宽高. 这样减少开发难度.

//重点
css画一个三角
div{
border: 10px solid red;
width: 0px;
height: 0px;
border-top-color: black;
border-right-color: blue;
border-left-color: green;
}

box-sizingh:
两种属性 border-box属性: 是包含pandding和margin的边距
content-box属性:是不包含pandding和margin的边距

//八卦的css
.yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

使用iconfont的三步骤
第一. 申请账号把图片拉入一个创建的项目中
第二. 点击symbol 显示在线链接出现下面的js 点击右边的帮助文档一步复制在代码中操作即可

svg图片上面靠边了下面有点间距 vertical-align: top;解决问题不知道为啥

css进阶
伪元素例如div
div::before{
content:" ["
}
div::after{
content:" ]"
}
为什么叫伪元素因为是选不中不存在的元素
一定要给content属性不然不会给值
还有要给display:block;
如果你给了这个子元素position:absolute 绝对定位
父元素position:relative 相对定位
就可以不加display:block

八卦其实就是加两个伪元素然后两个border

关键帧动画转
@keyframes: spin {
form{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
给元素添加
animation-duration:3s; //3秒周期
animation-name: spin; //元素
animation-iteratin-count: infinte; //永久动画
animation-timing-function: linear; //匀速

最关键的就是直接查css animation MDN(重要) 然后根据提示的代码更改

下载东西按钮使用a标签:例如 _block代表新开的窗口 download代表下载
下载简历

搜索css shadow generator geogle阴影的查询代码

transition: box-shadow 1s; 一秒钟阴影变化

子元素里面的偶数 even偶数 odd单数
li:nth-child(even)

display: inline-block; 根据元素内容限制宽度
vertical-align: top; 修复上面引用造成的bug 底部会上来一些

学习css

你可能感兴趣的:(学习css)