首页 CSS层叠样式表
pay pay

CSS层叠样式表

日期: 2021年12月
栏目: CSS层叠样式表
阅读: 602
作者: Python自学网

HTML是骨架,CSS就是皮肉,CSS层叠样式表能对网页元素进行布局和修饰。

1.CSS产生背景

早起HTML版本, 标签较少, 想设置样式, 可以直接通过属性或者其他标签(如:h1 标签设置颜色和尺寸 借助 font标签  设置color  , size属性,已经被弃用了,无法显示)。

随着标签的增多, 样式需求增多, 以上杂乱的结构属性无法满足需求。

于是产生了单独用来处理样式的css。

2.CSS的作用

  • 让开发前端代码更有组织性;
  • 让代码样式拥有复用性;
  • 让页面的结构和样式进行分类开发;

css 主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

3.CSS演示

尝试写出一个页面效果如下图:

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>

 

 

目录
  • CSS层叠样式表
回顶部