网页入门D3——CSS语法和基础属性

最新推荐文章于 2022-03-23 16:09:43 发布

蔺WIT

最新推荐文章于 2022-03-23 16:09:43 发布

阅读量770

点赞数 2

分类专栏：网页制作文章标签： css html

本文链接：https://blog.csdn.net/m0_53156691/article/details/122530862

版权

网页制作专栏收录该内容

13 篇文章 9 订阅

订阅专栏

CSS语法和基础属性总结与练习

写在前面：如果说HTML页面是一座勉强可以遮风避雨的毛坯房。那么CSS就是一位优秀的装修设计师。 CSS样式可以解决页面的布局及样式的问题，极大的提升了网页的美观性与可读性。

1、在HTML文档中引入CSS的3种常用方法

1.1外部样式表——使用`< link >`标签引入CSS样式表

外部样式表指的是CSS文件，文件的后缀名为.css， HTML文件通过 link标签连接到样式表。CSS文件一般放在CSS文件夹里。外部样式表中不能包含任何标记语言（HTML语言），只能有CSS规则和CSS注释。

在HTML文件中，使用< link >标签引入CSS文件时的语法如下：

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

< link >标签中的常用属性：

属性	值	描述
href	url	规定被链接文档的位置
rel	alternate/author/help/icon/ licence/next/pingback/prefeach/prev/ search/sidebar/stylesheet/tag	规定当前文档与被链接文档之间的关系
type	MINE_type	规定被链接文档的MIME类型

使用外部样式表时，网页分为HTML文件与CSS文件，遵循了W3C规定的“网页的结构、表现和行为分离”的准则。如果需要修改页面的样式，只需修改CSS文件即可。并且多个页面可以共用一个相同的样式表，能够大大提高网页的性能。

1.2内部样式表

使用内部样式表的方法是在HTML页面的head元素中嵌入style元素，将CSS样式都写在CSS样式中。（如第一篇博文中所示的）

1.3内联样式

使用内联样式时，可以将使用元素的style属性直接在标签内添加样式。style属性可以包含任何CSS属性，style属性中有多个CSS属性时，要用分号隔开。但是内联样式不利于网页维护与重构，还会降低代码的可读性，通常很少使用。

2、CSS语法简单摘要

CSS规则也叫CSS声明，一条CSS声明由两个主要部分构成：选择器和声明块。声明块可以由一条或多条声明构成，每条声明由CSS属性和值组成。

选择器的种类：

1.元素选择器
最常见的CSS选择器，例如：

h1{
	line-height: 90px;
	color: royalblue;
	font-size: 50px;
}

2.群组选择器
给多个选择器添加同样的CSS样式，各个选择器之间用逗号隔开。

h1,h2,h3{
	line-height: 90px;
	color: royalblue;
	font-size: 50px;
}

3.类选择器
使用类选择器之前，需要先标记对应元素，也就给这个元素设定一个class属性。在CSS代码中，引用class属性值，需要在属性值前面加一个“.”，用于标识它是一个类选择器。

.btn{
	 width: 200px;
	 height: 60px;
}

4.id选择器
id选择器与类选择器用法相似，先给元素设定id值，id值是唯一的。在CSS引用时，需要在前面加一个“#”标识这是一个id选择器。

#start{
       color:blue;
}

5.组合选择器
组合选择器可分为：
后代选择器：使用方法是选择器+（空格）+添加样式对象。
（给已有选择器标签之中的子代标签和后代标签添加样式效果）

div a{
      color:red;
}

父子选择器：使用方法是选择器>添加样式对象。
（给已有选择器标签之中的子代标签添加样式效果）

div>a{
      color:red;
}

6.伪类选择器
可视为其他选择器的一种延伸，给选择器增加特殊效果。
例如：nth-of-type(n),用于匹配同类型元素中的第n个同级兄弟元素。

P:nth-of-type(1){
   color:blue;
}

3、CSS颜色

表示颜色的3种常用方法：
1.英文名称表示法

color: red;

2.十六进制颜色值表示法

color: #FF0000;

3.rgb(f,g,b)函数表示法

color: rgb(255,0,0)

以上三种方法都是表示红色。

4、文本的常用样式

1.文本颜色常用属性：

