CSS基础语法

css小白一枚。对于css是真心不懂，所以这篇文章也是看着网上的资料，边理解边整理的，受益良多。

1 css样式控制html文件的方式

1.1 内嵌式

CSS一般位于HTML文件的头部，即<head>与</head>标记内，并且以<style>开始，以</style>结束，例如如下的代码定义了<body>标记使用的字号:

 <style  type="text/css">
     body {
               font-size: 10px;
              }
   </style>

1.2 行内样式

采用<style=" ">的格式把样式写在HTML中的任意行内，“=”右边的属性设置放入双引号中，多个属性用“;”分隔。
例如，下面的样式控制段落文字的字号和颜色：

<div style="font-size: 10pt; color: #FF6600;"></div>

1.3 链接式

CSS的定义既可以在HTML文档内部，也可以单独在外部文件（例如style.css）中定义。把编辑好的CSS文档保存成外部文件，然后在<head>中添加如下所示的代码：

<link  rel="stylesheet"  href="style.css"  type="text/css">

1.4 导入式

导入样式和链接样式的功能基本相同,只是语法和运作方
式上略有区别.
导入的样式表在HTML文件初始化时,会被导入到HTML
文件内,作为文件的一部分,类似内嵌式的效果。
链接式样式表则是在HTML的标记需要格式时才以链接的方式引用。
导如样式表常用格式：

@import url(sheet1.css)
@import url(“sheet1.css”)
@import url(‘sheet1.css’)
@import sheet1.css
@import “sheet1.css”
@import ‘sheet1.css’

Css样式四种嵌入方式优先级
行内样式优先级最高,
其次是采用<link>标记的链接式,
再次是位于<style></style>之间的内嵌式,
最后是@import导入式.

2 css选择器

选择器(selector)是CSS中很重要的概念,所有HTML
语言中的标记都是通过不同的CSS选择器进行控制的。

2.1 标记选择器

一个HTML页面由很多不同标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。

2.2 类别选择器

所有标记都可通过class属性设置类选择器

例如：

<html>
<head> <title>class选择器</title>
<style type="text/css">
.one{
    color:red;          /* 红色 */
    font-size:18px;  }         /* 文字大小 */
.two{
    color:green;        /* 绿色 */
    font-size:20px; }   /* 文字大小 */
.three{
    color:cyan;           /* 青色 */
    font-size:22px; }   /* 文字大小 */
</style>
</head>
<body>
    <p class="one">class选择器1</p>
    <p class="two">class选择器2</p>
    <p class="three">class选择器3</p>
    <h3 class="two">h3同样适用</h3>
</body>
</html>

显示如下：

2.3 ID选择器

ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，格式如下：

例如：

<html>
<head>
<style type="text/css">
#cuti {font-weight:bold;}
</style>
</head>

<body>
<p id="cuti">这是一行加粗的文本</p>
<p>这是一行普通文本</p>
</body>
</html>