CSS基础-组团学

一、CSS介绍

CSS(Cascading Style Sheets) ，层叠样式表（级联样式表），用于设置HTML页面中的文本内容的字体、大小、对齐方式等，图片的宽高、边框样式、边距等以及页面的布局排版等各种外观显示样式。

CSS以HTML为基础，可以针对不同的浏览器设置不同的样式。CSS的出现可以说拯救了我们的页面，让HTML 专注去做结构呈现，而样式全部交给 CSS来美化。

网页中CSS的重要性：

我们在写HTML时，需要遵从一定的规范。CSS也有一定的语法规范，要想熟练地使用CSS对页面进行修饰，首先需要了解CSS样式规则，具体格式如下：

CSS语法由两部分组成：选择器和声明。声明包括：属性和属性值
选择符 {属性: 属性值 ; 属性:属性值}

规则：

示例

p {
  color: red;  /* 所有段落标签字体颜色是红色*/
}

CSS放到什么位置呢？怎么让它跟我们的HTML文件关联起来呢？

内联样式，又称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<h2 style="color:red;">
    红色标题
</h2>

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

语法

<head>
	<style type="text/CSS">
   		 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
        p{ color:#000;font-size:14px;}
	</style>
</head>

说明

（1）style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

（2）type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

当我们页面比较复杂，大量的内部样式，会导致页面看上去不美观，而且不利于维护。这时我们通常将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

格式

<head>
  <link rel="stylesheet" type="text/CSS"  href="CSS文件的路径"  />
</head>

网页中的标签很多，为了更好的完成我们的网页布局，我们需要在不同地方会放不同类型的标签。

根据标签在网页中的显示模式，可以将HTML标签一般分为块级标签和行内标签两种类型，即块元素和行内元素。

说明

每个块元素通常都会独自占据一行或多行，可以设置其宽度、高度、对齐方式等属性，常用于网页布局和网页结构的搭建。
举例

常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素，非常适合布局，所以我们常称之为 “CSS+DIV布局”。
特点

注意

文字类块级标签，里面不能放其他块级元素。比如，只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt。

说明

行内元素（内联元素）不占独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
举例

常见的行内元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>标签最典型的行内元素。
特点

链接里面不能再放链接！

通过设置display的值，改变元素的显示模式。