HTML/CSS-CSS-5节课

一 是什么

定义:cascading style sheets 层叠 样式 表

作用:存储样式(定义如何显示html元素,长什么样),做到内容和表现分离,即运行显示的效果

例子:h1 劈里啪啦,html源代码相同在不同浏览器显示效果不同,chriome和IE,浏览器自带样式

           对于开发人员,一样好,所以需要自定义样式

二 内联样式

3引入方式:内联样式 内嵌样式 外联样式 

定义:利用标准属性style定义样式属性值:css样式代码

缺点  只对当前元素有效,需要重复定义,html css没有有效分离

<h1  pppp style=‘color:  ;' >   </h1>

三 内嵌样式

利用style定义样式,还有type属性<style='text/css'>,text/css'表示当前定义的css样式内容,html'5可以省略

优点:不需要重复定义,缺点html css没有有效分离

<style>  h1 {color=‘’} h1 </style>

四 外联样式

利用link元素引入外部CSS

属性:rel:值为stylesheet,当前引入的CSS;type: 值为’text/css‘ ,当前引入的CSS;href:设置引入css文件的路径

优点:分离了,但需要加载多(html1个+n个css)个文件速度变慢

<link rel='stylesheet' href='style.css'>  style.css为在同一层的CSS文件

有的教材会把内嵌外联合称为外联           

五 语法                                                             声                  明

h1                          {                                          color         :              light                    ;                                        }

选择器:定位     声明块:包含多个声明     属性名称    分隔符       属性值             结束符                           另外半个声明块       

                                                                   css预定义的             不同属性不同值   (没有会小红线报错,表明一个声明结束,                                                                                                                                           分隔两个声明,最后一个可以没有,最好有)

猜你喜欢

转载自blog.csdn.net/qq_21740193/article/details/82844542