一 在网页中使用CSS有3种方法: 1 元素内部的CSS 语法:<元素名称 style = "属性:属性值"></元素名称> 示例:<image src = "images/org.jpg" style = "border:5px solid #333333;width:400px;height:500px" /> 说明:该样式定义图片的边框为5px的实线边框,颜色为深灰色,同时定义了图片的大小。 2 页面头部的CSS 语法: <style> 选择符{属性:属性值;} </style> 注意: 1) 从页面头部调用CSS是将CSS写在页面的head元素中 2)使用头部调用CSS时,在页面中国必须有相应的调用代码, a. 类选择符的调用代码:<元素名称 class = "类选择符名称"></元素名称> b. ID选择符的调用代码: <元素名称 id = "id选择符名称"></元素名称> 示例: <head> <style> .font{ font-size:72px;color:#333333; position:absolute;top:50px;left:50px; border:2px solid #000;} </style> </head> <body> <div class = "font">头部调用CSS></div> </body> 3) 外部的CSS A. 通常有两种写法: a. 使用link元素调用CSS 语法:<link rel = “stylesheet”href = "css文件路径" type = "text/css" /> 其中rel = "stylesheet"指的是调用的相关文件的样式为样式表文件,type = "text/css"指的是文件的类型为样式表文本 b. 使用@import调用CSS 语法:<style type = "text/css">@import url(css文件路径);</style> 说明:@impor的调用方法可以也可以写在CSS文件中,用来调用其他的CSS B. 两种方法的区别: @import的调用方法只能在样式文件中或者在style元素中才能正常使用,而在link元素调用的样式文件中依然可以使用@import来再次调用其他的样式文件 C. 示例: <link href = "style/mai.css" rel = "stylesheet" type = "text/css"/> main.css文件中的代码: .@import url(css1.css); .main{ border:1px solid #666666;margin:100px auto; font-size:20px;}二 样式的优先级 在元素中直接定义CSS的优先级最高,其次是在头部调用CSS样式,最后是从外部文件中调用CSS样式 元素中直接定义CSS --> 在头部调用CSS样式 --> 从外部文件中调用CSS样式
|