03css选择器及其常用属性

CSS选择器和常用属性

• 元素选择器
• 类选择器
• id选择器
• 通配符选择器

在head标签内加入style容器，在容器内进行css选择器的设定

元素选择器

对一些标签进行样式编辑

格式：

元素{
	属性：属性值；
	属性：属性值；
	属性：属性值；
	...
}

例如：

<style>
    h1{
        color: blue;
        font-size: 20px;
    }
</style>

这样子h1标签中的所有元素都会变成蓝色，字体大小变成12px

类选择器

在标签的属性中有class=""属性，这是用来规定一些标签为同一个类别

那么通过类选择器，我们可以将同属为一个类别的标签进行相同的样式修改

格式：

.className{
	属性：属性值；
	属性：属性值；
	属性：属性值；
	属性：属性值；
	...
}

.test{
    color:red;
    font-size: 30px;
}

<h2 class="test">hello h2</h2>
<p class="test">hello p</p>

id选择器

和类选择器的原理是一个意思，将具有该id属性的元素进行样式编辑

格式：

#idName{
	属性：属性值；
	属性：属性值；
	属性：属性值；
	...
}

通配符选择器

将通配符选择器中的样式应用在所有的元素中

格式：

*{
	属性：属性值；
	属性：属性值；
	属性：属性值；
	...
}

CSS常用属性

• 字体大小:font-size
• 字体颜色:color
• 宽度:width
• 高度:height
• 背景颜色:background-color
• 文本水平对齐:text-align
  • :center水平居中
• 文本行高（垂直居中）:line-height