首页 > 代码库 > 样式表基础

样式表基础

2024-08-18 05:42:58   223人阅读

<!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="http://www.mamicode.com/1.css" rel="stylesheet" type="text/css" />

以上三种优缺点

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

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

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

               缺点   控制不精确

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

               缺点   控制最不精确的

内嵌和外部优先级一样

 

  样式名：样式值

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

 

标签选择器

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

复合选择器 

    可以组合使用

 

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

样式表基础


联系
我们