HTML应用CSS
css是层叠样式表的缩写,从html4开始使用,是为了更好地渲染HTML元素
css主要通过三种方式添加到HTML中:
- 内联样式: 在HTML标签中使用style属性
- 内部样式表: 在HTML文档头部使用style元素来调用css
- 外部引用: 使用外部css文件
内联样式
当特殊样式应用到个别元素时,可以在元素单独使用style属性
//这个例子定义了该段落的字体颜色,背景颜色,左边距的属性
<p style="color: blue;background-color:gray;margin-left: 10px">this is a paragraph..</p>
//这个例子演示字体与对齐
<h1 style="font-family: Ani;font-size: 40px">A Title</h1>
<p style="text-align: center">使用text-align的属性替代center标签</p>
内部样式表
当特殊样式应用到整个HTML文件时,可以使用内部样式表
<head>
<style type="text/css">
body{background-color: blueviolet}
p{color: aqua;font-size: 12px;text-align: center}
</style>
</head>
外部样式表
当特殊样式应用到很多页面时,可以使用外部样式表,这个时候需要创建.css文件,然后在HTML头部使用link标签导入
<html>
<head>
<link rel="stylesheet" type="text/css" href="css文件路径/xx.css">
</head>
</html>
css选择器
css选择器可以理解为以什么样的方式选择某一部分空间进行css渲染
主要有三类
构造选择器
构造选择器针对网页中的一类标签叠加样式,一般形式为:
<style type="text/css">
标签名 { 美化属性}
</style>
这样本文件中所使用的所有该标签都按照设定的css样式进行渲染
类选择器
类选择器针对某一类中的个别元素
<style type="text/css">
.非关键字类名{ 美化属性}
</style>
类选择器是自己命名的,但是不能够使用关键字,类选择器以点开头,调用方式为:
<li class="对应非关键字类名"/>
id选择器
id选择器类似类选择器,其实符号是井号#而不是点 ,一般与div配合应用于区域
<style type="text/css">
#id名{ 美化属性}
</style>
<!--调用方式-->
<div id="id名">....</div>