HTML 样式- CSS
HTML 样式 - CSS
CSS是什么?
CSS(层叠样式表)是用于描述HTML和XML等文档的外观和格式的一种样式表语言。CSS为Web设计者提供了一种“样式”语言,使他们可以为Web页面中的元素指定各种样式,如颜色、字体、间距、边框等等,这些样式可以直接写入HTML标签里,或写在一个单独的css文件中。
HTML中的样式
在HTML中,你可以通过以下方式设置样式:
- HTML标签的“style”属性中设置样式,例如:
<h1 style="color: red;">标题</h1>
- 在HTML标签中使 用“class”或“id”属性引用CSS文件中定义的样式,例如:
<h1 class="highlight">标题</h1>
这里的“highlight”是一个在CSS文件中定义的样式类。
CSS文件的基本结构
一个基本的CSS文件由“选择器”和“声明块”组成,例如:
h1 {
color: red;
}
- 选择器指定要应用样式的HTML元素,例如" h1"
- 声明块包含一系列属性-值的对,例如“color: red; ”
CSS中常用的属性
以下是在CSS中常用的属性:
字体属性
- font-family:设置字体(例如:sans-serif、Arial、Times New Roman等等)
- font-size:设置字体大小(例如:12px、16px等等)
- font-weight:设置字体粗细(例如:bold、normal等等)
文本属性
- color:设置字体颜色(例如:red、black等等)
- text-align:设置文本对齐方式(例如:left、center、right等等)
- text-decoration:设置文本修饰(例如:underline、line-through等等)
布局属性
- margin:设置元素的外边距(例如:margin: 10px;)
- padding:设置元素的内边距(例如: padding: 10px;)
边框属性
- border:设置元素的边框(例如: border: 1px solid black;)
背景属性
- background-color:设置元素的背景颜色(例如: background-color: gray;)
- background-image:设置元素的背景图片(例如: background-image: url(“image.jpg”);)
CSS的继承和优先级
CSS的继承是指当子元素没有设置某个属性时,将继承其父元素的属性。例如:
<body style="color: red;">
<div>
<p>文字颜色这里应该是 red</p>
</div>
</body>
这里,段落元素没有显式地设置文字颜色,但是它会继承body元素的颜色。
CSS的优先级是指当存在多个样式时,哪个样式会被应用。以下是CSS优先级的规则:
- 选择器越具体,优先级越高。例如:ID选择器比标签选择器优先级更高。
- 相同选择器,后定义的样式优先级更高。例如:在不同CSS块中设置相同的样式。
- ! important属性优先级最高,不建议滥用。
总结
CSS是一种样式表语言,可以用于描述HTML和XML等文档的外观和格式。在HTML中,可以通过设置“style”或“class”属性来应用CSS。CSS文件包含一系列的选择器和声明块,其中选择器用于指定应用样式的HTML元素,声明块包含一系列属性-值的对,用于设置元素的样式。常用的CSS属性包含字体、文本、布局、边框和背景等。CSS同时支持继承和优先级,它们在样式覆盖的过程中起着重要的作用。