50个常用的css代码

1. 重置所有元素的内外边距

* {
    margin: 0;
    padding: 0;
}

2. 设置body的背景颜色

body {
    background-color: #f0f0f0;
}

3. 设置body的字体大小和颜色

body {
    font-size: 16px;
    color: #333;
}

4. 设置body的字体家族

body {
    font-family: Arial, sans-serif;
}

5. 设置h1的字体大小

h1 {
    font-size: 2em;
}

6. 设置h1的字体颜色

h1 {
    color: #333;
}

7. 设置h1的字体加粗

h1 {
    font-weight: bold;
}

8. 设置段落的行高

p {
    line-height: 1.5;
}

9. 设置段落的文字对齐方式

p {
    text-align: justify;
}

10. 设置链接的颜色

a {
    color: #007BFF;
}

11. 设置链接的文字装饰

a {
    text-decoration: none;
}

12. 设置链接在鼠标悬停时的颜色

a:hover {
    color: #0056b3;
}

13. 设置链接在鼠标悬停时的文字装饰

a:hover {
    text-decoration: underline;
}

14. 设置图片的最大宽度

img {

    max-width: 100%;

}

15. 设置图片的高度自动

img {

    height: auto;

}

16. 设置列表样式类型为无

ul {

    list-style-type: none;

}

17. 设置列表项的内边距

li {

    padding: 10px 0;

}

18. 设置表格的宽度为100%

table {

    width: 100%;

}

19. 设置表格的边框合并

table {

    border-collapse: collapse;

}

20. 设置表格单元格的边框

td, th {

    border: 1px solid #ddd;

}

21. 设置表格头部的背景颜色

th {

    background-color: #f2f2f2;

}

22. 设置表单输入的宽度为100%

input[type="text"], textarea {

    width: 100%;

}

23. 设置表单输入的边框

input[type="text"], textarea {

    border: 1px solid #ddd;

}

24. 设置表单输入的内边距

input[type="text"], textarea {

    padding: 10px;

}

25. 设置按钮的背景颜色

button {

    background-color: #007BFF;

}

26. 设置按钮的字体颜色

button {

    color: #fff;

}

27. 设置按钮的边框为无

button {

    border: none;

}

28. 设置按钮的内边距

button {

    padding: 10px 20px;

}

29. 设置按钮在鼠标悬停时的背景颜色

button:hover {

    background-color: #0056b3;

}

30. 设置div的宽度

div {

    width: 100%;

}

31. 设置div的高度

div {

    height: 100vh;

}

32. 设置div的背景颜色

div {

    background-color: #f0f0f0;

}

33. 设置div的内边距

div {

    padding: 20px;

}

34. 设置div的外边距

div {

    margin: 20px 0;

}

35. 设置div的边框

div {

    border: 1px solid #ddd;

}

36. 设置div的边框半径

div {

    border-radius: 4px;

}

37. 设置div的盒子阴影

div {

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

}

38. 设置div的文字对齐方式

div {

    text-align: center;

}

39. 设置div的浮动

div {

    float: left;

}

40. 设置div的清除浮动

div::after {

    content: "";

    display: table;

    clear: both;

}

41. 设置div的位置为相对

div {

    position: relative;

}

42. 设置div的位置为绝对

div {

    position: absolute;

}

43. 设置div的位置为固定

div {

    position: fixed;

}

44. 设置div的左边距

div {

    left: 50px;

}

45. 设置div的右边距

div {

    right: 50px;

}

46. 设置div的上边距

div {

    top: 50px;

}

47. 设置div的下边距

div {

    bottom: 50px;

}

48. 设置div的z-index

div {

    z-index: 1;

}

49. 设置div的透明度

div {

    opacity: 0.5;

}

50. 设置div的过渡

div {

    transition: all 0.3s ease;

}