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代码



	
		
		测试专用
		
	
	
		

这是一首简单的小情歌


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



	
		
		测试专用
		
	
	
		

这是一首简单的小情歌

p{
  color:red;
}


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



	
		
		测试专用
	
	
		

这是一首简单的小情歌

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

HTML+CSS基础篇4----CSS(入门)超级常用样式_第1张图片

 

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

 

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

   其实学好CSS有两个重点:

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

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

    CSS的语法规则为:

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

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

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

    1)类选择器

...

     

这是一个重点内容

...
.important_point{
color:red;          /*设置段落的字体颜色为红色*/
font-size:14px;     /*设置字体的大小为14px*/
}

  2)id选择器

...

     

这是一个重点内容

...
#important_point{
color:red;          /*设置段落的字体颜色为红色*/
font-size:14px;     /*设置字体的大小为14px*/
}

 3)标签选择器

...

     

这是一个重点内容

...
p{
color:red;          /*设置段落的字体颜色为红色*/
font-size:14px;     /*设置字体的大小为14px*/
}

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

HTML+CSS基础篇4----CSS(入门)超级常用样式_第2张图片

  总结:

  类选择器:格式(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 表示不透明

HTML+CSS基础篇4----CSS(入门)超级常用样式_第3张图片

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

HTML+CSS基础篇4----CSS(入门)超级常用样式_第4张图片

 

4.3文本相关的属性

HTML+CSS基础篇4----CSS(入门)超级常用样式_第5张图片

 

4.4背景相关的属性

HTML+CSS基础篇4----CSS(入门)超级常用样式_第6张图片

4.5 边框相关的属性
HTML+CSS基础篇4----CSS(入门)超级常用样式_第7张图片

 

4.6图像相关的属性

HTML+CSS基础篇4----CSS(入门)超级常用样式_第8张图片
   

   

 

 

你可能感兴趣的:(前端开发)