HTML设计样式

最新推荐文章于 2024-06-24 23:36:08 发布

染叶已秋

最新推荐文章于 2024-06-24 23:36:08 发布

阅读量1.4k

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_45428087/article/details/127703803

版权

# 一.设计HTML框架

1.绘制外边框

dorder: 1px solid black;width:400px;height:500px;border-radius:5px;

2.设置外边框横向居中显示

margin-left:auto;margin-right:auto;

3.设置外边框上边距

margin-top:20px;

# 二.css三种引入方式

1.行内样式

行内样式通过style属性直接编写在标签中，多个样式规则之间使用分号隔开
语法:
<p style="样式规则"></p>

行内样式只对当前标签生效

2.内嵌样式

内嵌样式一般写在<head>部分
语法：
   <style type="text/css">
        选择器selector {样式规则;}
   </style>

内嵌样式在当前页面中有效

3.外部样式

外部样式定义在单独的*.css 文件中，一般放置在站点一个CSS目录中，通过<link>标签在<head>部分引用。一般外部样式的文件名和网页名称一致
语法:
<link href="外部样式路径" rel="stylesheet">

外部样式可以用在同一个网站的多个网页中，只需要在各个页面中去引用外部样式即可

# 三.盒子模型

1.外边距相关属性

margin：外间距,边框和边框外层的元素的距离
margin写法:
   margin:10px;/*上下左右四个方向距离相同*/
   margin: 10px 20px 30px 40px;/*四个方向：上,右,下,左（顺时针）*/
   margin: 10px 20px;/*四个方向：上下,右左（顺时针）*/
   margin:10px 20px 30px;   /*第一个用于上，第二个用于右-左，第三个用于下*/

2.内边距相关属性

padding：内间距,元素内容和边框之间的距离((top right bottom left)),用法同上

# 四.样式的使用规则

行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：
1.有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
2.某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
3.某张网页内，部分内容”与众不同“，采用行内样式