CSS样式表基础
前言
HTML\CSS\JavaScript与PHP\ASP\JSP之间的区别
(测试不需要掌握所有的前端开发语言，侧重点在于如何找并且调试代码问题。
笔记复习重点：html表单，样式表的三种格式(了解，知道如何声明))
对于html文件来说，它呈现出来的效果是有限的(比较单一)的
我们用CSS来修饰HTML，实现内容和样式的分离，也更方便团队开发
CSS中(style标签内声明)注释/* */
一、CSS样式表
1.1 样式表分类
1）行内样式(内联样式)【优先级最高】【不常用】【代码重复使用性最差】
（当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。）
2）内部样式表【优先级第二】【常用】【代码重复使用性一般】
（在 head 标签中通过 < style> 标签定义内部样式表。）
3）外部样式表【优先级最低】【最常用】【代码重复使用性最好】
样式优先级
注：
优先级：行内样式 > 外部样式 = 内部样式
外部样式和内部样式有“就近原则”，以最后出现的为准
1.2 CSS语法
1.2.1 内部样式表
- 放在< head>< /head>标签中==
- 通过style标签
- 内部样式表根据声明方式不同分为两种格式
优点：内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理。
格式一
< style type="text/css">
关键词 {属性1:属性值1;属性2:属性值2…}
< /style>
注：关键词,也叫选择器,对应标签
注：text/css是固定搭配，代表css文件是以文本形式编写的;样式是写在style双标签中的
<!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 type="text/css">
p {color:rebeccapurple;font-size: 30px;font-family: 'Times New Roman', Times, serif;}
h1 {color: salmon;}
</style>
</head>
<body>
内部样式表<br><br>
<p>内部样式表</p>
<p>只要用到p标签</p>
<p>都会是声明过的样式</p>
<h1>内部样式表</h1>
<h2>内部样式表</h2>
</body>
</html>
假如：多个标签用到同样的样式，如果采用第一种写法
p {color:rebeccapurple;font-size: 30px;font-family: ‘Times New Roman’, Times, serif;}
Ins {color:rebeccapurple;font-size: 30px;font-family: ‘Times New Roman’, Times, serif;}
del {color:rebeccapurple;font-size: 30px;font-family: ‘Times New Roman’, Times, serif;}
第一种写法比较麻烦
思考：将共有的样式做一个提取，设置成一个共享的样式：将来哪个标签用到了，就让该标签做一个引用即可。
格式二
把样式表通过一个类名，给共享出来；
类名的命名：字母或者字母加数字
< style type="text/css">
.类名 {属性1:属性值1;属性2:属性值2…}
< /style>
标签引用共享的样式(利用class属性)：
<开始标签 class=“类名”> </结束标签>
<!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>样式表02</title>
<style type="text/css">
.test {color: teal;font-size: 30px;font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<p>无引用</p>
<p class="test">内部样式表第二种格式</p>
<ins class="test">下划线表示插入</ins> <br><br>
<del>文字中划线表示删除_无引用</del>
</body>
</html>
注：注意利用class属性引用，后面的属性值直接填写类名，没有.点
1.2.2 行内(嵌入)样式表
- 仅针对某一行，超出该行的数据信息，样式便不再生效
- 通过style标签
格式：
<开始标签 style="属性1:属性值1;属性2:属性值2…"><结束标签>
<!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>
<body>
<p>段落一</p>
<p style="color: purple;font-size: 50px;font-family: Georgia, 'Times New Roman', Times, serif;">段落二</p>
<h3 style="color:royalblue;">我是h3标签</h3>
<h3>我是h3标签</h3>
<del style="background-color: salmon;">我是下划线</del>
</body>
</html>
1.2.3 外部样式表
外部样式表和html文件是分离的。
相当于把某些样式单独生成一个css文件，只要某个html文件需要用到该样式，就关联外部样式即可。
优点：1.方便团队开发,找HTML和CSS的bug；2. 用于使一个网站中多个页面的样式保持一致。
外部样式表.css文件
- 引入一个单独的CSS文件，name.css
- 外部样式表.css文件里面写什么？就是< style>< /style>包裹的内容(两种写法：选择器和类名)
样式文件与网页的关联方式
- 链接(link)外部样式表 rel href
- 导入(@import)外部样式表
- 链接写在head标签里,link标签里有三个属性，两个是写死的(rel:指定资源跟页面的关系,解决浏览器兼容和支持问题,type:css文件都是以文本的方式编写的,vs里默认没写,也没多大问题)，只需设置href属性:资源的地址。
<!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" type="text/css" href="css/外部样式.css">
</head>
<body>
<p>我是段落</p>
<h2>我是h2</h2>
<h3 class="test03">我是标签h3</h3>
<del class="test04">划线表示删除</del>
</body>
</html>
- 导入(@import)
像内部样式表需要style标签，在style标签中导入
<!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>外部样式表02</title>
<style type="text/css">
@import "css/外部样式.css";
</style>
</head>
<body>
<p>我是段落</p>
<h2>我是h2</h2>
<h3 class="test03">我是标签h3</h3>
<del class="test04">划线表示删除</del>
</body>
</html>
注：这种方式有很多问题，了解即可，不建议使用 )重点掌握第一种link外部样式表！！
补充知识点：
link的rel属性
link和@import区别
CSS中的颜色表示法？
1.单词表示法 : red blue green yellow …
2.十六进制表示法：最小值黑色#000000 最大值白色#ffffff
0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb三原色表示法：rgb(255,255,255);白色
取值范围 0 ~ 255
获取颜色的工具：
提取颜色的下载地址：https://www.baidufe.com/fehelper (firefox浏览器无页面取色工具，google有)
photoshop吸管工具：能拿到本地和网页截图下来的图片颜色(十六进制、rgb)
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
