样式表基础

it2026-10-07  3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"<div> /*<div style="color:#906">Hello</div>*/ /*div.c1{color:#90C} span{color:#F03}*/ div,span,ul{color:#00F} </style> <link href="1.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="color:#F00">Hello</div> <div> <div class="c1">你好</div> <div class="c1">晚安</div> <div class="c1">再见</div> <div class="c1">谢谢</div> </div> <span> <span>测试1</span> <span>测试1</span> <span>测试1</span> <span>测试1</span> </span> <ul> <li>后代1</li> <li>后代2</li> <li>后代3</li> <li>后代4</li> </ul> <style type="text/css"> </body> </html>

样式表 分类

一   内联 (写在标签里的样式)

 <div style="">HELLO<.div>

二   内嵌 (嵌在页面里边)

     写在<head>样式</head>

     <style type="text/css">

</style>

三  外部样式表

新建css:从创建里找到CSS进行创建,进入窗口进行保存(ctrl+s)切回主页面点<head>右键找到css样式点进附加样式表进行合并

<link href="1.css" rel="stylesheet" type="text/css" />

以上三种优缺点

1  内联      优点   控制精确       (优先级最高)

               缺点   代码重用性很差,造成页面代码乱

2  内嵌      优点   代码重用性好  (可以把全部元素找到统一)

               缺点   控制不精确

3  外部      优点  代码重用性最好 (一般工作时使用,需要清理浏览器缓存)

               缺点   控制最不精确的

内嵌和外部优先级一样

 

  样式名:样式值

  多个样式之间使用分号分隔

 

标签选择器

    标签选择越精确优先级越高

复合选择器 

    可以组合使用

 

下午课程有些错综复杂,理清楚后,稍微清晰一些,需要多打多练,找出下午讲的重点,这样容易理清思路!

转载于:https://www.cnblogs.com/zqseven/p/6013472.html

最新回复(0)