`

CSS

    博客分类:
  • CSS
阅读更多
CSS的全称叫做:Cascading Style Sheets.意思是:层叠样式表。这个东西是干什么的呢?是一种。一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。其实可以类比于word文档的创立。HTML类比于word而CSS类比于段落结构之类的功能。不同的是CSS和HTML是用于前端的。
CSS的主要目的是将文件的内容和显示分隔开来从而使文件的可读性加强,文件的结构更加灵活,开发者可以自己来决定文件的显示。
CSS既然是一种语言,那么必定存在规则。CSS是由两个部分构成的选择器(selector)和声明(declaration),声明可以是多条。
selector {declaration1; declaration2; ... declarationN }

既然说CSS能使HTML显示的元素进行改变,是那一部分实现的?
是由选择器实现的。选择器通常是我们所需要改变样式的HTML元素。
那么声明是什么?
声明是由一个属性和一个值组成可以理解成哈希表,或者键值对。
所以上面的语句可以改写成:
selector {property: value}

举一个简单的例子来进行说明:
h1 {color:yellow; font-size:20px;}

其中h1是选择器部分,color和font-size是属性部分,yellow和20px是值。(其实声明部分真的很像哈希表。同样是由大括号来包围,同样包括键值对,但是请注意不同的部分是:哈希表的元素之间是用逗号来分隔而这里的元素之间是用分号来分隔)
CSS对于大小写是不敏感的,但是HTML里的class和id对大小写是敏感的。所以为了养成一个良好的编程习惯,我们还是该大写就大写,该小写就小写。规规矩矩来,一步一步走。
在CSS中,值的写法种类有很多种,就拿颜色来讲,比如说红色可以这么表示:
#ff0000
#f00
red
rgb(255,0,0)
rgb(100%,0%,0%)
其中第一种表示方法是十六进制的颜色值,第二中表示方法是CSS的缩写形式,第三种表示方法是英文单词,第四种和第五种表示方法是RGB值。第五种的表示方法需要注意的是:RGB用%符号的时候,无论数字是多少都得加该符号。但是0后面根的是一个单位的时候,无论单位是什么0就是0,没有单位。
如果有多个选择器,但是想要执行同一个声明的时候,可以对选择器进行分组。例如:
h1,h2,h3,h4,h5,h6 {
  color: red;
  }

就像代码中所写到的:选择器之间必须用逗号隔开。上述声明的意思是:所有的标题元素都是红色的。
CSS是有继承的,但是继承的时候也会出现问题,就像没有立遗嘱的父亲死去,家人为争夺财产而不合一样。
所以现在的浏览器一般都会把‘遗嘱’立好。在一些旧的浏览器中"Be Kind to Netscape 4"的冗余法则也是可以达到相同的目的的。

















分享到:
评论

相关推荐

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    birt公用CSS样式

    在创建BIRT报表时,CSS(Cascading Style Sheets)样式起到了至关重要的作用,它们用于控制报表的外观和布局,使其符合用户界面的需求。本主题将深入探讨“birt公用CSS样式”,并结合提供的文件内容进行详细说明。 ...

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    前端开源库-postcss-css-variables

    在前端开发领域,CSS Variables(也称为CSS自定义属性)是一种强大的工具,它允许开发者在整个样式表中定义和重用变量。PostCSS 是一个JavaScript工具,它可以解析CSS,执行一些任务,然后输出新的CSS。Postcss-css-...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    pycharm中显示CSS提示的知识点总结

    我们用pycharm写CSS的时候,是不是苦于没有提示,那么pycharm中如何显示CSS提示呢?下面小编给大家分享一下。 首先点击左上角的file菜单,选择Setting 接着选择Editor下面的Inspections选项,如下图所示 然后在...

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    《CSS权威指南》第四版是CSS领域的重要著作,作者Eric A. Meyer凭借其深厚的行业经验和智慧,对CSS的各个方面进行了详尽的探讨。 本书从基础讲起,逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...

    网页设计期末大作业+html+css

    9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生网页作业,div css js 等通过dreamwear的工具实现规范化,比如文件夹的规范,代码写作的规范,...

    HTML外部引用CSS文件不生效原因分析及解决办法

    就比如我在css目录下面写了一个css样式文档:style.css。这时里面只有一句话: XML/HTML Code复制内容到剪贴板 body {  background-color: #ddd;  }  然后再我的html文件里面去引入这个外部css: XML/...

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS酷站CSS特效华丽CSS

    在本篇内容中,我们将深入探讨"CSS酷站"、"CSS特效"和"华丽CSS"相关的知识点,以及通过一些CSS精美示例来展示其魅力。 首先,"CSS酷站"是指那些运用创新和独特CSS技巧设计的网站,它们通常具有引人入胜的视觉效果和...

    Qt css样式大全+详细书签pdf.zip

    而Qt中的CSS(Cascading Style Sheets)样式则允许开发者通过类似网页CSS的方式定制Qt界面的外观和布局。本资源"Qt css样式大全+详细书签pdf.zip"包含了丰富的Qt CSS样式的教程和参考资料,旨在帮助开发者深入理解和...

    将AE制作的动画导出为CSS代码

    "将AE制作的动画导出为CSS代码"这一主题探讨的是如何将AE中的动画转换成可应用于网页的CSS代码,以便在网页上实现类似的动态效果。 AE提供了一种方式,通过插件或自定义脚本来将动画的关键帧数据转化为CSS3关键帧...

    DIV+CSS漂亮的样式

    本资源包“漂亮样式CSS”包含了几个精心设计的`DIV+CSS`样式示例,特别是3D按钮和层模拟窗口移动的效果,这些都是现代网页设计中非常流行和实用的元素。 首先,3D按钮是提升网页界面视觉吸引力的重要元素。在CSS3的...

Global site tag (gtag.js) - Google Analytics