为网页添加样式
在< head >< /head >中,添加< style >元素,在< style >中进行样式书写。
<style>
h1{
color:red;
background-color: lightblue;
text-align: center;
}
</style>
术语解释:
css规则=选择器+声明块
选择器
选择器(即{}):选中元素。
写法:
- 元素选择器:(元素{})选中所有元素。
h1{
}
- ID选择器:选中对应ID值的元素
#test{
}
在body中:
<p id="test">
ID选择器
</p>
- 类选择器
.类名{}
.hp{
color: blueviolet;
text-align: center;
background-color: antiquewhite;
}
在body中:
<h1 class="hp">
类选择器
</h1>
应用多个类选择器:选择器中键加空格
<p class="hp big">Sunt consequuntur eligendi similique molestiae.</p>
声明块
- 出现在大括号中。
- 声明块中包含很多声明(属性),每一个声明表达了某方面的样式。
书写
1.内部样式表
书写在style元素中。
2.内联样式表,元素样式表
直接书写在元素的style属性中。
<p style="color: antiquewhite; font-size: 3em; text-align: right;">内联样式表</p>
3.外部样式表
将样式书写到独立的css文件中。
在html文件中进行路径说明
<link rel="stylesheet" href="./css/index.css">
原因:
(1). 外部样式可以解决多页面样式重复的问题。
(2). 有利于浏览器缓存,从而提高页面响应速度。
(3).有利于代码分离(HTML、CSS),更容易阅读和维护。