01 css的三种引入方式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种方式</title>
<!--css 第一种引入方式: link-->
<!--link专门用来引入外部的css文件-->
<link rel="stylesheet" href="mycss.css">
<!--方法二:style-->
</head>
<body>
<!--方法三:行内式-->
<p style="color: black">css的三种导入方法</p>
</body>
</html>
02 基本选择器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*标签选择器:标签名*/ p{ color: red; } /*类选择器:点+类名*/ .cl{ color: yellow; } /*id选择器:#+id值*/ #d1{ color: green; } /*通用/全局解释器*/ *{ color: blue; } </style> </head> <body> <div id="d1">我是id选择器 <p class="cl">我是类选择器</p> </div> <div>我是通用/全局选择器</div> <p id="d2">我是标签选择器</p> </body> </html>
03 组合选择器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ div span{ color:red; } /*儿子选择器*/ div>span{ color: aqua; } /*毗邻选择器:紧挨着下面一个*/ div+span{ color: yellow; } /*弟弟选择器:同级别下面所有标签*/ div~span{ color: brown; } </style> </head> <body> <span>div上面第一个span</span> <span>div上面第二个span</span> <div>div <span>div里面第一个span(儿子选择器)(后代选择器)</span> <p>div里面第一个span <span>div里面第一个p里面的span(后代选择器)</span> </p> <span>div里面最后一个span(儿子选择器)(后代选择器)</span> </div> <span>div下面的第一个span(弟弟选择器)(毗邻选择器)</span> <span>div下面的第二个span(弟弟选择器)</span> <span>div下面的第三个span(弟弟选择器)</span> </body> </html>
04 属性选择器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 1.具有属性名 2.具有某个属性名及属性值 3.具有某个属性即属性值某个标签 */ /*找只要有hobby这个属性名的所有标签*/ /*background 背景颜色*/ [hobby]{ background-color: red; color: orange; } /*找input 具有属性名hobby 并且值为jdb*/ [hobby="jdb"]{ background-color: pink; } /*找input 具有属性名hobby 并且值为jdb的input标签*/ input[hobby="jdb"]{ background-color: greenyellow; } /**/ </style> </head> <body> <input type="text" name="username" hobby="jdb"> <input type="text"> <span hobby="jdb">span</span> </body> </html>
05 分组与嵌套.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分组与嵌套</title> <style> /**/ p{ color: greenyellow; } div{ color: greenyellow; } span{ color: greenyellow; } /*分组*/ div,span,p{ color: pink; } /*嵌套 多个不同的选择器 可以组合使用*/ #d1,.cl,span{ color: orange; } </style> </head> <body> <p id="d1">p</p> <div class="cl">div</div> <span>span</span> </body> </html>
06 伪类选择器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*连接态*/ a:link{ color: pink; } /*鼠标悬浮态*/ a:hover{ color:red; } /*鼠标点击态*/ a:active{ color: purple; } /*访问过后的状态*/ a:visited{ color:dimgrey; } /*input 框被点击的状态,称之为获取焦点*/ input:focus{ background-color: orange; } /*input 鼠标悬浮太*/ input:hover{ background-color: red; } </style> </head> <body> <a href="http://hao123.com">click me</a> <input type="text"> </body> </html>
07 伪元素选择器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> /*first-letter 第一个字母*/ p:first-letter{ font-size: 48px; color: gold; } p:before{ content: '$'; color: gold; } /*after在解决浮动的问题上 很有用*/ p:after{ content: "?"; color: red; } </style> </head> <body> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> </body> </html>
08 选择器优先级.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <link rel="stylesheet" href="mycss.css"> <style> /* 1.选择器相同的情况下:就近原则 2.选择器不同的情况下: 行内 > id选择器 > 类选择器 > 标签选择器 */ #d1{ color: red; } .c1{ color: orange; } p{ color: greenyellow; } /**/ </style> </head> <body> <p id="d1" class="c1" style="color: blue">快要下课了,我想吃饭了!</p> </body> </html>
css 总结
前端 CSS 什么是 CSS ? css就是用来调节标签样式的 层叠样式表 css 的注释 /*单行注释*/ /* 多行注释 多行注释 */ /*这是博客园首页的样式表*/ /*顶部导航条样式开始*/ /*顶部导航条样式结束*/ css 语法结构 选择器(属性1:值,属性2:值,属性3:值) css的三种引入方式 1.文件导入式(也是最规范的形式) 2.head 内 利用 style 标签 内部直接书写 CSS 代码 3.行内式(最不推介使用的) css 的流程 1.如何查找标签 2.如何设置样式 如何查找标签 1.基本选择器 2.组合选择器 3.伪元素选择器 4.伪类选择器 伪类选择器:对选择器标签进行了进一步的修饰 1.连接态:a:link 2.鼠标悬浮态:a:hover 3.鼠标点击态:a:active 4.访问过后状态:a:visited 一个标签都应该有的属性 1.id 唯一标识 2.class 类属性,可以多继承 3.style 设计样式
mycss.css
p {
color:deeppink;
}
