网页由三部分组成:内容、表现和行为。
这第三部分内容一般依靠 HTML、CSS和JavaScript技术来实现。
- Hyper Text Markup Language(HTML)
超文本标记语言
HTML通过标签来标记要显示的网页中的各个部分。
书写规范:
<html> <!--表示整个HTML页面的开始 -->
<head> <!--头信息-->
<title>标题</title>
</head>
<body> <!--body是页面的主体内容-->
页面主体内容
</body>
</html> <!-- 表示整个HTML页面的结束-->
<!--注释-->
- CSS是「层叠样式表单」。
是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)。
属性(property)是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration)
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)。
/*一般每行只能描述一个属性*/
- CSS和HTML的结合方式
1、在标签的style属性上设置“key:value value;”,修改标签样式。
缺点:如果标签多了。样式多了。代码量非常庞大。可读性非常差。Css代码没什么复用性可方言在head标签中
2、使用style标签来定义各种自己需要的CSS样式。
缺点:只能在同一页面内复用代码,不能在多个页面中复用css代码。.维护起来不方便,实际的项目中会有成千上万的页面,要到每个页面中去修改。工作量太大了。
3、把CSS样式写成一个单独的CSS文件,再通过link标签引入即可复用。
- CSS选择器
1、标签名选择器
标签名{
属性:值;
}
标签名选择器,可以决定哪些标签被动的使用这个样式。
2、id选择器
#id属性值{
属性:值;
}
id选择器,可以让我们通过id属性选择性的去使用这个样式
3、class选择器
.class属性值{
属性:值;
}
class类型选择器,可以通过class属性有效的选择性地去使用这个样式。
4、组合选择器
选择器1,选择器2,选择器n{
属性:值;
}
组合选择器可以让多个选择器共用同一个css样式代码