css嵌入样式练习

m0_74256887

于 2023-03-21 20:30:26 发布

阅读量93

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_74256887/article/details/129696571

版权

先了解一下这个页面的属性

字体属性：

color:#ff0000; 字体颜色

font-size: 32px; 字体大小

font-family: 华文楷体; 字体样式

font-weight: bold; 加粗

font-style: italic; 斜体

text-decoration: underline; 下划线

text-shadow: #008000 0px 0px 10px ; 文本阴影

letter-spacing: 10px; 字符间距

word-spacing: 200px; 单词间距

line-height: 30px; 行高

图片属性：

src：图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细

背景属性：

background-color: #CCC; 背景色

background-image: url(img/bg.jpg); 背景图片

background-repeat: no-repeat; 背景重复方式

background-size:50% 50%; 背景大小:宽和高

background-attachment: fixed; 背景是否固定

background-position: right bottom; 背景图片位置：可以写方位单词或坐标，比如-45px -95px;

源代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>嵌入样式</title>
   </head>
   <style>
       body{
           background-image: url('img/dingdang.jpg');
           background-repeat: no-repeat;
           background-size: 40% 40%;
           background-attachment: fixed;
           background-position: right bottom;
       }
       h1{
           color: aqua;
           font-family: 微软雅黑;
           text-align: center;
           background-color: #999;
       }
       span{
           font-style: italic;
       }
       h2{
           text-align: right;text-shadow: #000 0px 0px 5px;
       }
       p{
           text-indent: 30px;line-height: 25px;letter-spacing: 5px;
       }
   </style>
   <body>
       <h1>千城一面，城市应为<span>历史建筑</span>留下空间</h1>
           <h2>作者：朱昌俊</h2>
           <p>
               一栋拥有60年历史的老建筑，陷入了存废之争。2019年5月以来，
           有媒体报道称，原徽州行署文教局老楼的屋瓦、石台阶遭到破坏，疑
           似已进行拆除工作。黄山市相关部门回应称，掀掉该楼屋瓦，并非官
           方的意见，已叫停这一行为，并已要求有关机构加强对该楼的维护。
           </p>
           <p>
           建于上世纪50年代，有着60年历史的建筑，到底有无必要保护？
           与那些明清时代上百年的老建筑相比，它当然算“后辈”，但是在文
           保领域，一般50年以上的建筑，就可以被归为历史建筑。像上海就
           于2017年初开始，对城区50年以上历史建筑进行全面普查工作。这
           至少表明，拥有50年以上历史的建筑，在处理上就应多一点慎重。
           </p>
   </body>
</html>