前端编写页面HTML、CSS常用属性方法汇总

**前端编写页面HTML、CSS常用属性方法汇总**

作为一个前端开发者，掌握HTML和CSS的基本知识是非常重要的。以下是一些常用的HTML和CSS属性方法的汇总。

### HTML相关####1. 元素选择器元素选择器用于选择网页中的某个元素。

html<!--选中所有p元素 -->
<p>这是一个段落。</p>

####2. 类选择器类选择器用于选择具有相同类名的元素。

html<!--选中所有带有class="my-class"的元素 -->
<div class="my-class">这是一个div元素</div>

####3. ID选择器ID选择器用于选择唯一的元素。

html<!--选中id为"my-id"的元素 -->
<div id="my-id">这是一个div元素</div>

####4. 属性选择器属性选择器用于选择具有某个属性或值的元素。

html<!--选中所有带有href属性且值为" -->
<a href=" />

####5. 通配符选择器通配符选择器用于选择网页中的所有元素。

html
* {
 background-color: #f2f2f2;
}

### CSS相关####1. 背景颜色背景颜色属性用于设置元素的背景颜色。

css/* 设置div元素的背景颜色为红色 */
div {
 background-color: #ff0000;
}

####2. 文字颜色文字颜色属性用于设置元素中的文本颜色。

css/* 设置p元素中的文本颜色为蓝色 */
p {
 color: #0000ff;
}

####3. 字体大小字体大小属性用于设置元素中的文本大小。

css/* 设置h1元素中的文本大小为24px */
h1 {
 font-size:24px;
}

####4. 文字对齐方式文字对齐方式属性用于设置元素中的文本对齐方式。

css/* 设置p元素中的文本居中对齐 */
p {
 text-align: center;
}

####5. 边框样式边框样式属性用于设置元素的边框样式。

css/* 设置div元素的边框样式为实线 */
div {
 border-style: solid;
}

####6. 圆角大小圆角大小属性用于设置元素的圆角大小。

css/* 设置button元素的圆角大小为10px */
button {
 border-radius:10px;
}

####7. 盒模型盒模型属性用于设置元素的盒模型。

css/* 设置div元素的盒模型为边框盒 */
div {
 box-sizing: border-box;
}

####8. flex布局flex布局属性用于设置元素的flex布局。

css/* 设置div元素的flex布局 */
div {
 display: flex;
 justify-content: center;
 align-items: center;
}

####9. grid布局grid布局属性用于设置元素的grid布局。

css/* 设置div元素的grid布局 */
div {
 display: grid;
 grid-template-columns: repeat(3,1fr);
 grid-gap:10px;
}

####10. 动画效果动画效果属性用于设置元素的动画效果。

css/* 设置button元素的动画效果 */
button {
 animation-name: my-animation;
 animation-duration:2s;
}

@keyframes my-animation {
 from {
 transform: scale(1);
 }
 to {
 transform: scale(1.5);
 }
}

以上就是一些常用的HTML和CSS属性方法的汇总。这些属性可以帮助你创建出更美观、更易于使用的网页。