1.选择器 在CSS中,选择器就是用来选取HTML元素的标识符。常用的有以下几种: - 元素选择器 - 类选择器 - ID选择器 - 组合选择器 - 后代选择器 - 伪类选择器
2.盒模型 在CSS中,所有HTML元素都被看作是一个矩形的盒子,这个盒子由四个区域组成:内容区、内边距区、边框区和外边距区。这些属性可以用来设置盒子的大小、边框、内边距等等。
div { width: 300px; // 设置宽度为300像素 height: 200px; // 设置高度为200像素 padding: 10px; // 设置内边距为10像素 border: 1px solid #ccc; // 设置边框为1像素的实线 margin: 20px; // 设置外边距为20像素 }
3.文本样式 在CSS中,大家可以通过一系列的属性来设置文本的样式,包括字体、颜色、对齐方式、行高等等。
p { font-family: Arial, sans-serif; // 设置字体 font-size: 16px; // 设置字体大小 color: #333; // 设置字体颜色 text-align: center; // 设置文本对齐方式为居中 line-height: 1.5; // 设置行高为字体大小的1.5倍 }
4.背景与图像 背景是网页设计中不可或缺的元素,大家可以通过一系列的背景属性来设置背景色、背景图片、背景位置等等。
body { background-color: #f5f5f5; // 设置背景颜色 background-image: url("bg.jpg"); // 设置背景图片 background-size: cover; // 设置背景图片的大小为覆盖整个屏幕 background-position: center center; // 设置背景图片的位置为居中 }
5.布局与定位 布局和定位是CSS中非常重要的部分,大家可以使用绝对定位和相对定位来让元素浮动在页面的不同位置。
div { position: absolute; // 设置绝对定位 top: 50px; // 设置距离上方50像素 left: 50px; // 设置距离左方50像素 } img { position: relative; // 设置相对定位 top: 10px; left: 10px; }
以上就是CSS中一些常用的样式,当然在实际开发中还有很多其他的样式可以使用,需要根据实际情况进行选择和应用。