CSS:层叠样式表(英文全称:Cascading Style Sheets)
后缀名:css
标志 style
对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
用 属性 和 属性值 来表示 style=" 属性 : 属性值
一 分类
内联:写在标记的属性位置,优先级最高,重用性最差
< div style = "width : 100px; height : 100px; background-color : red; bordet : 1px solid blak ">
</div >
内嵌:写在页面的head中,优先级第二,重用性一般
<style type = " text/css ">
p { -- 只对 p 标签起作用
样式
} -- 标签的 高、宽、颜色等 都是一种样式
外部:写在一个以css结尾的文件中,通过引用来建立文件与html页面的关系,优先级最低,但是最灵活最好用,重用性最好
————————————————————
. p {
样式 -- css样式文件 相当于 <style type = " text/css "> 直接写就可以
}
二 选择器
主要针对外部内嵌两种形式
id选择器: # id,优先级最高,只能选中一个元素
| # a { |
| 样式 |
| } |
-————————-
调用 <div id = " a " > <div>
class选择器:. class,优先级第二,能选中一堆元素
| . b { |
| 样式 |
| } |
-————————-
调用 <div clss = " b " > <div>
标签选择器:标签名 div span 等给指定标签一个样式,优先级最低,能选中一堆元素,不建议使用
| div { |
| 样式 |
| } |
-————————-
调用 <div > <div> -- 给所有的 div 套一个样式
特殊选择器:
并列:逗号隔开
| . d1, .d2, #d3 { | -- d1,d2,d3 样式相同
| 样式 | -- 可以用在不同的父集子集中
| } |
-————————-——---
调用 <div clss = " d1" > <div>
<div clss = " d2 " > <div>
< div id = " d3 " > <div>
后代:空格隔开
| .d2 sp { |
| 样式 | -- 在标签 d2 中的 class =“ sp ”标签 (父集,子集)
| } |
-————————-
调用 <div class = "d2" >
<span class = "sp"> </span>
</div>
选择器的优先级
同一类型选择器,内嵌高于外部
不同类型选择器,id 最高(如 外部 id 高于内嵌 class)
内联优先级最高