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)