HTML+CSS基础篇4----CSS(入门)超级常用样式

1.什么是CSS?

      CSS是(Cascading Style Sheets)层叠样式表的英文缩写。主要作用就是为了给HTML增添样式,也就是让HTML页面更炫酷。下面拆分来分析一下层叠样式表的含义。

      很明显,关键词是样式表,层叠是作为形容词修饰样式表的,所以我在这里先解释样式表,再解释层叠。

     样式表:用于修饰HTML网页,表在这里可以理解为针对于HTML页面的每一个元素修饰,从而形成一个像表一样有规律排列的样式内容。

     层叠:这里可以分为两层意思来理解:一是一个HTML页面可以由多个CSS来修饰,二是针对于同一个元素,同一种属性可以有多种修饰方式,但只显示其中最特殊的一种,也就是只显示叠好的一堆纸中最上面的一页纸。

2.使用CSS的方法?(如何让CSS嵌入到HTML页面中)

    有三种方式可以将CSS样式内容嵌入到HTML页面中。

    a.在html网页中,加入一个style标签,在这个style标签里面写css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试专用</title>
		<style>
			p{
				color:red;
			}
		</style>
	</head>
	<body>
		<p>这是一首简单的小情歌</p>
	</body>
</html>


    b.可以直接把style里面的代码放到一个单独的文件中,通过link标签去引入 (常用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试专用</title>
		<link type="text/css" rel="stylesheet" href="allenyhy.css">
	</head>
	<body>
		<p>这是一首简单的小情歌</p>
	</body>
</html>
p{
  color:red;
}


    c.直接在html开始标签的style属性里面去写css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试专用</title>
	</head>
	<body>
		<p style="color: red;">这是一首简单的小情歌</p>
	</body>
</html>

这三种不同的嵌入方式达到了同一个效果,即

  简单总结一下,对于非常非常简单的页面,我们可以采用第一种嵌入方式,但是通常页面也不会简单到那里去,所以,第二种链接一个新的CSS文件是我们最常用的方式,分开管理不仅能提高效率,还能减少维护工作,使页面更清晰整洁。

3.CSS的语法规则是什么,我要怎样学习?

   其实学好CSS有两个重点:

   1).如何将想要设置的样式(css)与HTML中的元素产生关联,也就是如何精确的修饰每一个元素,简单来说,就是如何很好的使用CSS的选择器,接下来我将详细的介绍有关选择器的内容。

    2).如何修饰这些元素,这就是我们接下来也会讲到的有关CSS的各种属性。

    CSS的语法规则为:

     选择器{
     属性名称:属性值;
     属性名2:属性值2;
     ....
     }  

    选择器对应上面的第一个重点,属性名称和属性值对应上面的第二个重点。

    在这里我们先介绍最最最常用的三种基本选择器,在接下来的博客中我会专门花一章来介绍选择器(因为太多了)。

    1)类选择器

...
<body>
     <p class="important_point">这是一个重点内容</p>
</body>
...
.important_point{
color:red;          /*设置段落的字体颜色为红色*/
font-size:14px;     /*设置字体的大小为14px*/
}

  2)id选择器

...
<body>
     <p id="important_point">这是一个重点内容</p>
</body>
...
#important_point{
color:red;          /*设置段落的字体颜色为红色*/
font-size:14px;     /*设置字体的大小为14px*/
}

 3)标签选择器

...
<body>
     <p>这是一个重点内容</p>
</body>
...
p{
color:red;          /*设置段落的字体颜色为红色*/
font-size:14px;     /*设置字体的大小为14px*/
}

  三种选择器的效果是一样的:

  总结:

  类选择器:格式(class="类名"),一个标签可以有多个类,多个标签也可以同属同一个类。css表示方法(.类型{属性名=属性值;})

  id选择器:格式(id="id名"),一个标签只有有一个属性名,同时id名是唯一的,不同的标签不能使用同一个id名。css表示方法(.id名{属性名=属性值;})

  标签选择器:直接使用标签即可.css使用方式(标签{属性名=属性值;})

4.CSS超级常用的具体规则有哪些?    

4.1 颜色的表示方式
   a. rgb 模式  r 红色  g 绿色 b 蓝色 红绿蓝三原色可以组成n多颜色  rgb取值范围(0-255),也可以用百分数来表示。         
   b. 直接写颜色的名称
   c. 十六进制   #9f0000  (最常用)
   d. rgba(红色,绿,蓝,透明度)  a的取值范围0-1  0表示完全透明 1 表示不透明

 4.2字体属性(我用一张图来表示,其中web字体可不用关注)

 

4.3文本相关的属性

 

4.4背景相关的属性

4.5 边框相关的属性

 

4.6图像相关的属性


   

   

猜你喜欢

转载自blog.csdn.net/allenyhy/article/details/81125655
今日推荐