初学css样式

css是什么?Casading style sheet .英语不好只看懂了style sheet 类型表+casading (层叠)翻译成层叠样式表

那css用来最哈子的呢?是用来扩展html元素(标签例如<p>、<a>)的功能,也就是这个元素以什么样子的样式显示出来。比如<p> 默认它是一个段落标签,而且是很简单的显示出来,那如果这时候你需要段落文字要有颜色,要加背景颜色,字体要改变等等。原始的html直接实现的方式是:通过style属性。

例如:<p style="color:red,background-color:red,font-size:20px"> this is my style </p>

如果是css:

你的.css文件:

p {color:red,background-color:red,font-size:20px} 然后html文件就link到这个css文件,当你要使用p元素时,就是使用这用样式。

样式的基本格式:seletor {html属性:值} seletor就是html元素。

既然html有方法实现需求,那为什么还要用css?很简单,css使用起来方便,去掉代码重复性,效率高。就像上面的例子,你每个p元素都要重新写相同的style,那就不合理了吧。

注意:

多重样式将层叠为一个:样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

浏览器缺省设置

外部样式表

内部样式表(位于 标签内部)

内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,685评论 1 92
  • CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器...
    百作不死的学习阅读 4,941评论 0 7
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,693评论 32 459
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,488评论 0 30
  • 我默默的待在属于你的世界,静静的站着,看着人来人往,看着日出日落,看着一个个哭着笑着的脸。我可能就在你的城市,或在...
    冷榆阅读 4,411评论 21 32