学习周记3

最新推荐文章于 2022-09-02 16:21:29 发布

Ddddd_xr

最新推荐文章于 2022-09-02 16:21:29 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/Ddddd_xr/article/details/115098559

版权

CSS基础

一、CSS的创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
1.内部样式表
将元素样式要求的CSS写入< style > 标签在文档头部定义内部样式表
注：应用于单个文档需要特殊的样式时
应用实例

<html>
	<head>
		<style>
			h1 {color:blue;}
			p {margin-left:50px;}
			</style>
	</head>
	<body>
		<h1>人物简介</h1>
		<p>姓名：哪吒</p>
		<p>性别：男</p>
		<p>登场作品：《哪吒之魔童降世》</p>
		<p>人物照片：</p>
		<img src="../image/nezha.jpg"width="200">
		<p>相关链接</p>
		<a href="https://baike.baidu.com/item/%E5%93%AA%E5%90%92/35250?fr=aladdin">哪吒（中国古代人物）百度百科</a>
	</body>
</html>

浏览器运行结果
在这里插入图片描述
2.外部样式表
新建一个样式表应该以 .css 扩展名进行保存
在html文件中使用 < link > 标签链接到样式表。 < link > 标签在头部
注：适用于样式需要应用于很多页面时
应用实例
样式表文件

h1 {color:red;}
p {margin-left:20px;}

页面文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
		<h1>这是主页</h1>
		<p>第一段</p>
	</body>
</html>

浏览器运行结果
在这里插入图片描述

二、CSS背景

CSS 背景属性用于定义HTML元素的背景。
1.背景颜色
background-color 属性定义了元素的背景颜色，
.CSS文件中放在body选择器中，可设定整体背景颜色
也可放在各元素的选择器中设定某元素的背景颜色
应用实例
样式表文件

h1 {color:red;}
p {margin-left:20px;}
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#ff55ff;}

页面文件同上
浏览器运行结果
在这里插入图片描述
2.背景图像
background-image 属性描述了元素的背景图像.
.CSS文件中放在body选择器中
注：默认情况下，背景图像进行平铺重复显示
在background-image后加background-repeat:repeat-x;改图像为水平平铺。
加background-repeat:repeat-y;改图像为垂直平铺。加background-repeat:no-repeat;设置图像不平铺。可以利用 background-position 属性改变图像在背景中的位置。
水平平铺的实例
样式表文件

h1 {color:red;}
p {margin-left:20px;}
body
{background-image: url(../../image/z2%20.jpg);
background-repeat:repeat-x;
}

页面文件同上
浏览器运行结果
在这里插入图片描述

三、CSS列表

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
应用实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>