如何写好css2

上片文章已经说了什么是好的css 那我们应该如何组织自己得css呢

我觉得主要有这几点

1.通用样式

2.基础样式

3.组件和容器样式

4结构化样式

5.功能性样式

6.浏览器特定样式

下面我们会对这几种css 去逐个探究

1.首先是通用样式，通用样式用来设定基准，以消除不同浏览器得不一致性。消除不一致性，在定义样式就可以更放心得去定义其他属性了

2.定义基础样式

　　基础样式会根据不同得元素对其添加不同得属性原则是定义基础样式时首先思考元素应用场景一般我们为元素设置这些基础样式：

　　　　color • font-family • font-size • font-weight • letter-spacing • line-height • margin • padding

　　对于 color、font-family、font-size、font-weight、letter-spacing 和 lineheight 属性，子元素继承自父元素，因此子元素的属性值不总是需要设置，比如说我们可以在body 里面设置font-size color line-height 等

　　我们把元素分为几大类分别讨论

1.区块元素比如说：

　　我们为这些元素设置padding font font-size line-height 对于 footer 和header 我们也可以为其设置margin

body {   background: #FFFFFF;   color: #333333;   font-family: Helvetica, Arial, sans-serif;   font-size: 14px;   line-height: 1.3;   padding: 5% 20%; } 
 
article, footer, header, nav {   padding: 0; } 
 
article, nav {   margin-bottom: 12px;   margin-top: 12px; } 
 
footer {   margin-top: 12px; } 
 
header {   margin-bottom: 12px; }

　　2.标题和文本元素 h1-h6 p标签

　　对于标题和文本元素我们主要为其设置字体大小粗细我们在使用得时候也不用为其设置专门得类和额外得样式了这样我们写的css也会更少也能更好让我们去使用html得语义化

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Georgia, Times, serif;
  font-weight: 100;
  line-height: 1.1;
  margin: 0.5em 0;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 21px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

p,
pre {
  margin-bottom: 12px;
  margin-top: 12px;
}

posted @ 2021-01-27 20:00 码农方块阅读(78) 评论(0) 收藏举报

刷新页面返回顶部

码农方块

如何写好css2

公告