前端学习笔记17/08/06——关于CSS学习的一些总结
2017-08-06 23:48
966 查看
最近学习CSS收获的一些总结。
内联样式
内部样式
外部样式
其优先级依次为内联样式>内部样式>外部样式。
在本次学习中,学到了另外一种——导入式。导入式的具体使用方法如下:
同样是从外部导入CSS文件,但是和link使用上面不同的是,link导入外部样式,会在页面加载的同时加载CSS样式,@import是在读取完HTML文件之后加载的。所以可能在加载慢的时候,@import会出现先加载出一个没有样式的网页。
标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器
又或者,需要选中
另外,在写法上还有这样一个细节,例如:
要选中这个结构中的li标签,之前我的写法大都是这样的:
但是推荐的写法是这样的:
这种写法在后续的使用过程中我发现,可以提高代码的可维护性。
链接伪类在书写的时候,又要给顺序要求,
:link>:visited>:hover>:active
以a标签为例,a:hover必须写到a:link和a:visited之后,才有效果,同样的,a:active必须写到a:hover之后,才有效果。
但是,单独的a:hover不受影响。
这里提一下根据权值判断优先级,如果在同一样式表中,权值相同的情况下,按照离被设置元素越近优先级越高的就近原则处理。在权值不同的情况下,根据权值判断,权值高优先级就高。
选择器的权值为:
例如:
根据上表:
2个标签选择器 id:1 class:1,1*2=2
1个类选择器 1*10
1个ID选择器 1*100
权值为 2+10+100=112
另外通过添加!important规则,调整样式规则的优先级。如:
float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动
这里有一个小心德体会:浮动元素脱离文档流!!但是依然占据正常文本流的文本空间。浮动最开始诞生是为了制造文字环绕图片的效果,后来的运用比较灵活。浮动元素不再占有原始的空间。
浮动元素会变成块状元素。
给个截图有助理解。
这里要注意的是:相对定位相对于该元素原来在常规流中的位置。
使用绝对定位和相对定位实现水平、垂直居中。
固定定位相对于视口,绝对定位默认相对于body,或者最近的定位的父元素。
可以用来给导航条上面添加一个banner图片,然后当导航滚动到顶部的时候,将导航条固定到顶部。
圣杯布局的基本思路:
首先给父容器整体设置一个padding值,上下为0,左右为左侧和右侧内容的宽度。
其次,中间部分先渲染,也就是中间部分的代码要写在左右两侧代码之前。中间部分宽度为100%,为父容器宽度。
左中右相应设置为相对定位,且左浮动。此时,左右部分会被挤到下方去。
首先对左边部分设置宽度,为父容器padding-left的值,然后对左部分的margin值进行设置。
margin-left: -100%;
在元素浮动的情况下,负边界值会导致div上移,-100%使该元素移动到中间内容部分的最左侧。
对右边部分设置宽度类似于左边部分,宽度为父容器padding-right的值,然后对margin值进行设置。此时margin-left的值与该部分元素宽度相同即可。
我的理解为,当他负出当前视口的时候,元素会上移到上一个元素的最右边。对于左边而言,margin:-100%就将该元素移动到了最左边,这个时候设置相对定位的left值,即可实现布局。具体可参考下面代码理解。
不同的是,双飞翼布局,需要把中间部分用一个div标签包裹起来,以便布局。双飞翼布局暂时在此不做详细说明,后面有时间可以在完善。
前端学习的路对我来说任重道远,这些总结很大程度上是针对我过去所学的查漏补缺,如果阅读的时候发现有哪些不对的地方,还希望亲们能告诉我,以便改正。谢谢。^_^
1、CSS使用方式
之前熟知的CSS使用方法有三种,内联样式
内部样式
外部样式
其优先级依次为内联样式>内部样式>外部样式。
在本次学习中,学到了另外一种——导入式。导入式的具体使用方法如下:
同样是从外部导入CSS文件,但是和link使用上面不同的是,link导入外部样式,会在页面加载的同时加载CSS样式,@import是在读取完HTML文件之后加载的。所以可能在加载慢的时候,@import会出现先加载出一个没有样式的网页。
2、选择器
CSS选择器部分大概学习了6种,标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器
2.1 写法
在类选择器的使用中,有一个写法,我在之前的应用中可能存在一些误解。比如:当h1标签和p标签同样有class="text"的时候,选中p标签的写法,应当为
p.text{…}
又或者,需要选中
class="red"的标签的后代标签a的写法为
p.red a{…},写法上面的一些细节在使用中要格外注意。
另外,在写法上还有这样一个细节,例如:
要选中这个结构中的li标签,之前我的写法大都是这样的:
.fix li{…}
但是推荐的写法是这样的:
.header .fix li{…}
这种写法在后续的使用过程中我发现,可以提高代码的可维护性。
2.2 伪类选择器
这里主要是链接伪类,如下:伪类 | 说明 |
---|---|
:link | 未访问的链接 |
:visited | 已访问的链接 |
:hover | 鼠标悬停状态 |
:active | 激活的链接 |
:link>:visited>:hover>:active
以a标签为例,a:hover必须写到a:link和a:visited之后,才有效果,同样的,a:active必须写到a:hover之后,才有效果。
但是,单独的a:hover不受影响。
2.3 优先级
CSS使用方法优先级一般情况上面有说过,但是有一点值得注意,由于浏览器的渲染方式自上而下,因此内部样式和外部样式优先级有时候还取决于<style></style>标签和
<link></link>标签的先后顺序。同样在最后被定义的优先级最高。
这里提一下根据权值判断优先级,如果在同一样式表中,权值相同的情况下,按照离被设置元素越近优先级越高的就近原则处理。在权值不同的情况下,根据权值判断,权值高优先级就高。
选择器的权值为:
选择器类型 | 权值 |
---|---|
通配符选择器 | 0 |
标签选择器 | 1 |
类选择器和伪类 | 10 |
ID选择器 | 100 |
行内样式 | 权值为1000 |
#header div.nav ul{…}
根据上表:
2个标签选择器 id:1 class:1,1*2=2
1个类选择器 1*10
1个ID选择器 1*100
权值为 2+10+100=112
另外通过添加!important规则,调整样式规则的优先级。如:
div{color: red !important;}
3 浮动
float有四个参数float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动
这里有一个小心德体会:浮动元素脱离文档流!!但是依然占据正常文本流的文本空间。浮动最开始诞生是为了制造文字环绕图片的效果,后来的运用比较灵活。浮动元素不再占有原始的空间。
浮动元素会变成块状元素。
给个截图有助理解。
4 定位
这里要注意的是:相对定位相对于该元素原来在常规流中的位置。
使用绝对定位和相对定位实现水平、垂直居中。
固定定位相对于视口,绝对定位默认相对于body,或者最近的定位的父元素。
position:sticky磁贴定位就比较有意思了,可以说是固定定位的升级版。现在很多网站的导航都会用到。
可以用来给导航条上面添加一个banner图片,然后当导航滚动到顶部的时候,将导航条固定到顶部。
5 圣杯布局和双飞翼布局
5.1 圣杯布局
关于圣杯布局的由来可以自行搜索,在此不罗列了,圣杯布局主要实现的效果如下图所示:圣杯布局的基本思路:
首先给父容器整体设置一个padding值,上下为0,左右为左侧和右侧内容的宽度。
其次,中间部分先渲染,也就是中间部分的代码要写在左右两侧代码之前。中间部分宽度为100%,为父容器宽度。
左中右相应设置为相对定位,且左浮动。此时,左右部分会被挤到下方去。
首先对左边部分设置宽度,为父容器padding-left的值,然后对左部分的margin值进行设置。
margin-left: -100%;
在元素浮动的情况下,负边界值会导致div上移,-100%使该元素移动到中间内容部分的最左侧。
对右边部分设置宽度类似于左边部分,宽度为父容器padding-right的值,然后对margin值进行设置。此时margin-left的值与该部分元素宽度相同即可。
我的理解为,当他负出当前视口的时候,元素会上移到上一个元素的最右边。对于左边而言,margin:-100%就将该元素移动到了最左边,这个时候设置相对定位的left值,即可实现布局。具体可参考下面代码理解。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣杯布局测试</title> <style type="text/css"> /*此处写代码*/ *{ margin: 0; padding: 0; } body{ min-width: 900px; } /*此处写代码*/ .nav{ height: 100px; line-height: 100px; background-color: black; } .nav img{ display: block; float: left; } .nav ul li{ float: right; color: #fff; margin-right: 50px; list-style-type: none; font-size: 20px; } .nav li:hover{ color: orange; cursor: pointer; } .content{ padding:0 220px 0 200px; } .footer{ width: 100%; background-color: black; height: 100px; line-height: 100px; color: #fff; } .footer li{ float: left; list-style-type: none; width:100px; } .footercon{ margin:0 auto; width: 600px; } .middle, .left, .right{ position: relative; float: left; min-height: 600px; } .middle{ width:100%; background-color: #FFC0CB; } .left{ width: 200px; background-color: #FFEFDB; margin-left: -100%; left: -200px; } .right{ width: 220px; background-color: #ADD8E6; margin-left: -220px; right: -220px; } .middle img{ display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto auto; } </style> </head> <body> <!-- 此处写代码 --> <div class="nav"> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"> <ul> <li>手记</li> <li>猿问</li> <li>实战</li> <li>职业路径</li> <li>课程</li> </ul> </div> <div class="content"> <div class="middle"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" alt="tu1"> </div> <div class="left"> </div> <div class="right"> </div> <div style="clear:both;"></div> </div> <div class="footer"> <div class="footercon"> <ul> <li>网站首页</li> <li>企业合作</li> <li>人才招聘</li> <li>联系我们</li> <li>常见问题</li> <li>友情链接</li> </ul> <div style="clear:both;"></div> </div> </div> </body> </html>
5.2 双飞翼布局
双飞翼布局算是改良以后的圣杯布局,这里面不需要用到定位,只需要浮动和负边距就可实现。不同的是,双飞翼布局,需要把中间部分用一个div标签包裹起来,以便布局。双飞翼布局暂时在此不做详细说明,后面有时间可以在完善。
前端学习的路对我来说任重道远,这些总结很大程度上是针对我过去所学的查漏补缺,如果阅读的时候发现有哪些不对的地方,还希望亲们能告诉我,以便改正。谢谢。^_^
声明:
以上截图部分来自慕课网的视频,如有侵权,请告知,以便删除。相关文章推荐
- 前端html与css学习笔记总结篇(超详细)
- 关于HTML+css 的一些学习笔记
- 前端html与css学习笔记总结篇(超详细)
- 【前端学习笔记】关于CSS通过一个块改变另一个块的样式
- 关于css的一些学习笔记
- 大前端学习笔记【七】关于CSS再次整理
- 学习C#的一些笔记(关于继承与多态,static关键字)
- 关于一些现成加密算法的学习笔记
- 学习WEB标准总结的一些CSS/XHTML知识小结第1/3页
- 数据结构学习笔记 --- 线性表 (一些常见的关于链表的算法和面试题)
- 前端学习笔记番外篇:仿WIN8 Metro UI DIV+CSS练习
- 关于抽象代数(16、17)中一些零散概念间联系的个人分析总结
- MySQL学习笔记_关于MySQL的字符类型VARCHAR长度知识总结
- Web前端学习笔记(二)——CSS中的选择符
- MySQL学习笔记_关于MySQL的整数类型字段长度知识总结
- 关于学习asp.net的一些总结
- Groovy学习笔记之关于闭包的一些补充
- 前端CSS学习笔记
- Java学习笔记-关于默认类型或访问权限的总结
- 学习MS-SQL Sever 的一些笔记总结