第1天：CSS基本样式_样式cacle()-CSDN博客

本文链接：https://blog.csdn.net/lelara/article/details/84577715

今天学习了CSS基本样式和属性。在做练习的时候遇到一个小问题，最后解决了。

。记住：浏览器有默认余量和填充样式最开始记得一定写：* {保证金：0;填充：0}。

学习经验：

1，边缘值相邻两个元素的余量会叠加在一起

2，边缘子元素的值会传递给父元素

3，能用填充，尽量不用余量，余量浏览器兼容性较差。

4，H标签不能直接写在UL中，必须用立包起来。简言之，UL下只能是李标签。

下面是CSS常用基本样式和属性。

＃box1 {
width：350px;
高度：350像素;
背景：＃f00;
边界：10px solid＃000;
font-size：16px;
颜色：黄色;
font-weight：bold;
font-family：“宋体”;
行高：32PX;
font-style：italic;
text-indent：2em; / *首行缩进：1em =一个文字大小* /
text-align：left; / *对齐方式* /
text-decoration：underline; / *文字修饰：through-line（删除线），overline（下划线），underline（下划线），none * /
word-spacing：6px; / *词间距* /
letter-spacing：5px; / *字母间距（字间距）
* /
}

以下是练习：

<！DOCTYPE html>
<html lang =“en”>
<head>
<meta charset =“UTF-8”>
<title>网易新闻小实例</ title>
<style>
* {
margin：0;
填充：0;
}
#box {
width：300px;
高度：419px;
background：url（bg.png）0 0不重复;
保证金：0自动;
}
li {
font-family：“宋体”;
font-size：12px;
line-height：24px;
list-style：none;
填充左：52px;
vertical-align：middle;

}
.title {
height：32px ;
填充：6像素;

}
.con1 {
height：58px;
padding-top：10px;
}
.con2 {
height：126px;
}
.con3 {
height：78px;
}
.con4 {
height：128px;
}

</样式>

</ head>
<body>
<div id =“box”>
<ul>
<li class =“title”> <h5>网易产品</ h5> </ li>
<li class =“con1”>免费邮VIP邮箱企业邮箱大师易信</ li>
<li class =“con2”>梦幻西游2新大话2新大话3藏地传奇魔兽世界星际争霸II倩女幽魂2武魂2天下3突击英雄新飞飞大唐无双零天谕英雄三国龙剑乱斗西游炉石传说UU加速</ li>
<li class =“con3”>考拉海购LOFTER博客相册花田交友约会女神跟帖抢购CC语音BoBo直播</ li >
<li class =“con4”>彩票理财商城贵金属电影票车险有道词典翻译云笔记印象派公开课云课堂读小说云音乐火车票游戏助手公正邮应用杂志新闻客户端大学慕课</ li>
< / ul>
</ div>
</ body>
</ html>

运行结果：