为了让网页层次更加分明,样式更加美观,我们就需要引入CSS
1.CSS的语法规则
CSS包含选择器、属性、属性值三个部分。
选择器,用于指定要为哪个HTML元素定义样式。
属性,是指我们给HTML元素设置的样式名称。
属性值,用来控制某个属性的显示效果。
英文冒号:
用于将属性与属性值分隔开。
英文分号;
放到属性值后,作为结束标志,是固定格式。
属性和属性值的组合,可以看作一个声明。一条声明的格式为属性: 属性值;
选择器与大括号之间,冒号与属性值之间均添加一个空格。
注意!
以上的空格不是固定格式,为了代码清晰,我们统一添加
2.CSS的出现,使得网页的样式与内容分离开来。
HTML负责网页中有哪些内容,CSS负责以哪种样式来展现这些内容。
因此,CSS必须和HTML协同工作,那么如何在 HTML 中引用CSS呢?
CSS的引用方式有三种:内部样式表、外部样式表、行内样式。
内部样式表,是指将CSS放到 <style>
标签中,而<style>
标签必须放在HTML的<head>
标签内。
外部样式表,是指将CSS样式代码复制到一个文本文件后,另存为 .css
文件。
然后,我们通过HTML的<link>
标签将这个样式文件应用到HTML中。
3.CSS中,常见的基础选择器有三种。分别为:标签选择器、类选择器、id选择器
a.
顾名思义,标签选择器,是通过具体的标签名,找到页面所有同名的标签,来设置样式。
b.
类选择器,也叫class选择器。使用类选择器的前提是:标签中需要有class属性。
c.
类选择器像身份证的姓名,因为一个姓名可以被多个人使用,所以类选择器可以选择一类标签。
而标签的id
属性的值,就像身份照号码,是唯一的。
也就是说,设置这种标签的样式时,就需要用到id选择器。
id选择器,井号#
开头,后面紧跟id属性的值。