css十行代码

今天我们来学习一下CSS十行代码。

代码1：

body {
  background-color: #eee;
}

这行代码可以设置整个页面的背景颜色为浅灰色 (#eee)。可以根据自己的喜好选择不同的颜色。

代码2：

h1 {
  font-size: 2em;
}

这行代码可以改变网页中所有h1标题的字体大小为2倍。可以根据需要修改字体大小。

代码3：

p {
  color: blue;
}

这行代码可以使网页中所有p标签中的文本颜色变为蓝色。可以尝试更改其他颜色。

代码4：

a:link {
  text-decoration: none;
}

这行代码可以将所有未点击的链接文本去掉下划线。a:link代表所有未点击状态下的链接。

代码5：

a:hover {
  text-decoration: underline;
}

这行代码可以在鼠标悬停在链接上时为文本添加下划线。a:hover代表链接处于鼠标滑过的状态。

代码6：

img {
  width: 100%;
  height: auto;
}

这行代码可以使图片在网页上自适应大小。width设置为100%，height设置为auto可以保持图片比例不变。

代码7：

ul {
  list-style: none;
}

这行代码可以去掉无序列表前面的默认样式 (圆点)。可以使用其他样式代替圆点。

代码8：

.Box {
  margin: 20px auto;
  width: 80%;
  background-color: #fff;
}

这行代码可以定义一个盒子的样式。margin: 20px auto表示上下间距为20像素，左右自适应。width: 80%设置盒子宽度为屏幕的80%。background-color: #fff表示盒子的背景颜色为白色。

代码9：

@media screen and (max-width: 768px) {
  .Box {
    width: 100%;
  }
}

这行代码可以使网页在屏幕宽度小于768像素时盒子宽度变为100%。这是响应式布局的基本语法。

代码10：

input[type="text"] {
  padding: 10px;
}

这行代码可以给所有文本输入框添加10像素的内边距，使输入框更美观耐用。

以上就是CSS十行代码的介绍。CSS是网页设计中必不可少的技术，通过灵活运用CSS可以使网页变得更美观、更实用。