HTML和CSS
1.选择器,css属性
/*注释*/
在css3注释的使用p{ font-size2px;设置字体大小 color:red;设置字体颜色 }
2.CSS引入方式
1.行内样式
在HTML标签中使用style属性
2.内部样式
在页面中使用style标签
3.外部样式
需要创建.css文件,使用链接式或导入式引入。
外部样式,链接式引入 <link href=“css/index.css" rel="stylesheet"/> <style> /*外部样式,导入式引入*/ @impor url("css/index.css"); </style>
3.选择器
一、基本选择器
1.标签选择器
使用HTML标签
2.类选择器
使用HTML标签中class属性并且使用.操作符
<style type="text/css"> .tt{ color: red; } </style>
3.ID选择器
使用HTML标签中id属性并使用#操作符(唯一)
<style type="text/css"> #tt{ color: red; } </style> <body> <a id="tt">baifbeu</a> </body>
4.全局选择器
使用*操作符(全局选择器)
<style type="text/css"> *{ color: red; } </style>
全部改变
二、层次选择器
1.后代选择器E F
选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ul li{ color: red; } </style> <body> <ul> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ul> <ul> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ul> </body> </html>
ul是父级li是子级,子级全变
2.子选择器E>F
选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> body>ul{ color: red; } </style> <body> <ol> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ol> <ul> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ul> </body> </html>
3.相邻兄弟选择器E+F
选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> li+.tt{ color: red; } </style> <body> <ol> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ol> <ul> <li>lanlllll</li> <li>lanlllll</li> <li class="tt">lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ul> </body> </html>
必须紧挨着
不然没效果
4.通用兄弟选择器 E~F
选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> li~li{ color: red; } </style> <body> <ol> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ol> <ul> <li>lanlllll</li> <li>lanlllll</li> <li class="tt">lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ul> </body> </html>
相同级别第一个不选中,其余全选中
三、结构伪类选择器
1.E:first-child
作为父元素的第一个子元素的元素E
2.E:last-child
作为父元素的最后一个子元素的元素E
3.E F:nth-child(n)
选择父级元素E的第n个子元素F,(n可以是1、2、3),关键字为even、odd
4.E:first-of-type
选择父元素内具有指定类型的第一个E元素
5.E:last-of-type
选择父元素内具有指定类型的最后一个E元素
6.E F:nth-of-type(n)
选择父元素内具有指定类型的第n个F元素
一般用后三个,指定必须是这个元素才开始计数
前三个没有
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> ul li:nth-of-type(6){ color: red; } </style> <body> <ol> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ol> <ul> <li>lanlllll</li> <li>lanlllll</li> <li >lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> <li>lanlllll</li> </ul> </body> </html>
四、属性选择器
1.E[attr]
选择匹配具有属性attr的E元素
2.E[attr=val]
选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
3.E[attr=val]
选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
4.E[attr$=val]
选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
5.E[attr*=val]
选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配