前端开发笔记3

一、在html中引入内部和外部 .css文件的几种方法

1、html引入css文件之直接在div中使用css样式制作div+css网页

<div style="border:1px red solid;">html引入css文件</div>

    说明:html引入css文件的这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了css的优势

2、html引入css文件之html中使用style自带式

直接在header 里面写css

<style type="text/css">

div{margin: 0;padding: 0;border:1px red solid;}

</style>

说明:html引入css文件的这种方法适合在页面较少的情况下使用。优点:速度 快,所有的css控制都是针对本页面标签的,没有多余的css命令;再者不用外链css文件。直接在html文档中读取样式。t引用外部CSS文件

将一个独立的.css文件引入HTML文件中,导入式使用css规则引入外部css文件,<style>标记也是写在<head>标记中,使用的语法如下:

<style type="text/css">

    @import"mystyle.css";

</style>

4、html引入css文件之使用link引用外部CSS文件 

在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css

1

<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

说明:html引入css文件的这种方法就不需要style标签,而是直接通过link一个样式来引用外部样式,推荐使用link来引用外部的css样式方法。

二、设计div样式的时候需要注意的地方

在div中插入图像时,在div元素中插入class属性无效,class属性需要插在img元素中

css响应式设计

这样设计改变浏览器窗口的大小时,图片的大小会自适应当前这个大小的浏览器窗口。

猜你喜欢

转载自blog.csdn.net/zxx20180907/article/details/89202170