HTML+CSS入门之CSS语法基础-职坐标

HTML+CSS入门之CSS语法基础

沉沙 2018-11-23 来源：阅读 1184 评论 0

摘要：本篇教程介绍了HTML+CSS入门之CSS语法基础，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门之CSS语法基础，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

在网页添加css的方法，总共有4种方法：
1.行内样式表比如：<td style="font-size:13px; color:#999900;font-family:"宋体""> </td> 此中仅仅利用了css对于元素的精确控制优势，并没有能很好的表现与内容的分离，此方法不推荐使用，最好仅仅在需要调试css样式的时候临时使用。
2.内部样式表：内部样式表与行内样式表的相似之处在于，都将css样式编写到页面中，而不同的是，内部样式表可以统一放置在一个固定的位置。这种css一般位于html文件的头部，即<head>与</head>标签内，并且以<style>开始，以</style>结束。代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>

这里主体部分为什么要加一个 呢？因为：旧版本的浏览器，并不能识别元素，会将其当作body的一部分照常展示其内容，从而使这些样式表对用户是可见的。要防止这样做,style元素的内容要包含一个SGML注解()在里面。
3.链接外部样式表
链接外部样式表是css应用中最好的一种形式。将css样式表代码单独编写在一个独立文件中，有网页进行调用，多个网页可以同时使用同一个样式文件。这种形式最适合大型网站的css样式定义。示例代码如下：
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
在<head>中使用<link>标记，可以将link指定为stylesheet样式表方法，并使用href="css.css"指明了样式表文件的路径，只需要将样式单独编写在css.css文件中，便可以在页面中应用在css.css中说定义的样式。
4.输入样式表
输入样式表的方法同链接的方法类似，不同之处在于链接法不能同其他方式结合使用。示例代码如下：
<head>
<style type="text/css">

</style>
</head>
此例中@import slstyle.css表示导入"css.css"样式表，注意使用时外表样式表的路径，方法和链入外部样式表的方法类似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中。

链接外部样式表时

单一的样式也可以通过多个样式表给出：
<link rel="stylesheet" href="gpcgpan.css" title="gpcgpan">
<link rel="stylesheet" href="gpcgpan1.css" title="gpcgpan">
<link rel="stylesheet" href="gpcgpan2.css" title="gpcgpan">
这里三个样式表组合成一个gpcgpan样式，作为一个首选样式被应用，要组合多个样式表成一个单一样式时，必须要用同一个标题title。

当样式被应用到很多的网页时，一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的，大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟。
一.设置字体属性
1.设置字体：
font-family:"字体一","字体2"...
此种方法如果浏览器找不到第一种字体时将使用第二种字体，如果完全找不到时，使用浏览器默认的字体。
2.设置字号：
font-size:字号大小如14px
3.设置字体风格：
font-style:字体风格，如：normal italic oblique
4.设置字体加粗字体：
font-weight:字体粗细值如：normal bold bolder lighter 111-900（数字越小字体越细，数字越大字体越粗）
5.设置变体属性：
font-variant：变体属性值 normal small-caps（将小写英文字体转换为大写英文字体）
6.设置文字修饰：
text-decoration:取值如none（默认值） underline （对文字添加下划线）overline（对文字添加下划线）line-through（对文字添加删除线）blink（闪烁文字效果）
7.字体复合属性：
font:字体取值
二：设置文本属性
1.单词间隔
word-spacing:取值如：word-spacing:13px ; .
2.字母间隔
letter-spacing :取值如：letter-spacing:10px;
3.水平对齐
text-align：排列值如：text-align:right;   text-align:left
4.垂直对齐：
vertical-align:排列取值如：vertical-align:baseline; vertical-align:sub; vertical-align:super;
5.大小写转换
text-transform:转换值  转换值有下列：none 默认 lowercase将每个单词的第一个字母大写  uppercase 将每个单词的所有字母大写  capitalize 将每个字的所有字母小写
6.文本缩进
text-indent:缩进值  如 text-indent:26px;