css介绍
CSS定义如何显示HTML元素.
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)
CSS语法
每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束
CSS注释
/*这是注释*/
CSS的几种引入方式
行内式实在标记的style属性中设定CSS样式.不推荐大规模使用
<p style="color:red">hello girl </p>
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: blue; } </style> </head>
外部样式就是将CSS写在一个单独的文件中,然后再页面进行引入即可.推荐使用此方式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS选择器
基本选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> 标签选择器:标签名 p { color:yellow; } 类选择器:点+类名 .c1 { color:purple; } id选择器:#id值 #d1 { color:bisque; } 全局/通用选择器 * { color:khaki; } </style> </head> <body> <div id="d1">Kris.wu is so cool <p class="c1">l come from chinese</p> </div> <p id="d2">mayor is bad man</p> <span>why l am unfortunate</span> <span class="c2">l hope you happiness</span> </body> </html>
组合选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ div span { color:red; } /*儿子选择器*/ div>span { color : blue; } /*毗邻选择器:紧挨着的下面的一个*/ div+span { color:yellow; } /*弟弟选择器:同级别下面的所有标签*/ div~span { color:red; } </style> </head> <body> <span>div上面第一个span</span> <span>div上面第二个span</span> <div>div <span>div里面的第一个span</span> <p>div里面的第一个p <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>
属性选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.具有某个属性名 2.具有某个属性名及属性值 3.具有某个属性名及属性值某个标签 */ /*找只要有hobby这个属性名的所有标签*/ [hobby] { color:brown; } [hobby='book'] { color:hotpink; } span[hobby="read"] { /*color : chartreuse;*/ background: chartreuse; } </style> </head> <body> <input type="text" name="username" hobby="book"> <input type="text"> <span hobby="read">span</span> </body> </html>
分组和嵌套
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*分组*/ p,div,span{ color: cyan; } /*嵌套*/ #d1,.c1,span{ color:yellowgreen; } </style> </head> <body> <p id="d1">p</p> <div class="c1">div</div> <span>span</span> </body> </html>
伪类选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*连接态*/ a:link{ color:pink; } /*鼠标悬浮态*/ a:hover{ color:red; } /*鼠标点击态*/ a:active{ color:purple; } /*访问过后的状态*/ a:visited{ color: yellow; } /*input框被点击的状态 称之为获取焦点*/ input:focus{ background-color: mediumvioletred; } input:hover{ background-color: cyan; } </style> </head> <body> <a href="https://www.yabo.com">click me</a> <input type="text"> </body> </html>
伪元素选择器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter{ font-size: 48px; color:red; } p:before{ content: '***'; color: hotpink; } /*after在解决浮动的问题上 很有用*/ p:after{ content:'^^^'; color: navy; } </style> </head> <body> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> <p>澳门最大线上赌场开业了,爱剪辑!</p> </body> </html>
before和after多用于清除浮动
选择器优先级
1.选择器相同的情况下:就近原则
2.选择器不相同的情况下:
行内 > id选择器 > 类选择器 > 标签选择器