初识HTML/CSS之CSS篇

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS有这么几个优势：

内容与表现分离；

网页的表现统一，容易修改；

丰富的样式，使页面布局更加灵活；

减少网页的代码量，增加网页的浏览速度，节省网络带宽；

运用独立于页面的CSS，有利于网页被搜索引擎收录；

1、选择器，优先级依次升高

（1）标签选择器

指定要进行设置属性的标签进行同标签下的批量操作，一种方式是定义在head标签内，通过style标签声明。这里将所有h5标签下的文字改成红色。

<!--这里是head-->
<style>
h5{
color: red;
}
</style>

...

<!--这里是body-->
<h1>我是h1一号</h1>
<h1>我是h1二号</h1>
<h1>我是h1三号</h1>
<h5>我是h5一号</h5>
<h5>我是h5二号</h5>
<h5>我是h5三号</h5>

（2）类选择器

设置指定为相同类名内容的属性，用“.”加上类名表示。这里将class名为even的内容文字设置为字体大小为15px，颜色为蓝色。

<!--这里是head-->
<style>
.even{
font-size: 15px;
color: blue;
}
</style>

...

<!--这里是body-->
<p>我是h5一号<p/>
<p class="even">我是h5二号</p>
<p>我是h5三号</p>
<p class="even">我是h5四号</p>
<p>我是h5五号</p>
<p class="even">我是h5六号</p>

（3）ID选择器

设置指定id内容的属性，用#id名表示具有唯一性。这里将id为two的文本颜色设为绿色并居中显示。

<!--这里是head-->
<style>
#two{
color: green;
text-align: center;
}
</style>

...

<!--这里是body-->
<p>我是h5一号<p/>
<p id="two">我是h5二号</p>
<p>我是h5三号</p>

2、设置属性三种方法，优先级依次降低

（1）行内样式：指在一个标签内设置样式属性。

（2）内部样式：指在当前html文件中通过style标签设置样式

（3）外部样式：指新建一个CSS文件设置好样式属性，再将其导入到html文件中，有两种导入方式，分别是使用link标签指定链接和使用@import导CSS文件

这里来看一下第二种内部样式，首先创建一个css文件，然后在head标签内加入一个link标签，rel属性指定了外部样式表，href属性指定css文件路径，type属性指定文件类型。

<!--这里是head-->
<link rel="stylesheet" href="style.css" type="text/css"/>

...

<!--这里是body-->
<p>我是h5一号<p/>
<p id="two">我是h5二号</p>
<p>我是h5三号</p>

在CSS文件指定选择器

#two{
color: yellow;
}

3、div标签

主要用于网页布局和排版网页上的内容。

（1）背景属性

颜色：background-color

图像：background-image:url（路径），background-repeat（重复方式），background-position（背景定位）

<!--这里是head-->
<style>
#div{
width: 400px;
height: 100px;
background-color:dodgerblue;
}
</style>
...

<!--这里是body-->
<div id="div">
<p>我是h5一号<p/>
<p>我是h5二号</p>
<p>我是h5三号</p>
</div>

（2）浮动（float属性）

有三个值分别是left、right、none，指元素向左、右或者不浮动

首先,必须知道两件事:

浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的；

HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示。

而float属性就是为了改变block的默认属性，使其不再独占一行

<!--这里是head-->
<style>
.left
{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat
{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right
{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
}
</style>
...

<!--这里是body-->
<div class="left">div left float:none</div>
<div class="right">div right</div>

<div class="leftfloat">div left float:left</div>
<div class="right">div right</div>

<span class="left">span left float:none</span>
<span class="right">span right</span>

可以看到当第一个block对象未设置float属性时其独占一行，将第二个元素“挤”到下面，而第三个元素设置了left则改变了这种默认的属性，但是in-line对象却不会独占一行。

（3）边距

分为内边距（padding）和外边距（margin）



附加内容：使用开发者工具

打开Firefox，点击菜单在开发者选项中选择调试器即可进行调试





点击一下第一个箭头图标即可抓取界面上的某一个元素并查看其属性值。

点击源代码也可以定位到某一元素。

除了查看器，还有调试器以及可以进行性能分析，查看内存使用情况等等。。。。。。