企业做网站要多少钱,计算机网站开发与技术专业介绍,红色系列的网站,做网站设计的总结CSS
介绍
层叠样式表#xff08;英语#xff1a;Cascading Style Sheets, 缩写:CSS; 又叫串样式列表#xff0c;级联样式表#xff0c;串接样式表#xff0c;阶层式样式表#xff09;是一种用来为结构化文档#xff08;HTML或XML应用#xff09;添加样式#xff08;…CSS
介绍
层叠样式表英语Cascading Style Sheets, 缩写:CSS; 又叫串样式列表级联样式表串接样式表阶层式样式表是一种用来为结构化文档HTML或XML应用添加样式字体间距和颜色的计算机语言由W3C维护。CSS3是目前最新的版本已经被大多的浏览器所支持。部分属性在低版本或者IE浏览器中存在兼容性问题。
CSS不仅可以静态地修饰网页还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制支持几乎所有的字体字号样式拥有对网页对象和模型样式编辑的能力通过修改添加类名或属性或者是id名,来更换样式表切换样式。
样式表
1. 用户代理样式表**User - Agent Styles**| 默认样式表
定义这是浏览器默认提供的样式。浏览器有自己内置的一套样式规则用于在没有其他样式定义的情况下呈现 HTML 元素。这些样式确保了网页在最基本的层面上具有一定的可读性和可用性。不同的浏览器可能有不同的用户代理样式不过它们通常都遵循一定的标准如 HTML 和 CSS 规范。示例例如在大多数浏览器中h1标签默认会有较大的字号和加粗的字体样式ul无序列表标签会有项目符号的样式。这些默认样式是用户代理样式的体现还有一些内外边距我们在开发过程中常常会使用通配选择器直接将这部分样式清除掉以保证我们后续的布局更加清晰。应用场景在网页没有定义任何作者样式时用户代理样式发挥作用保证网页元素能以一种基本合理的方式显示。同时在开发过程中开发者也需要考虑用户代理样式避免自己定义的样式与默认样式产生冲突或不符合预期的叠加效果。
用户样式表User Styles
定义这是用户自己定义的样式用于覆盖网页原有的样式。用户可以通过浏览器扩展或者在浏览器的用户样式设置选项中添加自定义的 CSS 规则。
内联样式
定义在标签内部使用style属性来定义样式这种样式只对当前的标签生效优先级最高。特点 这种样式会与html结构紧密耦合在一起过多使用会造成html代码变得臃肿且难以维护实际开发中应该减少使用内联样式。
内部样式表
定义内部样式表是在html文档中的标签内部使用
外部样式表
定义 外部样式表是将样式定义在一个独立的.css文件中然后通过html文档中的标签将该样式表链接到html文档中.这种方式可以让多个html页面共享同一种样式。也是开发中最常用的便于维护。使用可以定义公共样式在需要的地方直接引入就行。
选择器
介绍
CSS由多组“规则”组成。每个规则由“选择器”selector、“属性”property和“值”value组成
选择器Selector多个选择器可以半角逗号,隔开。属性propertyCSS1、CSS2、CSS3规定了许多的属性目的在控制选择器的样式。值value指属性接受的设置值多个关键字时大都以空格隔开。
属性和值之间用半角冒号:隔开属性和值合称为“特性”。多个特性间用;隔开最后用大括号{ }括起来。
CSS里现在共有5种基本选择器Basic Selectors和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。
基本选择器
标签选择器h1、p等——elementname类别选择器class——.elementnameID选择器ID——#elementname万用选择器——* ns|* *|*ns表示命名空间会选中这个命名空间里的所有元素属性选择器也翻译为“通配符选择器”——[attribute]
属性选择器
属性选择器允许用户自定义属性名称而不仅仅限于idclass属性。属性选择器共有7种。
代码说明[attribute]元素有attribute的属性。[attributevalue]属性attribute里是value[attribute~value]属性attribute里使用空白分开的字符串里其中一个是value[attribute“value”][attribute^value]属性attribute里最前的是value[attribute$value]属性attribute里最后的是value[attribute*value]属性attribute里有value出现过至少一次
组合选择器
CSS里现在共有4种组合选择符Combinators
符号说明A B子代选择器选择A下一层的元素B只会选择下一层再往下将不会被选择A ~ B兄弟选择器选择与A同层的元素BA B相邻兄弟选择器选择与A相邻的元素B不能被任何元素相隔A B后代选择器包含选择符所有后代为b的都会被选择不管嵌套层数
其他选择器
CSS中还提供了伪元素选择器和虚拟类别选择器并不是css的术语常用伪类选择器实现虚拟类别的功能但用途单一一些常与其它选择器组合在一起使用。伪元素的元素主要用于选取与另一个选择器选中对象临近的元素。虚拟类别选择器用于选中处于特定状态或具有特定性质的元素。
伪元素选择器Pseudo-elements
伪元素选择器用于选择元素的特定部分而不是选择元素本身。它们通常用于在不添加额外HTML标记的情况下对元素的特定部分进行样式化。伪元素选择器以两个冒号::开始。
常见的伪元素选择器包括
::before在元素的内容前面插入内容。::after在元素的内容后面插入内容。::first-line选择元素的第一行。::first-letter选择元素的第一个字母。::selection选择用户选中的元素部分。
伪类选择器Pseudo-classes
伪类选择器用于选择元素的不同状态或基于特定条件的元素。它们以单个冒号:开始。
常见的伪类选择器包括
:hover当鼠标悬停在元素上时。:focus当元素获得焦点时。:nth-child()选择其父元素的特定子元素。:not()选择不符合指定条件的元素。:checked选择被选中的表单元素。
引入CSS规则的多种方式及其层叠性
介绍
CSS可以有多种引入方式一个网页可以引入多个CSS文件同一种CSS规则可以被反复多次添加。这使得CSS的使用方式非常灵活但也会频繁地出现规则冲突。同时对一个网页元素设定无法并存的2种样式时就会引起冲突。CSS的特色之一就是其解决规则冲突的方案。CSS的规则冲突可以分为不同来源之间的规则冲突和同一来源内部的规则冲突。CSS分层次、立体化的比较不同规则的优先级的方式就是所谓层叠性(cascading)的体现。
来源多样 作者样式 作者可以在他的HTML文件中确定一个外来的、独立的CSS文件外部样式表其优先级最低作者可以将CSS信息包含在HTML文件内内部样式表作者可以在一个HTML指令内结合CSS指令内联样式其优先级最高。一般这样做是为了在特殊情况下把上面来源的CSS抵消掉 客户端自定义样式client-side style sheet 浏览网页的用户可以自己在本地计算机上自己写1个CSS文件然后就可以在浏览器内通过设置好特定选项来加载自己的CSS文件。这个CSS文件可以用在所有的HTML文件上。当网页作者没有设定某项规则但存在对应的用户自定义规则时用户的规则就会起作用。假如作者的CSS文件与读者的相冲突浏览器会采用作者的规则。如果读者有特殊要求可以通过在自定义规则末尾添加!important提升自定义规则的显示优先权。(网页作者也可以使用!important给规则提升权限但是优先级别比不过由用户写的!important声明!important对于网页作者的意义仅在于网页开发阶段的规则冲突测试) 浏览器样式 假如外部没有特别指定一个样式的话一般浏览器自己有一个内在的样式。由于不同浏览器的默认样式并不一致所以讲究美观的网页的设计者一般喜欢去掉这个默认的样式。
规则特殊性
某个规则的特殊性也常被称为该规则的具体程度。规则特殊性的高低次序如下依次递减
行内样式ID选择器class选择器标签选择器通用选择器也就是通配符选择器用得少
特殊性优先原则
特殊性优先原则是最重要的优先级比较规则。当引起冲突的2种规则的特殊性存在差异时例如一个是通过ID选择器指定样式另一个是通过class选择器指定样式引擎将优先采用特殊性更高的样式。规则的特殊性的比较是最优先的。如果能直接判断出特殊性的差异就无需考虑其它规则了。
不同来源的规则优先性
不同来源的规则之间的优先原则是第二重要的。当规则来源相同时同为外部样式或同为内部样式下一步就需要比较不同类型来源的优先级别。
总地来说记住“行内样式优先于内部样式内部样式又优先于外部样式”即可应对多数常见的情形。
像网页浏览者自定义样式表的优先级别如何只有浏览器的设计者才需要考虑与网页设计者的关系不大。
如果考虑有可能出现的更复杂的来源冲突内容就比较多了。
但一般在写样式时应尽可能避免这些复杂情形的出现。具体来说一般情形下的采纳样式效果的优先级顺序为
行内样式内部样式在HTML中通过link标签直接引入的外部样式表在CSS中通过import语句间接引入的外部样式表浏览网页的用户自己定义的样式表需要手动加载浏览器默认的样式如标题有默认大小、段落之间有默认间距等不同浏览器的默认样式不完全一样
CSS中还有用!important修饰的重要性声明。如果计入重要性声明那么在以上规则的最前面还需要加上2条规则
用户从本地加载的重要自定义样式网页设计者设定的重要样式
权重分数比较机制
有时还会遇到选择器优先级无法直接判断而且规则的来源也相同的情形。如果网页设计者很少使用层次比较复杂的选择器比如多级的后代选择器那么必须比较权重的情况一般不会遇到一般要么是可以直接根据前面的规则判断出优先性结果或者是起冲突的2条规则的权重完全一样只能继续去看后一条比较出现次序的机制。此时CSS还有一套分数加权(或者说是分数累积)的机制用于解决此类规则冲突。先列出基本的分值
1个行内样式占1000分1个id选择器占100分1个class选择器占10分1个标签选择器占1分
组合使用多个基本选择器时不同选择器的得分会累加到一起。最终得分高的选择器其指定的样式会胜出
靠后者优先原则
当权重比较仍然不能分出优先级胜负时最后就是把守关底的“靠后优先”的原则了也就是后定义的样式优先级较高。如果起冲突的规则来源相同而且得分也相同那么最后的冲突解决法则就是看CSS代码出现的先后顺序。后出现的规则会覆盖掉与之优先级相当的先出现的规则。也可称作“后发制人”、“后来者居上”或“后浪推前浪”原则随便你怎么称呼。这种原则的适用情形很常见所以此规则也很重要。
视觉格式化模型
介绍
CSS的核心就是视觉格式化模型和属性值的计算。视觉格式化模型包含盒子生成以及定位浮动和一些特殊盒子模型溢出等。CSS 视觉格式化模型visual formatting model是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一
内容
1. 盒子的生成
视觉格式化模型会根据 CSS 盒子模型将文档中的元素转换为一个个盒子每个盒子的布局由以下因素决定
盒子的尺寸精确指定、由约束条件指定或没有指定盒子的类型行内盒子inline、行内级盒子inline-level、原子行内级盒子atomic inline-level、块盒子block定位方案positioning scheme普通流定位、浮动定位或绝对定位文档树中的其他元素即当前盒子的子元素或兄弟元素视口尺寸与位置所包含的图片的尺寸其他的某些外部因素
该模型会根据盒子的包含块containing block的边界来渲染盒子。通常盒子会创建一个包含其后代元素的包含块但是盒子并不由包含块所限制当盒子的布局跑到包含块的外面时称为溢出overflow。
