前端浅入门-CSS了解了HTML之后，写出的页面其实挺丑（挺简陋）的，所以对不满足对优美的网页页面追求。这时就需要去了

前言

了解了HTML之后，写出的页面其实挺丑（挺简陋）的，所以对不满足对优美的网页页面追求。这时就需要去了解CSS（层叠样式表），这里是 CSS 的百度百科,CSS的前世今生。

这里是我写的该系列第一篇文章：

介绍

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

正文开始

语法规则

CSS 规则由两个主要的部分构成：选择器，以及里面的一条或多条声明。其中每一条生命都是有一个属性和一个值组成。

selector { declaration1; declaration2; ... declarationN }
selector { property: value;property: value;property: value;}
body {background:#ffff00}	/*背景色是黄色，background:yellow也是可以的,这是一个注释*/

举个栗子

<!doctype html>
<html>
<head>
<title>初识css</title>
<style>
	body {background-color:yellow;}
	h1   {font-size:36px;}
	h2   {color:blue;}
	p    {margin-left:50px;}
</style>
</head>
<body>
	body的颜色是黄色
	<h1>h1标签的字体大小是36px</h1>
	<h2>h2标签的字体字体颜色是blue</h2>
	<p>p标签的左外边距是50px</p>
</body>
</html>

选择器

这里介绍的是我本人常用的一些选择器，如需了解更多详情，请百度一下,你就知道

通配选择器

通配选择器选择所有元素，用*表示
```
* {}
```
ID选择器

html标签中的id=‘xxx’,这个xxx就是ID选择器，在写样式的时候值得注意是与ID选择器对应的#xxx
```
#xxx {property: value;}
```
类选择器

html标签中的class=‘xxx’,这个xxx就是类选择器,在写样式的时候值得注意是与类选择器对应的是.xxx
```
.xxx {property: value;}
```
标签选择器

html的标签，比如p标签，div标签等等都是，选择当前HTML中所有的该标签。
```
h1 {property: value;}
```
后代选择器

选择div元素内的所有p元素
```
div p {property: value;}
```
并列选择器

选择所有h1元素和h2元素
```
h1,h2 {property:value;}
```

伪类选择器

这是用在a标签上的

a:link {color: blue;}		 /*选择未访问链接，未访问的链接字的颜色是蓝色*/
a:visited {color: blue; 		 /*选择访问过链接，访问过的链接字的颜色是蓝色*/
a:active {color: blue;}		 /*选择活动链接，点击时的链接字的颜色是蓝色*/
a:hover {color: blue;} 	 	/*选择鼠标悬浮链接，鼠标悬浮在链接上的字的颜色是蓝色*/

直接子元素选择器

div>p {}   /*选择的是div下p元素（非所有p元素），也就是选择父级元素是div的p元素*/

伪类选择器

一般我都是用在写循环的表格时第一行或者最后一行加边框线的时候

div:first-child {}		/*选择的是每个div标签中第一个元素*/
div:last-child {}		/*选择的是每个div标签中最后一个元素*/
p:nth-child(2) {}  /*选择每个p元素下的第二个子元素，这个元素的父级元素是p元素*/
···
···

伪元素选择器

p::before	{}		/*在p元素之前插入内容*/
p::before	{} 		/*在p元素之后插入内容*/

我平时码代码的时候大概就常用这么多种吧，以上内容部分参考 CSS3选择器介绍及用法总结

CSS放在哪里？

引入样式的方法

行内样式

优点：执行效率高

缺点：css和html代码耦合，代码的重用性低
```
<div style="color: blue;font-size: 30px">hello css</div>
```

内部样式表

优点：解决css和html代码耦合

缺点：代码的重用性低

<style type="text/css">
    .div-css{
        width: 200px;
        height: 200px;
        background: grey;
    }
</style>

外部样式表

优点：代码重用性高，结构性好。

缺点：执行效率低
1. link
```
<link rel="stylesheet" type="text/css" href="css/main.css">
```
2. @import
```
<style type="text/css">
    @import url(css/main.css); //导入css目录下的main.css文件
</style>
```
3. link 和 @import区别
  - link是HTML标签，除了加载CSS外，还可以定义rel等属性；@import属于CSS范畴，只能加载CSS。
  - link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  - link是HTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  - link支持使用Javascript控制DOM去改变样式；而@import不支持。

常用样式属性

width:100px;                                                /*宽度100px*/
height:100px;                                               /*高度100px*/
min-width:100px;                                            /*最小宽度100px*/
max-width:1000px;                                           /*最大宽度1000px*/
min-height:100px;                                           /*最小高度100px*/
max-height:1000px;                                          /*最大高度1000px*/
line-height:100px;                                          /*行高100px*/
color:red;                                                  /*颜色：红色/#FF0000/rgb(255,0,0)*/
font-size:20px;                                             /*字体大小20px*/
font-weight:600;                                            /*字体的粗细 100-600还有bold和其他属性*/
border:1px solid #ccc;                                      /*边框 1px 实线 灰色*/
border-radius:50%;                                          /*圆角50%*/
padding:10px;                                               /*内边距10px*/
padding:10px 20px;                                          /*上下内边距为10px 左右内边距为20px*/
padding:10px 20px 20px 10px;                                /*上 10px 右20px 下20px 左10px*/
padding-left/right/top/bottom:10px;                         /*左/右/上/下内边距为10px；语法不是这么写的只是偷懒*/
margin:10px;                                                /*外边距10px*/
margin:10px 20px;                                           /*上下外边距为10px 左右外边距为20px*/
margin:10px 20px 20px 10px;                                 /*上 10px 右20px 下20px 左10px*/
margin-left/right/top/bottom:10px;                          /*左/右/上/下外边距为10px；语法不是这么写的只是偷懒*/
position:fixed/absolute/relative;                           /*定位*/
top:10px;                                                   /*从上边算10px，一般就用到2个*/
left:10px;                                      /*从左边算10px，定位元素的左外边距边界与其包含块上边界之间的偏移*/
right:10px;                                                 /*从右边算10px*/
bottom:10px;                                                /*从下边算10px*/
display:none/block/inline/flex;                 /*规定元素应该生成的框的类型，隐藏/块级元素/内联元素/弹性布局*/
background:#ccc;                                            /*背景色为灰色*/
...
...
...

如需了解更多可以参考 CSS中的常用属性、菜鸟教程、W3C，站在巨人的肩膀上，我们能看的更远。

再举个栗子

上述了解之后，再来看下面代码是不是会熟悉很多呢,

<!doctype html>
<html>
<head>
<title>初识css</title>
<style>
	body {background-color:#FFA500;}
	h1   {font-size:36px;}
	h2   {color:blue;}
	p    {margin-left:50px;}
	.className { border:1px solid red;padding:10px 20px; }
	.className .secClass { border:2px solid red;}
	.className > .secClass { font-size:30px;font-weight:600;}
	.className div { background:yellow;}
	.className div:first-child { background:#ccc;}
	#idName { border:2px dotted red; margin:20px 40px; }
</style>
</head>
<body>
	body的颜色是橙色 orange = rgb(255 165 0) == #FFA500
	<h1>h1标签的字体大小是36px</h1>
	<h2>h2标签的字体字体颜色是blue</h2>
	<p>p标签的左外边距是50px</p>
	<div class='className'>class名为className
		<div class='secClass'>第二个class</div>
		<div class='thrClass'>第san个class</div>
	</div>
	<div id='idName'>id名为idName</div>
</body>
</html>

如果你对颜色色值概念不理解的话，请百度rgb。

总结

本片文章本来想译文总结css的内容的，但是发现太多了，就只能作罢，现在先这样写吧。下一篇文章是盒子模型、定位、浮动和弹性布局。本篇完。