DIV+CSS用法

最新推荐文章于 2024-11-05 14:45:41 发布

joke1031095867

最新推荐文章于 2024-11-05 14:45:41 发布

阅读量624

点赞数 1

分类专栏： div+css 文章标签： div css

本文链接：https://blog.csdn.net/joke1031095867/article/details/50285177

版权

div+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DIV+CSS——2015年11月30日
1.DIV+CSS——HTML+CSS
Web的标准组成：
(1)结构（Structure）——HTML
(2)表现（Presentation）——CSS
(3)动作（Behavior）——JavaScript
2.Table and DIV
(1)Table：存储数据
(2)DIV：布局（设计）网页
(a)内容与形式的分离
(b)网站改版变得容易
(c)搜索引擎友好——SEO
真正的高手：DIV+Table+CSS
3.SEO
(1)<h1>+<title>
(2)合理使用<h2><h3>
(3)<meta>
(4)使用纯净的HTML代码网页——HTML和CSS的分离
(5)<img />添加alt属性——网络爬虫、网络蜘蛛
(6)HTML和JavaScript也要分离
4.CSS与HTML的关联方式
(1)行内方式：使用style=""
<p style="color:red; font-size:16px;">一段内容</p>
(2)嵌入方式：在<head></head>之间使用<style></style>
<html>
<head>
<style type="text/css">
#div1{
color:red; font-size:16px;
}
</style>
</head>
<body>
<div id="div1">我的DIV</div>
</body>
</html>
(3)链入方式：在<head></head>之间使用<link>标签
<head>
<link rel="stylesheet" href="style.css">
</head>
HTML5中不需要添加type="text/css"
(4)导入方式：import
5.link和import的区别
6.四种方式的优先级——距离越近，优先级越高
行内方式>嵌入方式>链入方式>导入方式
7.CSS的选择器
(1)标签选择器——HTML标签
HTML：<p>这是一段文字</p>
CSS： p{color:red; font-size:16px;}
(2)id选择器——最好唯一
HTML：<div id="myDiv">这是我的DIV</div>
CSS： #myDiv{color:red; font-size:16px;}
(3)class选择器
HTML：<div class="myDiv">这是我的DIV</div>
CSS： .myDiv{color:red; font-size:16px;}
(4)*选择器——全局选择器
*{margin:0; padding:0;}
(5)多个class选择器可以同时使用——中间加空格
HTML：<div class="myDiv1 myDiv2">这是我的DIV</div>
CSS： .myDiv1{color:red;}
.myDiv2{font-size:16px;}
(6)id选择器可以和class选择器一起使用
HTML：<div id="myDiv1" class="myDiv2">这是我的DIV</div>
CSS： #myDiv1{color:red;}
.myDiv2{font-size:16px;}
(7)选择器嵌套——空格
HTML:
<div class="myDiv">
<div id="myDiv1">myDiv1</div>
<div class="myDiv2">myDiv2</div>
</div>
CSS： .myDiv #myDiv1{font-size:16px;}
(8)选择器并列——,
HTML:
<div class="myDiv1">myDiv1</div>
<div class="myDiv2">myDiv2</div>
CSS：
.myDiv1,.myDiv2{font-size:16px;}
(9)
HTML:
<div class="myDiv">
<div class="myDiv1">myDiv1</div>
<div class="myDiv2">myDiv2</div>
</div>
CSS:
第一种写法：
.myDiv .myDiv1{font-size:16px; color:green;}
.myDiv .myDiv2{font-size:16px; color:red;}
第二种写法：
.myDiv{font-size:16px;}
.myDiv .myDiv1{color:green;}
.myDiv .myDiv2{color:red;}