HTML是骨架,CSS就是皮肉,CSS层叠样式表能对网页元素进行布局和修饰。
1.CSS产生背景
早起HTML版本, 标签较少, 想设置样式, 可以直接通过属性或者其他标签(如:h1 标签设置颜色和尺寸 借助 font标签 设置color , size属性,已经被弃用了,无法显示)。
随着标签的增多, 样式需求增多, 以上杂乱的结构属性无法满足需求。
于是产生了单独用来处理样式的css。
2.CSS的作用
- 让开发前端代码更有组织性;
- 让代码样式拥有复用性;
- 让页面的结构和样式进行分类开发;
css 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
3.CSS演示
尝试写出一个页面效果如下图:
具体要求分析:标题:字体大小:30px 字体颜色:red 水平居中 正文:字体大小:18px 字体颜色:orange 字符间距:10px 文本阴影: 4px 3px 2px #ccc 水平居中。
<h1>望庐山瀑布 - 李白</h1>
<p>日照香炉生紫烟</p>
<p>遥看瀑布挂前川</p>
<p>飞流直下三千尺</p>
<p>疑是银河落九天</p>
<style>
h1{
font-size: 30px;
color: red;
text-align: center;
}
p{
font-size: 24px;
color: orange;
text-align: center;
letter-spacing: 10px;
text-shadow: 4px 3px 2px #ccc;
}
</style>