一、什么是CSS
-
CSS概念
- Cascading Style Sheet 层叠样式表
- 表现HTML文件样式的语言,包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
-
CSS的优势
- 内容与表现分离
- 网页的表现统一 , 容易修改
- 丰富的样式 , 使得页面布局更加灵活
- 减少网页的代码量 , 增加网页的浏览速度 , 节省网络带宽
- 运用独立于页面的CSS , 有利于网页被搜索引擎收录
-
CSS基础语法
选择器{
声明1;
声明2;
}
案例:
h1{ color: red; }
注意:CSS语句的最后一条声明可写可不写,但基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上
-
Style标签
Style 标签在HTML文档中的位置 , 在 和 之间
<style> h1{ color: red; } </style>
-
引入CSS的方式
-
行内样式
使用style属性引入CSS样式
<body> <h1 style="color: red">Hello CSS</h1> </body>
-
内部样式表
CSS代码写在的
-
二、基础选择器
-
标签选择器
HTML标签作为标签选择器的名称 ,标签选择器直接应用于HTML标签
<style> p{ background: red; } </style>
-
类选择器
类选择器可在页面中多次使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器 */ .hello{ background: green; } </style> </head> <body> <p class="hello">Hello CSS</p> <p class="hello">Hello CSS3</p> </body> </html>
-
ID选择器
ID具有唯一性,同名的ID选择器在同一个页面中只能使用一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* ID选择器 */ #hello{ background: white; } </style> </head> <body> <p class="hello" id="hello">Hello CSS</p> <p class="hello" id="hello1">Hello CSS3</p> </body> </html>
-
基本选择器的优先级
ID选择器>类选择器>标签选择器 (不遵循就近原则)
三、高级选择器
-
层次选择器
-
E F 后代选择器,选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
后代选择器两个选择符之间必须要以空格隔开
<style> body p{ background: red; } </style>
-
E>F 子选择器,选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素(直接子元素,其他元素的该类子元素不会被匹配)
<style> body>p{ background: red; } </style>
-
E+F 相邻兄弟选择器,选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面,若不存在这样的E和F则不会匹配
<style> p+h1{ background: red; } </style>
-
E~F 通用兄弟选择器,选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
<style> /*第一个p不会被匹配*/ p~p{ background: red; } </style>
-
-
结构伪类选择器
- E:first-child 作为父元素的第一个子元素的元素E
- E:last-child 作为父元素的最后一个子元素的元素E
- E F:nth-child(n) 选择父级元素E的第n个子元素F,(n可以是1、2、3),关 键字为even、odd
- E:first-of-type 选择父元素内具有指定类型的第一个E元素
- E:last-of-type 选择父元素内具有指定类型的最后一个E元素
- E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-child{ /*此处由于第一个元素不是p标签所以不会匹配*/ background: black; } li:last-child{ background: black; } body p:nth-child(3){ background: blue; } body p:nth-of-type(4){ background: deeppink; } </style> </head> <body> <h1>0</h1> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html>
运行结果:
-
属性选择器
- E[attr] 选择匹配具有属性attr的E元素
- E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小 写)
- E[attr^=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的 任意字符串
- E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的 任意字符串
- E[attr*=val] 选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”, 换句话说,字符串val与属性值中的任意位置相匹配
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 给基础代码添加样式 */ .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: forestgreen; color: white; text-align: center; line-height: 50px; text-decoration: none; margin: 5px; } /* 属性选择器 */ a[id="aaa"]{ background: yellow; } a[href="https://www.alibaba.com"]{ background: red; } a[id^=b]{ background: pink; } </style> </head> <body> <p class="demo"> <a href="https://www.baidu.com" id="aaa">1</a> <a href="" id="bbb">2</a> <a href="" id="bbbb">3</a> <a href="https://www.alibaba.com">4</a> <a href="">5</a> </p> </body> </html>
运行结果: