CSS基础知识1 - 作业

CSS样式引入示例1 （行内引用样式）


<body>

<p style="background-color: lightgreen;">Hello World</p>
<!-- 可置换元素，一般以单标签为主，也有使用双标签的类型，
如video\script\audio等-->
<img src="1.jpg" alt="" widt="100" height="80" />
<input type="text" style="width: 50px" />
<a href="" style="width: 50px">php.cn</a>
<strong style="width: 100px">PHP中文网</strong>
<!-- p元素、a元素、strong元素为不可置换元素，不能设置宽高，
因为a和strong元素中的width属性不起效。img和input是可置换元素，
可设置宽高.运行效果为添加图片中的图1.jpg -->![]
</body>

CSS样式引入示例2 （外部样式表引用）


<head>
<style>

<link rel="stylesheet" herf="css/style.css" >
</style>
</head>

ul {

border: 1px solid #ccc;
background-color: wheat;
padding: 15px 30px 15px;
}
ul > li {
margin: 10px;
}
h2 {
color: blue;
}

<body>
<h2>php中文网第11期上课啦</h2>
<ul>
<li>前端基础：html5/css3/flex/grid</li>
<li>php开发：php+pdo+mvc+composer</li>
<li>前端进阶：javascript+jquery+layui</li>
<li>Laravel:实战</li>
</ul>
</body>
![](https://img.php.cn/upload/image/138/616/247/1586260705675462.jpg)
<!-- 也可以将style.css这个样式表中的样式规则进行拆分并实现外部引用，
比如将h2元素和ul元素的样式规则封装在不同的.css后缀名的文件中,
h2的样式规则封装在style1.css，ul的样式规则封装在style2.css中，
在link标签中href属性引入css/style2.css文件，而style2.css文件中，
可以通过一条指令@import url(style1.css);
或者@import "style1.css";将h1拆分的样式规则文件加载到style2.css中，
实现代码的简化及复用，需要注意的是，@import指令必须写在第一行，例：
@import "style1.css";
ul {
border: 1px solid #ccc;
background-color: wheat;
padding: 15px 30px 15px;
}
ul > li {
margin: 10px;
}

css样式引入示例3 (内部样式表引用)

<head>
<style>
<！-- 内部样式表引用的时候需要注意@import指令的引用路径，
该指令也表示了这条样式规则只在当前html文档中有效，
书写位于<style>标签中的第一行。 -->
@import "css/style1.css";
ul {
border: 1px solid #ccc;
background-color: wheat;
padding: 15px 30px 15px;
}
ul > li {
margin: 10px;
}
</style>
</head>
<body>
<h2>php中文网第11期上课啦</h2>
<ul>
<li>前端基础：html5/css3/flex/grid</li>
<li>php开发：php+pdo+mvc+composer</li>
<li>前端进阶：javascript+jquery+layui</li>
<li>Laravel:实战</li>
</ul>
</body>

总结：css层叠样式表通过样式规则将html元素渲染到浏览器中，就像一个原产品，通过各种包装，最终形成外表色彩鲜明的商品。display属性，能控制块级元素、行内元素、行内块元素的显示方式，类似转换类型，使被转换的元素具备新的显示方式，比如水平排列、垂直排列，原本不可以设置宽高的元素也可以设置宽高等，也经常应用在flex、grid布局中。因为没有云服务器，之前买了个虚拟主机到现在也没搞懂怎么用，所以交作业的时候暂时只能这么交了，希望老师理解，媒体查询不懂该怎么写，代码我没像css一样添加进来到作业里，但是知道它主要应用在移动端布局，老师视频也讲得很清楚，剩下的课后我自己多了解。

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：也挺好的, 不必太在意这个