文档章节

前端初学-关键知识总结01

想要变成一个全栈
 想要变成一个全栈
发布于 2016/11/05 21:28
字数 433
阅读 9
收藏 0

样式的优先级

样式的优先级按照“就近原则”:行内样式(标签内的style) > 内嵌样式(head中的style) > 链接样式(link) > 导入样式(style标签中@import)

链接样式是浏览网页的时候先将外部的CSS文件加载到网页中,在浏览器渲染页面,这个页面与我们预期的页面效果是一致的。

导入样式浏览器会先把页面渲染出来(这时候的页面效果是除导入样式的页面效果),然后再导入外部样式,然后再次渲染页面,这时候才是我们预期的页面效果。

 

选择器

 

<!-- 标签选择器 -->

p{

font-size:14px;

}

<!-- 这样做所有的p标签的字体大小就都是14个像素大小 -->

 

<!-- id选择器 -->

#keeinfo{

font-size:14px;

}

<!-- id选择器更具有针对性 给一个p标签指定id然后此p标签会与其他p标签字体大小不同 -->

 

 

<!-- 类选择器 -->

.keeinfo{

font-size:14px;

}

<!-- 使页面中的标签(可以是不同的标签)具有相同的一类样式 -->


<div class="keeinfo yellow green">一个标签可以有多个类选择器</div>

<div id="keeinfo" class="keeinfo">id class可以同时用于一个标签</div>
*{

margin:0;
padding:0;

}

<!-- 对所有标签进行样式的定义 -->


body,div,p,a,ul,li{

margin:0;
padding:0;

}

<!-- 选择器的集体声明对写上的标签进行基础样式的通用定义 -->


<!-- CSS代码的优化 -->

#header{font-size:14px; background:#ccc;}
div{font-size:14px; background:#ccc; margin:0;}
h1{font-size:14px; backgronud:#ccc; margin:0; padding:0;}
p{padding:0;}
.keeinfo{background:#ccc; margin:0; padding:0;}



#header,div,h1{font-size:14px;}
#header,div,h1,.keeinfo{background:#ccc;}
div,h1{margin:0;}
h1,p,.keeinfo{padding:0;}


 

© 著作权归作者所有

上一篇: 拥抱docker
下一篇: 拥抱docker
想要变成一个全栈
粉丝 0
博文 2
码字总数 433
作品 0
榆林
程序员
私信 提问
学习前端开发,一段心路历程,这根本没有速成的方法

     本篇文章我就来给大家说一说我在学习前端开发过程中的一些经验,我把它们总结成了十条警言,希望能够对你的学习带来一些小的帮助。            希望收藏了我写的文章的你同...

学习web前端
2017/10/21
0
0
适合初级前端程序员:闭包是什么?

是什么? 当一个嵌套的内部函数引用了外部函数的变量或者函数时,外部函数在执行时就产生了闭包 典型的闭包 将另一个函数作为另一个函数的返回值 将函数作为实参传递给另一个函数调用 闭包的...

IT智云编程
2018/07/12
0
0
Web前端初学者都会遇到的问题

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
2018/05/24
0
0
腾讯校招专场:研一学生如何用Python 500行代码面试,最终拿到25K月薪!

从三月份开始,就投入了紧张的校招实习生准备当中。因为自己深知这次机会的重要性以及必要性。一开始,只锁定了腾讯和阿里的内推。 这篇文章分享之前我还是要推荐下我自己的Python五千人群:...

python达人
2017/12/26
0
0
web前端小案例-css制作彩色圆环弹跳

彩色圆环弹跳效果 这个效果是由纯css代码制作,布局相对简单,有正在学习前端基础的小伙伴可以用来练习一下,现在越来越多的企业重视起基础知识了,所以有要找工作的小伙伴和正在找工作的小伙...

急速奔跑中的蜗牛
2018/02/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python学习10.04:Python list列表使用技巧及注意事项

前面章节介绍了很多关于 list 列表的操作函数,细心的读者可能会发现,有很多操作函数的功能非常相似。例如,增加元素功能的函数有 append() 和 extend(),删除元素功能的有 clear()、 remo...

太空堡垒185
34分钟前
4
0
新手插画学习的方法?教你如何自学?

插画学习的方法?教你如何自学? 从小喜欢画一些漫画头像随笔画,但是其实没有基础。个人偏好小清新手绘风的插画(如下图),每每看到都希望自己能画出这样的作品。 我其实很想说画这种美术功...

huihuajiaocheng
39分钟前
5
0
面试总结

一、2019.10.15日上午交子大道中海国际艾迪泰科面试总结 1、领导比较有亲合力,就是办公环境没有隔挡,不是很喜欢办公环境 2、成都这边人员太少,感觉不到规模 3、离家太远 1、实现clone(); ...

gtandsn
50分钟前
5
0
CentOS 7 部署 tesseract-ocr

官方地址 github yum-config-manager --add-repo https://download.opensuse.org/repositories/home:/Alexander_Pozdnyakov/CentOS_7/ 若提示 yum-config-manager: command not found 执行以......

阿白
51分钟前
3
0
JAVA比较器中comparator的使用

一个专用的比较器Comparator Comparator是一个专用的比较器,当一个不支持自比较或者自比较函数不能满足要求时,可写一个比较器来完成两个对象之间大小的比较。Comparator体现了一种策略模式...

daxiongdi
51分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部