一、概念讲解
学习CSS之前必学的HTML （超链接）
1.CSS（Cascading Style Sheets）
CSS是前端的一个重要的组成部分，可以给HTML这个进行化妆起到美化的作用。
二、正文代码
1.行内样式
说明：这样定义也叫内联样式，这种方式不推荐
<h1 style="color:red; text-align:center;">我是标签</h1>
2.内部样式（选择器）
弊端：只能作用与一个页面，页面多了还要不断的上下滚动代码进行修改
说明：这样设计是为了html标签结构和css样式相分离，容易整体操控
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- -------------分割线，上面是自动生成的----------------------------------------- --> <!-- 样式表整体就在这head头部标签这里设计就好了 --> <style> body{background-color:darkturquoise;} h1{color: khaki;} </style> </head> <body> <h1>王者荣耀</h1> <p>今天是个好日子</p> </body> </html>
3.外部样式
说明：外部样式把css放在一个独立的文件中，使html和css样式独立开来
优点：可以把这个css样式给多个html页面使用
CSS
/* 该文件名为QQ.css */ body { background-color:darkturquoise; } h1 { color:khaki; }
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- -------------分割线，上面是自动生成的----------------------------------------- --> <link rel="stylesheet" href="D:\前端\练习包\标签练习\QQ.css"> <!-- 快捷键link生成css的导航代码就好了，然后在href里面设置css的文件路径 --> </head> <body> <h1>王者荣耀</h1> <p>今天是个好日子</p> </body> </html>
4.样式的优先级
就近原则，哪个距离最近就使用哪个的样式
5.简单选择器之定义单个标签（id）
ID选择器给每个标签都自定义样式
说明：先在要被修饰的伸腿标签里面定义一个唯一的id，然后在头部标签的style中#id设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- 头部--> <style> #para1{ text-align:center; } #para2{ color:red; } </style> </head> <!-- 身体 --> <body> <h1 id="para1">王者荣耀</h1> <p id="para2">今天是个好日子</p> </body> </html>
6.简单选择器之定义多个标签（class）
说明：在身体body里面的多个标签里面批量添加class=自定义名字，然后在头部head里面.自定义名字进行设置样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- 头部--> <style> .cpdd{ color: red; } </style> </head> <!-- 身体 --> <body> <h1 class="cpdd">王者荣耀</h1> <p class="cpdd">今天是个好日子</p> </body> </html>
7.简单选择器之全部选择(*)
说明：这个应用在头部标签的最开头，一个*号就好了，然后在括号里面定义全部标签的语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- 头部--> <style> *{ text-align: center; } </style> </head> <!-- 身体 --> <body> <h1 class="cpdd">王者荣耀</h1> <p class="cpdd">今天是个好日子</p> </body> </html>
8.组合选择器（div 标签）
说明，在css样式里面选择div盒子里面要定义的标签，进行定义就好了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- 头部--> <style> div h1 { color: blueviolet; } </style> </head> <!-- 身体 --> <body> <div> <h1 class="cpdd">王者荣耀</h1> <p class="cpdd">今天是个好日子</p> </div> </body> </html>
9.选择器之鼠标行为（link、visited、hover、active）
说明：别称叫伪类选择器。主要应用在超链接上，偶尔也会用在其他标签上。冒号和鼠标后面的行为，没有空格，必须连接在一起
ps：其他标签只能用hover、active
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试</title> <!-- 头部--> <style> /* 鼠标点击前 */ a:link{ color: red; } /* 鼠标点击后，再移除鼠标 */ a:visited{ color: green; } /* 鼠标放上去时候 */ a:hover{ color: yellow; } /* 鼠标点击瞬间 */ a:active{ color: skyblue; } </style> </head> <!-- 身体 --> <body> <a href="#">这是超链接</a> </body> </html>
10.伪元素选择器
说明：可以设置元素的指定部分的样式，主要用来设置元素内文本的首行、首字母、在元素之前或者之后插入其他内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS伪元素选择器</title> <!-- 头部--> <style> h1::first-letter{ /*1. 这是定义标签的首字母的样式 */ color: red; } h2::first-line{ /*2. 定义文本的首行样式 */ color: blue; } h3::before{ /*3. 向文本前插入内容样式，必须配合content使用 */ content: "我是向前添加的！！"; } h3::after{ /*4. 向文本后插入内容样式，必须配合content使用 */ content: "我是向后添加的！！"; } </style> </head> <!-- 身体 --> <body> <h1>用来实现元素内的第一个字符添加样式声明</h1> <h2>这是用来实现文本第一行的样式声明的</h2> <h3>王者荣耀</h3> </body> </html>
11.属性选择器（精确查找）
说明：可以精确定义要设置的属性进行定义。在头部的标签中定义该属性的定位就可以了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性选择器</title> <!-- 头部标签 --> <!-- 精确定位要定义的单个或者多个标签，用[]包住进行定义 --> <style> [class="s"]{ color: blueviolet; } </style> </head> <!-- 身体标签 --> <body> <h1 class="s">我是h1</h1> <h2>我是h2</h2> <p class="s">我是p标签</p> </body> </html>
