CSS技术(2)基础与html
1:html与css的关系
css:层叠样式表的简称,用来设计网页样式的一种规范,和html是一个w3c组织制定发布;
html: 定义一个网页的内容与结构,而css来定义一个网页的形式,可以是网页的内容与形式可以分离,便于维护。即这2套规范。
2:html与xhtml
均是定义一个网页的内容与结构,可以理解为同一种语言的不同发展阶段
区别:
1:在xhtml中标记名称 必须小写
2:在xhtml中属性名称 必须小写
3:在xhtml中标记必须严格嵌套
4:在xhtml中标记必须封闭
5:在xhtml中空元素的标记也必须封闭
6:在xhtml中属性值用双引号括起来
7:在xhtml中属性值必须用完整形式
8:在xhtml中应该区分内容标记与结构标记
3:在html中引入css方法
1:行内方式(只针对当前)
<h1 style="color:white;background-color:blue">test</h1>
2:内嵌式(针对所有定义)
<style type="text/css">
h1{ color:white }
</style>
3: 导入方式(网页最后才装载)
4: 链接方式(网页开始就加载)
4: 基本css选择器 (1)标记选择器(用标记来选择) <style type="text/css">
@import "mystyle.css"
</style>
<link href="mystyle.css" rel="stylesheet" type="text/css">
h1 { color:red; font-size:25px; } 选择器 属性 值
(2)类别选择器(1个类别选择器可以用在多个相同的标记中)
自己定义名称,前面定义加上一个圆点,可以应用于不同的元素
<style type="text/css"> .red{ color:red; font-size:18px; } .green{ color:green; font-size:20px; } .two{ font-weight:bold; } </style> <h1 class="red">test</h1> <p class="red">test1个类别选择器可以用于多个标记</p> <p class="green">test2</p> <h2 class="red two">多个类别选择器可以用于1个标记</h2>
(3)ID选择器
前面用#表示,多个ID选择器不可以用于1个标记,1个ID选择器不可以用于多个相同的标记
<style type="text/css"> #red{ color:red; font-size:18px; } #two{ font-weight:bold; } </style> <p class="red">test1</p> <p class="red">有问题</p> <h2 class="red two">有问题</h2>
5:复合选择器
交集选择器
一个标记选择器+一个类别选择器(一个Id选择器)
div.special{}
div#special{}
并集选择器
div,h1.first,p.specia{}
后代选择器
div h1.first span.first{}