CSS
css的导入与基础选择器
css是什么
css也是一门标记语言,主要用作修改控制html的样式
css书写的位置(导入)
css是用来控制页面标签的样式,但是可以根据实际情况书写在不同的位置,
放在不同位置有不同的专业叫法,可以分为行间式、内联式和外联式三种
行间式
css样式直接书写在标签的style全局属性中,一条样式格式为(样式名:样式值)
可以同时出现按多条样式,样式之间用封号隔开
<div ></div>
内联式
css样式书写在head标签的style标签中,样式格式为选择器 {样式块}
可以同时控制多个标签的样式,增强代码的复用性
<style> .h1 { width: 10px; height: 20px; } /*css的注释语法*/ /**/ .d1 { width: 10px; height: 20px; } </style>
外联式
css的语法和内联式相同,但样式写在css文件中,在html页面中用link标签引入css文件
可以团队合作编写样式,代码复用性增强
<link rel="stylesheet" type="text/css" href="css/my.css">
rel="stylesheet":引入的层级样式表,也就是css文件
type="text/css":引入文件采用的是css语法书写文本类型代码
href="css/my.css":采用相对路径引入目标css文件
css的基础选择器
通配选择器
<style> * { height: 10px; } /* 特定标识符:星号(*) --> 可以表示页面所有标签的名字 */ /* 因为通配选择器可以表示页面的所有标签,所以不建议使用 */ </style>
标签选择器
<style> h1 { height: 10px; } /* 特定标识符:标签名 */ /* 标签选择器控制页面中所有标签名为标签选择器名的标签 */ /* 例如上面的标签选择器名为h1 页面中所有的h1标签都会被他匹配控制样式*/ </style>
class选择器
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
id选择器
<style> #d1 { height: 10px; } /* 特定标识符:井号(#) */ /* id选择器控制页面中标签全局属性id值为id选择起名的唯一标签 */ /* 例如上面会匹配控制所有id值为d1的标签 */ </style>
选择器优先级
当多个选择器同时匹配上同一个标签的时候,设置
相同属性时就会涉及到谁的设置生效(优先级高)
优先级按作用域的大小区分,作用域越小优先级越高
important > 行间式 > id > class > 标签 > 通配
如果优先级相同,那么谁在下面谁生效