掌握CSS：基础语法详解

发表时间: 2024-04-15 15:35

CSS样式表是不区分大小写, 建议全部小写

注释: /* 注释内容 */

单位问题：CSS 建议都写上单位

如何将样式表加入您的网页：

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

示例代码：

<p style="color:#f00">这一行的字体颜色将显示为红色</p>

内部样式块对象 Embedding a Style Block

你可以在你的HTML文档的<head>标记里插入一个<style>块对象。

示例代码：

<style type="text/css">body{background:#fff;color:#000;}p{font-size:14px;}</style>

外部样式表 Linking to a Style Sheet

你可以先建立外部样式表文件*.css，然后使用HTML的link对象。

示例代码：

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

rel="stylesheet" 是指在HTML文件中使用的是外部样式表;

type="text/css" 指明该文件的类型是样式表文件;

使用@import命令导入外部CSS文件(兼容性差,有些浏览器不支持)

<style type="text/css">@import url("*.css");</style>

使用解决兼容性

对于不支持CSS样式的浏览器, 将会把编写的CSS代码当成普通的字符串显示在网页中。

<style type="text/css"><!--h4{ /* 标记选择器 */color:red;font-size:18px;}--></style><style type="text/css">div{width:200px;}img{float:right}</style>

花括号(})前的分号可以省略,推荐还是加上

防止外部样式乱码

@charset "utf-8"

CSS样式涉及到图片的路径格式:

background-image: url('/i/eg_bg_03.gif')list-style-image:url("/i/arrow.gif");

W3C提供的CSS语法检测网页的网址如下：

http://jigsaw.w3.org/css-validator/

同义词：

内联元素：行内元素

CSS样式遵循的原则：

先设置全局的; 从大往小写

常用的全局样式：

实例1：

body,ul,li,a,img{margin:0px;padding:0px;}ul li{list-style:none;}img{border:none;} /* 解决不同浏览器下图片有无边框问题 */a:link,a:visited{text-decoration:none;color:#444;}a:hover{color:#f00;}.floatL{float:left;}.floatR{float:right;}.clear{clear:both;}

实例2：

/*重置css*/body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0;padding: 0;}body {background: #fff;color: #444866;font-size: 12px;font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;}h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}a {/*去掉默认的下划线*/color: #444866;text-decoration: none;}img {/*去掉图片的间隙*/border: none;vertical-align: middle;}ol, ul, li {/*去掉默认的小圆点*/list-style: none;}table {/*表格样式美化*/border-collapse: collapse;}body{font-size:12px; color:#444; background-color:#f1f1f1;}.weight{font-weight:bold;}

常用中文字体 Unicode 编码

字体名称英文名称 Unicode 编码

宋体 SimSun B8BF53

新宋体 NSimSun B0B8BF53

黑体 SimHei ED1F53

微软雅黑 Microsoft YaHei FAEF6FC5ED1

楷体_GB2312 KaiTi_GB2312 77F53_GB2312

隶书 LiSu B6E66

幼园 YouYuan E7C06

华文细黑 STXihei 4E87EC6ED1

细明体 MingLiU EC60EF53

新细明体 PMingLiU B0EC60EF53

任意字体转Unicode编码

事实上任何字体都能够转换为Unicode编码

掌握CSS：基础语法详解

热门阅读

推荐阅读