[分享]css入门基础详解笔记案例

CSS是Cascading Style Sheets的首字母缩写，意为层叠样式表。它是一门用于设置HTML或XML文件外观的样式表语音。通过CSS，我们可以控制网页的布局、颜色、字体、大小等。/ CS...

CSS是Cascading Style Sheets的首字母缩写，意为层叠样式表。它是一门用于设置HTML或XML文件外观的样式表语音。通过CSS，我们可以控制网页的布局、颜色、字体、大小等。

/* CSS样式基础 */
body{
    background-color: #F9F9F9;  /* 设定背景色 */
    font-size: 16px;  /* 设定字号 */
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Arial",sans-serif;  /* 设定字体 */
}
h1{
    font-size: 28px;  /* 设定标题字号 */
    font-weight: bold; /* 设定粗体 */
    color: #333;  /* 设定标题颜色 */
}
p{
    line-height: 1.5;  /* 设定行间距 */
    color: #666;  /* 设定正文颜色 */
} 

在CSS样式设置时，尤其需要注意层级关系和优先级。当多个样式同时作用于一个元素时，如果优先级相同，则样式按照就近原则被应用。如果优先级不同，则最高优先级的样式会被应用。

除此之外，我们还可以使用CSS框模型、布局、选择器等相关知识和技巧来实现网页美化与样式调整。

/* CSS选择器 */
div p{ /* 父元素为div的所有子元素p */
    font-size: 18px;
    color: #999;
}
ul li:nth-child(odd){ /* 列表中的奇数项 */
    background-color: #F9F9F9;
} 

总的来说，CSS是网页设计与编程的重要组成部分，熟练的掌握CSS的基础知识，可以为我们带来更美观、更优质的网页设计效果。