css的基本语法格式
CSS（Cascading Styel Sheet）是控制 Web 页面外观的一系列格式设置规则,是网页设计必不可少的工具之一。下面我们就开始学习css的基本语法格式。
一 CSS定义规则 层叠样式表是一个完全的纯文本文件，通常以“css”为扩展名作为单独的文件来使用，它的内容包含了一组告诉浏览器，如何安排与显示特定的html标签中内容的规则，CSS定义规则由三个部分构成：选择符，属性和属性的取值。语法如下：
语法： selector { property: value } 选择符 { 属性： 值 }
说明： 1 选择符 选择符是要定义样式的html标记，将html标记作为选择符定义后，则在html页面中该标记下的内容，会按照CSS定义的规则发生改变。
2 属性 CSS属性指的是在选择符中要改变的内容，常见的有：字体属性，颜色属性，文本属性等。下面就是我们定义的一个样式表。
@charset"gb2312"; body { font-family: "宋体"; font-size: 20px; color: #FF0000; } p { font-family: "宋体"; font-size: 30px; color: #FF00ff; }
在这个样式表中： 1 @charset"gb2312";表示使用中文国标字符集。 2 body 和 p 是 html 中的两个标签，对这两个标签设置了三种样式，即： font-family: 指定字体的字型。 font-size: 指定字体的大小。 color: 指定字体的颜色。
上面我们定义了一个样式表，下一步的任务是如何把这个样式表和html文件相关联，使html文件按照我们定义的样式显示出来，与html文件相关联的方法有四种，下面我们分别叙述。
二 嵌入样式表 在Html页面内部定义的CSS样式表,叫做嵌入式CSS 样式表，也就是在HTML文档的head部分中，使用 style 标签并在该标签中定义一系列 CSS 规则。
语法：
说明： ，在开始标志 千山鸟飞绝万径人踪灭 千山鸟飞绝万径人踪灭 三 链接外部样式表 外部CSS样式表是一个以 .css为后缀的外部文件,定义一个外部样式表可以应用于多个页面。在html页面中使用link标签，可以将外部的css样式表连接进来，其语法如下：
千山鸟飞绝万径人踪灭
语法： 参数: 1 rel属性表示样式表将以何种方式与HTML文档结合。rel取值:Stylesheet,表示指定一个外部的样式表
2 *.css是单独保存的样式表文件。 示例2 定义一个外部css文件p2.css,然后在t2.htm文件中连接该文件。 t2.htm 链接外部样式表 亲爱的,你慢慢飞,小心前面带刺的玫瑰 亲爱的,你张张嘴,风中花香会让你沉醉
亲爱的,你张张嘴,风中花香会让你沉醉
四 内联样式表 内联样式指的是，在HTML特定的标签中定义的CSS样式表。常用的HTML 标签主要是BODY中的一些元素，例如：
，
风中花香会让你沉醉
五 导入外部样式表 导入外部样式表指的是，在html文件中已经建立了嵌入式样式表，但是还要使用外部样式表的某些设置，这时就可以在 ......
其中@import url("mystyle.css"); 表示导入mystyle.css样式表，导入外部样式表必须在样式表的开始部分，在内部样式表的上面。
示例4 定义一个外部css文件p4.css,然后在t4.htm文件中导入该文件
t4.htm 导入外部样式表 千山鸟飞绝万径人踪灭 千山鸟飞绝万径人踪灭
千山鸟飞绝万径人踪灭
六 css样式表的继承性 在css样式表中，子标签的某些属性会继承父标签的属性，例如标签p是标签body的子元素，当标签p未设置字体的颜色属性时，p中的内容会使用body中的颜色值，下面的示例说明了这种情况。
示例5 t5.htm 嵌入式CSS样式表
html表单布局及CSS样式
HTML（二）一、HTML中的特殊符号1.常用的特殊符号：特殊符号字符实体示例空格 A B大于号> >a <b<br/>小于号< < <html><br/>引号"" " "姓名"<br/>版权符号 © Copyright© All Reserved2.表单（标签<form>）2.1、表单的基本语法：<form 属性action="表单提交地址" method="提交的方法">action：规定到表单提交之后，由谁处理，默认为当前页面 method：有两种取值get和post（更安全，数据量更大）表单内部由大量表单元素构成2.2、表单元素的基本格式<input name="表单元素的名称" type="类型" value="值" size="显示的宽度" maxlength="最大输入字符长度"checked="checked(是否被选中)" / >2.3、表单元素的逐一介绍1、文本框（type:txt）<input name="username" type="txt" value="张三" size="20" />2、密码框<input name="psswd" type="password" size="20"> 3、重置、提交和普通按钮<input name="reset" type="reset" value="重置" /><input name="submit" type="reset" value="提交" /><input name="button" type="reset" value="普通" />4、单选按钮（radio）<input type="radio" name="gen" value="男" checked="checked" /><img src="images/Male.gif" alt="男"/>男<input type="radio" name="gen" value="女" /> <img src="images/Female.gif" alt="女"/>女5、复选框（check和post）<input type="checkbox" name="hobby" value="sports" />运动 <input type="checkbox" name="hobby" value="swimming" />游泳 <input type="checkbox" name="hobby"value="play" checked="checked"/>玩游戏6、文件域（上传文件）<input type="file" name="files" /><br/> <input type="button" name="upload" value="上传" />7、下拉列表框<select name="bmon" ><potion value="0">一月</option><potion value="1">二月</option><potion value="2">三月</option><potion value="3">四月</option><potion value="4">五月</option><potion value="5">六月</option><potion value="6">七月</option><potion value="7">八月</option><potion value="8">九月</option><potion value="9">十月</option><potion value="10">十一月</option><potion value="11">十二月</option></select >月 8、多行文本域<textarea name="serviceprotocol" cols="60" rows="6" >欢迎阅读服务协议</textarea>9、隐藏域<input type="hidden" name="userid"value="777" />10、只读和禁用属性a、只读<textarea name="serviceprotocol" cols="60" rows="6" readonly="readonly">欢迎阅读服务协议</textarea>b、禁用同意以上协议<input type="checkbox" name="accept" /> <input type="submit" value="注册" disabled="disabled"/> 3.HTML的注释<!-- 注释内容-->要避免在注释内容中使用<！--------------注释内容------------>(不规范)可以用= =或者##代替--4、表格布局4.1、基本语法< table><tr> //行<td>百度</td>//单元格 </tr><tr><td>猫扑</td></tr><table>4.2、跨列<td colspan="2">学生成绩</td>//跨两列4.3、跨行<td rowspan="2">李四</td>4.4、跨行跨列<td colspan="3" align="center">学生成绩</td>5、表格的高级标签表格数据的分组标签<thead>,<tbody>,<tfoot>6、表格布局采用form-table-tr-td进行页面布局7、CSS样式表CSS是Cascading Style Sheets 的缩写，层叠样式表（W3C规范之一），把网页的内容和外观的美化分开。
单元5 CSS3基本样式设计
border-right-style border-right-width border-right-color
border-left-style border-left-width border-left-color
示例： h1{ border-bottom-style: solid; border-bottom-color: #000; border-bottom-width: 1px;
常用的样式有 dotted（点线）
solid（实线）
border-style属性
border-style属性取值可以有一到四个
border-style: dotted solid double dashed；
上
右
下
左
border-style: dotted solid double；
上
右和左 下
</head> <body>
<h1>勤学好问</h1> </body> </html>
文本样式属性
文字的颜色以及文本格式的样式效果
color text-align text-decoration text-indent line-height
文本样式属性
color属性用于设置文字的颜色
常用颜色值 1. CSS颜色规范预定义的颜色名称，例如red，blue，green等。 2. 十六进制颜色代码：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色），
字体样式属性
font-style属性用于规定斜体文本 <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>字体样式</title> <style type="text/css"> p{font-style: italic;} </style>
css样式表讲解
3．外部样式表
先创建一个CSS文件，然后在页面中调用这个CSS文
件。
调用的方法:在页面的头部标记<HEAD>中加入下面的
代码 <head> <link href="school.css" rel="stylesheet" type="text/css" />
</head>
<link>标记，用来调用外部的样式表文件。
CSS 样 式 表
CSS 样 式 表
CSS样式表概述 样式表的基本语法 样式表的使用规则 样式表中的常用属性 布局与定位
CSS样式表概述
CSS是Cascading Style Sheet的缩写，称为“层叠样
式表”，简称为“样式表”
层叠是指多个样式可以同时应用于同一个页面或网页
·CSS是一种用来装饰HTML的标记集合，是 对HTML标记的一种扩展，可以进一步美化 HTML页面 样式表的作用： 覆盖浏览器 页面布局 可以重用 多个文档可以链接到一个样式表
样式表的使用规则
样式表的分类
按加入的方式不同，可以分为：
行内样式表、
内部样式表
外部样式表。
1．行内样式表(内嵌样式表)
在HTML标记中使用style属性，直接写入需要定义的样式。 例如： <p style="color:Blue; font-size:12px" >内嵌样式表<p> 其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开.
内联式样式表是在现有HTML元素的基础上，用style属性把 特殊的样式直接加入到那些控制信息的标记中，比如下面的 例子： <p style="color：#ff0000">内联式样式表</p> 这种样式表只会对使用它的元素起作用，而不会影 响HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。
第4章 CSS修饰XML文档
3
4.1.1 CSS基本知识 基本知识
万维网联盟(W3C),这个非营利的标准化联 盟,在1996年制定并发布的一个网页排版样式标准 ,即层叠样式表,用来对HTML有限的表现功能进行 补充.CSS并不是一种程序设计语言,而只是一种用 于网页排版的标记性语言,其全部信息都是以纯文本 的形式存在一个文档中,因此我们可以利用任何一个 文本编辑工具去编写CSS文档.
1
本章知识要点: 本章知识要点:
了解CSS发展历史 掌握CSS基本语法规则 掌握CSS常用属性的作用及使用方法 掌握引用CSS文档的基本方法
2
4.1 CSS简介 简介
在制作网页时采用CSS技术,可以精确地设置 文字的大小,文字的间距,行距,图层重叠,绝对 定位和相对定位等,但其最强大的功能还在于它的 可随时插入性和易操作性.只要对CSS文档中相应 的代码做一些简单的修改,就可以改变同一页面的 不同部分,或者不同页面的外观和格式.CSS通过 定义样式的方式来辅助XML,为XML文档制定显示 样式效果.
属性
border-top-style border-right-style border-bottom-style border-left-style
描述
设定上边框的样式 设定右边框的样式 设定下边框的样式 设定左边框的样式
13
4.3.5 设置布局属性
在进行页面设计时,要保证页面元素出现在其 适当的位置,常常需要使用div完成.然而div布局 需要与CSS属性一起使用才可以完成布局设置.C SS中的边距和间隙属性就提供了这样一种功能,能 够为页面元素定义边框,并修饰内容距离,从而优 化文本内容的显示效果.
8
4.3 CSS属性设置 属性设置
上面一节介绍了选择器的定义以及选择器的种类 ,在本节将按照属性的用途来分别介绍属性的作用以 及使用方法.
css有哪几类样式
css有哪几类样式
css有三种类样式，分离是：1、行内样式，结构的内部，即写在标签内的样式；2、外联式是将全部的样式放在一个或多个以【。
css】为扩展名的外部样式表文件中；3、内联样式写在HTML页面内部，存放于head标志当中。
本教程操作环境：windows7系统、css3版，DELL G3电脑。
CSS样式主要包含以下三种类型：
1、行内样式：结构的内部，即写在标签内的样式；写在标签的开头部分内部，style属性当中。
例：2、内联样式（内嵌样式）：写在HTML页面内部，存放于head标志当中，样式写在style标志内。
例：
3、外部样式（外联样式）：
外联式是将全部的样式放在一个或多个以。
css为扩展名的外部样式表文件中，通过标志将外部样式表文件链接到HTML文档中，其基本语法格式如下：
上述语法中，标志需要放在头部标志中，并且必需指定标志的个属性，详细介绍如下。
第1页共3页。
3.2 CSS3样式属性
6.@font-face属性（使用服务器端字体）
@font-face{ }
font-famliy:字体名称; src:字体路径;
CSS3背景样式属性
网页能通过背景图像给浏览者留下深刻的印象，不同主题的网站 特色往往会体现在网站背景上，合理控制背景颜色和背景图像至 关重要，在网页设计制作中，通过CSS3的一系列背景样式属性 来控制网页背景的显示效果，如背景颜色、背景图像背景图像平 铺方式、背景图像位置等属性。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2,...,颜色值n)
CSS3渐变属性
2.径向渐变 径向渐变是网页中另外一种常用的渐变，在径向渐变过程中，起 始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变 。运用CSS3中的“background-image:radial-gradient(参数值 );”样式可以实现线性渐变效果，其基本语法格式如下。
P{font-family:”微软雅黑”;}
2.font-size属性(字体大小)
p{font-size:12px;}
3.color属性（字体颜色）
p{color:#FF00000;}
CSS3文本样式属性
4.font-style属性(字体风格)
p{font-style:italic;}
5.font-weight属性(字体粗细)
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,...,颜色值n)
CSS3边框样式属性
网页制作中元素的边框是经常需要美化和修饰的，通过HTML定 义的元素边框风格单一，无法满足网页美观的要求。在CSS样式 中，通过对boder属性进行定义边框的宽度、样式、颜色、圆角 边框等，可以使网页元素的边框有更丰富的样式，从而使元素的 效果更加美观。
CSS3@font-face详细用法
CSS3@font-face详细⽤法@font-face是CSS3中的⼀个模块，他主要是把⾃⼰定义的Web字体嵌⼊到你的⽹页中，随着@font-face模块的出现，我们在Web的开发中使⽤字体就不⽤再为只能使⽤Web安全字体烦恼了！肯定会有⼈问，这样的东西IE能⽀持吗？我告诉⼤家@font-face这个功能其实早在IE4就⽀持了，你肯定会感到惊讶。
如果你看到⼀些英⽂⽹站或blog看到⼀些很漂亮的⾃定义Web字体，⽐如说⾸页的Logo，Tags以及页⾯中的⼿写英⽂体，⼀句话这些都是@font-face实现的，为了能让更多的朋友知道如何使⽤他，今天我主要把⾃⼰的⼀点学习过程贴上来和⼤家分享。
⾸先我们⼀起来看看@font-face的语法规则：@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}取值说明1. YourWebFontName:此值指的就是你⾃定义的字体名称，最好是使⽤你下载的默认字体（下载回来的叫什么字体，这⾥就填什么字体名），他将被引⽤到你的Web元素中的font-family。
如“font-family:"YourWebFontName";”2. source:此值指的是你⾃定义的字体的存放路径，可以是相对路径也可以是绝路径；3. format：此值指的是你⾃定义的字体的格式，主要⽤来帮助浏览器识别，其值主要有以下⼏种类型：truetype,opentype,truetype-aat,embedded-opentype,svg等；4. weight和style:这两个值⼤家⼀定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
CSS3 经典教程系列：CSS3 圆角(border-radius)详解
CSS3 经典教程系列：CSS3 圆角（border-radius）详解《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA特性的用法，今天这篇文章我们在一起来看看CSS3中用于实现圆角效果的border-radius属性的具体用法。
以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。
您可能感兴趣的相关文章∙Web 开发人员和设计师必读文章推荐∙20个非常绚丽的 CSS3 特性应用演示∙35个让人惊讶的 CSS3 动画效果演示∙推荐12个漂亮的 CSS3 按钮实现方案∙24款非常实用的 CSS3 工具终极收藏现在有了CSS3的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。
既然border-radius有这么多好处，我们就从他的语法，属性和属性值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：基本语法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]? 取值范围：<length>： 由浮点数字和单位标识符组成的长度值。
不可为负值。
简单说明：border-radius 是一种缩写方法。
如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。
如果没有“/”，则水平和垂直半径相等。
另 外其四个值是按照top-left 、top-right 、bottom-right 、bottom-left 的顺序来设置的其主要会有下面几种情形出现：1、只有一个值，那么 top-left 、top-right 、bottom-right 、bottom-left 四个值相等。
CSS+DIV技术
选择符的分类
在CSS样式中有以下几种选择符： （1）HTML选择符 HTML选择符就是HTML的标记，例如P、BODY、A等。如果用CSS定义了他们，那 么在整个网页中，该标识的属性都应用定义中的设置。HTML选择符的定义方法如下：
tag{property:value；property:value;….}
2、样式定义
样式定义的基本格式： selector {property1:value1;property2:value2;…} 每个样式定义都包含一个选择器，其后是该选择器的属性和值，多个属性 间用封号“；”分割。 示例： H1 { font-size: large; color:green } H2 { font-size: small; color:blue } .product_name { font-family:隶书} #my_name { font-size: 14pt } 当多个对象具有相同的样式定义时，多个对象之间可以用逗号分隔。 示例： tr,th{font:12px;margin:20px;font-color:#336699}
3、使用样式
嵌入样式表 链接外部样式表 导入外部的样式表 内嵌样式
CSS样式的优先级
嵌入样式表
使用<STYLE>标记把一个或多个CSS样式定义在HTML文档的 <HEAD>标记之间，这就是嵌入样式表。 嵌入样式表的作用范围是在本HTML文件内。 如下图：设计一个页面，要求页面中所有大学名称的显示样式为“加 粗、红色”，并且所有超链接没有下划线。
链接外部样式表
如果多个HTML文件要共享样式表，可以将样式表定义为一个独立的 以 .css 为 扩 展 名 的 CSS 样 式 文 件 。 然 后 再 在 要 使 用 外 部 样 式 表 的 HTML文件的头部用<link>标记链接到CSS样式文件。
css样式基本知识练习题
css样式基本知识一、CSS核心基础如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。
1. CSS样式规则{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}在上面的样式规则中，用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。
2. 引入CSS样式表的方式有哪些？(1)行内式也称为内联样式，是通过的属性来设置元素的样式。
语法格式< ="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容</ >并没有做到结构与表现的分离，所以一般很少使用。
通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。
(2)内嵌式内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义。
语法格式<><type="text/css">选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</></>内嵌式CSS样式只对其所在的HTML页面生效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。
但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。
(3)链入式链入式是将所有的样式放在一个或多个以为扩展名的外部样式表文件中，通过< />标记将外部样式表文件链接到HTML文档中。
语法格式<head>< ="CSS文件的路径" ="text/css" ="stylesheet" /> </head>链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML 页面也可以通过多个< />标记链接多个CSS样式表。