<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种导入css的方式</title> <!--内部导入--> <style> body { margin: 0; } </style> <!--外部导入--> <link rel="stylesheet" href="选择器的复习.css"> </head> <body> <!--行内样式--> <p style="color: red">这是一个有颜色的标题</p> </body> </html>
/*注释是代码之母 这就是单行注释*/ /*这是一个多行注释 多行注释 123 */ /*css有叫做层叠样式表 每一个css 都由 两部分组成 第一是 选择器 第二是 声明 声明有分为属性 和 值*/ /*基本选择器分为 标签选择器/元素选择器 id选择器 类选择器 和 通用选择器 下面一以介绍*/ /*标签选择器/元素选择器*/ div { color: red; } /*id选择器*/ #id {background: red} /*类选择器*/ .class { font-size: 50px; } /*通用选择器*/ * {font-weight: bold} /*然后就是 分组选择器 分为 儿子选择器 后代选择器 毗邻选择器 弟弟选择器 */ /*后代选择器*/ /*指定 div 下所有的 span*/ div span {color: red} /*儿子选择器 div 下一级的所有的 span*/ div > span {color: red} /*毗邻选择器 紧挨着 div标签后的标签*/ div + span {color: red} /*弟弟选择器 div 同级标签*/ div ~ span {color: red} /*属性选择器 分为 具有某个元素名 具有某个元素名 和 值 具有某个 元素名 和 值 和 标签 看到中括号 就反应是属性选择器*/ [title] {color: red} [title='234'] {color: red} input [title='234'] {color: red} /*分组与嵌套 分组就是 相同的选择器 不同的标签 嵌套就是 不同的选择器 放在一起*/ /*分组*/ div,span,p {color: red} /*嵌套*/ #id, .class, div span { color: red; } /*伪类选择器 */ /*标签 : 加样式 */ a:link {color: red} /*未访问 链接颜色*/ a:hover {color: red} /*鼠标移动到标签上*/ a:active {color: red} /*选定链接*/ a:visited {color: red} /*已经访问的链接 */ /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; } /*伪元素选择器 */ p:first-letter {font-size: 50px; color: red;} /*在每个<p>元素之前插入内容*/ p:before { content:"$"; color:red; } /*在每个<p>元素之后插入内容*/ p:after { content:"?"; color:blue; }