CSS-入门到精通

前言

我们在上网的时候经常看到许多绚丽的网页，这样的网站代码量是不是很多呀？ NoNoNo不是这样的。先看一个例子（如下代码为HTML）：

<body>
    <font color="#000fff" face="楷体" size="6">这是第一条</font>
    <font color="#000fff" face="楷体" size="6">这是第二条</font>
    <font color="#000fff" face="楷体" size="6">这是第三条</font>
</body>

结果是这个样子的：
在这里插入图片描述
字体颜色为蓝色，字体为楷体，字体大小为6，如果在加上粗体、斜体等等是不是还要在后面加上一系列的代码。如果有100条这个得信息，这些属性就要写100次。如果我们想把这100条信息的字体换位宋体，这时麻烦来了，这么多该如何是好。可能有人说用替换，很显然在大项目中也是很麻烦的。程序猿是聪明的，这时就有了CSS。

CSS

官话：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

个人理解：根据HTML中设置的标签，把他们分成几类。一类一类去修饰它们。实现了网页内容与样式分离，这也是CSS最大的特点！

我们用CSS辅助我们上面的小例子，创建CSS就不错陈述了，直接看代码：

					<!--HMTL中的代码-->
<body>
    <span class="menu">这是第一条</span>
    <span class="menu">这是第二条</span>
    <span class="menu">这是第三条</span>
</body>

   					<!--CSS中的代码-->
.menu{
    color:#000fff;
    font-size:20px;
     font-family:楷体;
}

结果：
在这里插入图片描述
如果我们需要修改字体的属性，直接在CSS里面修改即可，是不是简单了很多。说到这里，HTML中ID选择器，类选择器，标签选择器。他们之间肯定有个优先级。我们先看看他们都是什么（下图）

优先级：ID选择器 > 类选择器 > 标签选择器。

CSS还可以并列写法和父子写法

如果我们两个选择器的样式相同，可以使用父子写法，两个选择器用 “，” 隔开
父子写法，两个选择器中间用空格隔开

块级元素、行内元素

<body>
    <div >这是第一条</div>      	块级元素，占一整行
    <span >这是第二条</span>    行内元素
    <span >这是第三条</span>
</body>

结果：
在这里插入图片描述
把行内元素转换为块级元素，可以在HTML之间修改，也可在CSS中编写 idsplay:block;

盒子模型

外边框：

     border-width: 1px;
	 border-color: #00f;
	 border-style: solid;    边框为实线，dashed为虚线。

内边距：

	padding-top:3px;
    padding-left:10px;
    padding-bottom:20px;    下边距

外边距：

margin:5px;

文本垂直居中：

line-height:60px;

浮动：

float:left;           向左浮动
clear:left;          清除浮动

定位：

position:relative;          相对定位，把自己位置看作定位,没有脱离标准流
position:absolute;        绝对定位，包含它的更外一层盒子来定位，脱离标准流

总结

虽然总结用了好长时间，但是收获的过程美滋滋！

前言

CSS

块级元素、行内元素

盒子模型

总结

猜你喜欢