文本颜色：color
文本背景颜色：background-color
文本水平对齐：text-align(属性值可为：left、right、center、justify）

2.字体：

文本的字体：font-family(例:font-family:“华为楷体”)
文本的字体大小：font-size
文本的行高：line-height
段落的首行缩进：text-indent
（最后三项常以①px或em为单位，②基于父元素大小的百分比进行设置。这里px表示像素，em为默认的字体大小，与body元素的字体大小有关）

3.背景：

背景颜色：background-color:“颜色值”
背景图片：background-image:url(“图片背景”)
图片重复：background-repeat:“值”
图片大小：background-size:“值”
图片位置：background-position:“值”

4.CSS链接：
伪类选择器表示的4种链接默认状态：

状态	描述
a:link	默认状态，未访问过的链接
a:visited	用户已经访问过的链接
a:hover	当用户鼠标指针放在链接上时
a:active	链接被单击的那一刻

（tips：当为同一个链接设置不同状态时，遵循以下次序，否则样式可能会失效。hover状态必须位于link和visited状态之后，active状态必须位于hover状态之后。）
超链接默认会有下划线，将text-decoration属性值设为none，即可去掉下划线。

最后，通过学习CSS语法与文本样式，做了一个小小的网页设计练习。效果图如下：
在这里插入图片描述
对应的CSS与HTML代码如下：
CSS代码：

body{
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: beige;
	background-image: url(../img/index.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
h1{
	font-family: "MicrosoftYaHeiUI-Bold"
	font-size: 40px;
	text-align: center;
	color: #4169E1;
}
p{
	font-size: 20px;
	line-height: 2;
	text-indent: 2em;
	font-family: "MicrosoftYaHeiUI-Bold"
	mar
}
.pre{
	background-color: yellow;
}
a:link{
	color: green;
	text-decoration: none;
}
a:visited{
	color: blueviolet;
}
a:hover{
	color: red;
}
a:active{
	color: blue;
	background-color: grey;
}

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/D3.css" />
		<title>D3</title>
	</head>
	<body>
		<h1>探索宇宙的奥秘</h1>
		<p>
			<span class="pre">宇宙</span>（Universe）在物理意义上被定义为所有的空间和时间（统称为时空）及其内涵，
		包括各种形式的所有能量，比如电磁辐射、普通物质、暗物质、暗能量等，
		其中普通物质包括行星、卫星、恒星、星系、星系团和星系间物质等。
		宇宙还包括影响物质和能量的物理定律，如守恒定律、经典力学、相对论等。
		</p>
		<p>
			<span class="pre">大爆炸理论</span>是关于宇宙演化的现代宇宙学描述。根据这一理论的估计，
		空间和时间在137.99±0.21亿年前的大爆炸后一同出现，随着宇宙膨胀，
		最初存在的能量和物质变得不那么密集。最初的加速膨胀被称为暴胀时期，
		之后已知的四个基本力分离。宇宙逐渐冷却并继续膨胀，允许第一个亚原子粒子和简单的原子形成。
		暗物质逐渐聚集，在引力作用下形成泡沫一样的结构，大尺度纤维状结构和宇宙空洞。
		巨大的氢氦分子云逐渐被吸引到暗物质最密集的地方，形成了第一批星系、恒星、行星以及所有的一切。
		空间本身在不断膨胀，因此当前可以看见距离地球465亿光年的天体，因为这些光在138亿年前产生的时候距离地球比当前更近。
		</p>
		<p>
			<span class="pre">天文学家</span>通过假设ΛCDM模型准确地描述了宇宙从非常均匀、炽热、密集的原始状态到其当前状态的演变，
		并通过测量构建该模型的宇宙参数来计算宇宙的年龄。该模型在理论上被很好地理解，
		并且在最近一段时间得到高精度天文观测数据（如WMAP探测器和普朗克卫星）的支持。
		拟合的观测结果通常包括宇宙微波背景辐射各向异性、Ia型超新星的亮度与红移的关系，
		以及包括重子声学振荡特征在内的大尺度星系聚集。其他观测结果，如哈勃常数、星系团丰度、弱引力透镜和球状星团年龄，
		与这些观测结果基本一致，为模型提供了检验，但当前测量的不太准确。假设ΛCDM模型是正确的，
		通过许多实验使用各种技术测量参数，根据截至2015年普朗克卫星的观测数据，可计算出宇宙年龄的最佳值，即137.99±0.21亿年。
		</p>
		<a href="https://baike.baidu.com/item/%E5%AE%87%E5%AE%99/31801?fr=aladdin" target="_blank">宇宙百科</a>
	</body>
</html>