使用CSS样式表的方式及样式表特征

mac2024-05-12  25

CSS3 样式表由一个或多个CSS3样式组成,它分为内部样式表和外部样式表。两种样式表没有本质不同。 一个style标签可以定义一个内部样式表。 如果网页包含多个style标签,就表示该文档包含了多个内部样式表。一个CSS3文件可以定义一个外部样式表,这是一个文本文件,扩展名为.css。

外部样式表必须导入到网页文档中才能有效。

使用CSS样式表的方式 ·1、内联方式 作用:将样式定义在单个的HTML元素中 语法: 样式声明语法: 样式属性:属性值 eg: 1、文本颜色的样式属性 color:red; 2、背景颜色的样式属性 background-color:green; 3、文本大小的样式属性 font-size:24px; 2、内部样式表 1、特点 应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性,同时体现内容与表现相分离 2、语法 1、在 元素中 增加 元素中 编写若干 “样式规则” 样式规则语法规范: 1、选择器 作用:规范了页面中哪些元素能够使用声明好的样式 eg: 元素选择器 p div span 2、若干样式声明 属性:值;属性:值; 选择器{若干样式声明}

3、外部样式表 1、作用 以独立的css样式表文件保存样式规则,可以应用在各个页面中 2、使用步骤 1、创建单独的样式表文件(*.css) 在该文件中可以编写若干样式规则 2、在需要使用该样式表文件的页面上,引入样式表文件 在页面的元素中添加以下代码: 4、基本排错 1、Styles 中提示 “Unknown property name” 说明 样式属性名称 写错了 2、Styles 中提示 “Invalid property value” 说明 样式属性值 写错了

CSS样式表特征 1、继承性 大多数CSS属性是可以被继承的 2、层叠性 可以为一个元素定义多个样式规则 多个样式规则中,如果样式声明不重复的话,那么则可以层叠为一个样式规则 3、优先级 样式定义冲突(重复)时,会按照不同样式的优先级来应用样式 低:浏览器缺省设置(User Agent) 中:外部样式表或内部样式表 就近原则 高:内联样式

注意:继承的样式和自定义样式冲突时,永远都是以自定义的为主 4、!important 规则 显示调整样式属性的优先级 只要 !important 出现,永远都以!important 的为主 语法: 选择器{属性:属性值 !important;}

最新回复(0)