CSS：Cascading Style Sheet的缩写，意思是层叠样式表
作用：美化页面，可设置页面上各种元素的样式，包括颜色、大小、位置等等，使页面变得更好看。
1.添加CSS代码的三种方式：内联、内部、外部-
内联：在标签的style属性中添加样式代码（使用较少）
-
弊端：不能复用
-
-
内部：在head标签里面添加style标签，在标签内部写样式代码（接下来主要以这个进行讲解）
-
弊端：只能在当前页面复用
-
-
外部：在单独的css文件中写样式代码，在html页面中通过link标签引入，可以实现多页面复用（使用最多）
代码如下：
（1）cssDemo01.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="添加CSS代码的三种方式：内联、内部、外部" href="test.css"> <title>cssDemo01</title> <style type="text/css"> /* 内部样式表要添加style标签，指定type="text/css" */ p{ font-size: 30px; color:orange; } h3{ font-size:40px; color:green; } </style> </head> <body> <!-- 1、内联样式表：也称内嵌样式表、行内样式表 在标签里直接书写，标签中写style属性，属性用""括起来，多个属性之间用;隔开 缺点：不能复用，今后使用较少。 此处以div标签进行演示：<div>内容</div> --> <div>内联样式表效果</div> <div style="font-size:20px">内联样式表效果：添加字体大小</div> <div style="color:red">内联样式表效果：添加字体颜色</div> <div style="font-size:30px;color:blue">内联样式表效果：添加字体大小和颜色</div> ? <!-- 2、内部样式表 在当前html文件中编写，在head标签中编写style标签 注释为：/* */ 此处以p标签进行演示：上面p{}设置属性，下面<p>内容</p>显示效果 --> <p>内部样式表效果</p> <!-- 3、外部样式表 需要在外部创建css文件，将内容写到该文件中，并在当前文件中引入这个css文件 此处以span标签进行演示：<span>内容</span> 外部css文件为：test.css --> <span>外部样式表效果</span> ? <!-- 内联样式表优先级最高，内部样式表与外部样式表采用就近原则 --> <h3 style="font-size:20px;color:red">优先级测试</h3> ? </body> </html>（2）test.css
@CHARSET "UTF-8"; span{ font-size:50px; color:yellow; } h3{ font-size:60px; color:blue; }显示效果：
2.CSS基本选择器 2.1 标签选择器
-
格式：标签名{}
-
作用：选择页面中所有指定名称的标签
-
格式：.class{}，其中class为类名
-
作用：选择页面中同一类的多个标签，需要给标签添加class属性
-
格式：#id{}，其中id为id名
-
作用：选择页面中某一个标签时使用，需要给标签添加id属性，id名不能重复
代码测试：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本选择器</title> ? <style type="text/css"> /* 内部样式表 */ /* 1、标签选择器（优先级最低） */ li{ font-size:30px; color:blue; } ? /* 2、类选择器（优先级居中） */ .bapi{ color:green; } ? /* 3、id选择器（优先级最高） */ #third{ color:gold; } ? </style> ? </head> <body> <ul> <li id="first">苹果</li> <li id="second">西瓜</li> <li >橘子</li> <li >香蕉</li> <li>梨子</li> <li id="third">荔枝</li> </ul> </body> </html>显示效果：
优先级：id选择器 >类选择器 > 标签选择器
CSS基础（一）-添加CSS代码的三种方式（内联、内部、外部）、CSS标签选择器（标签、类、id）
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）