当前位置：文档之家 › CSS语法一览电子书

CSS语法一览电子书

  • 格式：pdf
  • 大小：232.03 KB
  • 文档页数：9

CSS 语法一览 字体属性 字体属性 描述 font­family 用一个指定的字体名或一个种类的字体族科 font­size 字体显示的大小 font­style 设定字体风格 font­weight 以bold为值可以使字体加粗 font­variant 设置英文大小写转换 font 组合设置字体属性 

Font­style 字体风格属性值 

Font­style属性值 说明 normal 正常值 italic 斜体 oblique 偏斜体 

Font­weight 字体加粗属性值 

Font­weight属性值 说明 normal 正常值 bold 粗体，字体粗细约为700 bolder 粗体再加粗，字体粗细约为900 lighter 比默认字体还细

100－900 共有100到900九个级别，数字越小字体越细，数 字越大字体越粗 

Font­variant 字体大小写属性值 

Font­variant 属性值 说明 normal 正常值 small­caps 将小写英文字体转换为大写英文字体

文本属性文本属性 描述 letter­spacing 定义一个附加在字符之间的间隔数量 word­spacing 定义一个附加在单词之间的间隔数量。

text­decoration 文本修饰属性允许通过五个属性中的一个来修饰文 本

text­align 设置文本的水平对齐方式，包括左对齐、右对齐、 居中、两端对齐

text­indent 文字的首行缩进 line­height 行高属性接受一个控制文本基线之间的间隔的值 text­transform 控制英文文字大小写 

letter­spacing 字符间距属性值 

Letter­spacing属性值 说明 normal 正常值

长度单位 

Word­spacing 单词间距属性值 

Word­spacing属性值 说明 normal 正常值

长度单位 

Text­decoration 文字修饰属性值 

Text­decoration属性值 说明 underline 文字加下划线

overline 文字加上划线

line­through 文字加删除线

blink 闪烁文字，只有 netscape 浏览器支持 none 默认值 

Text­align 文字对齐属性值 

Text­align属性值 说明 left 居左对齐

right 居右对齐

center 居中对齐

justify 两端对齐Text­transform 英文大小写属性值 text­transform属性值 说明 capitalize 将每个英文单词的首字大写

uppercase 将每个英文字母均转换为大写

lowercase 将每个英文字母均转换为小写

none 默认值

颜色和背景属性

颜色和背景属性 描述 color 定义颜色 background­color 设定一个元素的背景颜色 background­image 设定一个元素的背景图象

background­repeat 决定一个指定的背景图象如 何被重复

Background­position 设置水平和垂直方向上的位 置

Background 组合设置背景属性 

background­repeat 背景重复属性值 

background­repeat属性值 说明 repeat 背景图像平铺 repeat­x 背景图像以x轴方向平铺 repeat­y 背景图像以y轴方向平铺 no­repeat 背景图像不平铺 

Background­position 背景位置属性值 

background­position属性值 说明 value 以百分比的形式(x% y%)或绝对单位的形式(x y)设定背景图像的位置

top 背景图像垂直居顶 center 背景图像垂直居中 bottom 背景图像垂直居底 left 背景图像水平居左 center 背景图像水平居中 right 背景图像水平居右边框属性 边框属性 描述 border­color 边框颜色 border­style 边框样式 border­width 边框宽度 border­top­color 上边框颜色 border­left­color 左边框颜色 border­right­color 右边框颜色 border­bottom­color 下边框颜色 border­top­style 上边框样式 border­left­style 左边框样式 border­right­style 右边框样式 border­bottom­style 下边框样式 border­top­width 上边框宽度 border­left­width 左边框宽度 border­right­width 右边框宽度 border­bottom­width 下边框宽度 border 组合设置边框属性 border­top 组合设置上边框属性 border­left 组合设置左边框属性 border­right 组合设置右边框属性 border­bottom 组合设置下边框属性 

Border­style 边框样式属性值 

Border­style属性值 说明 none 无边框 dotted 边框由点组成 dash 边框由短线组成 solid 边框是实线 double 边框是双实线 groove 边框带有立体感的沟槽 ridge 边框成脊形 inset 边框内嵌一个立体边框 outset 边框外嵌一个立体边框方框属性 方框属性 描述 float 让文字环绕在一个元素的四周 clear 指定在某一个元素的某一边是否允许有环绕的文字或对象 clip 限定只显示裁切出来的区域 width 设定对象的宽度 height 设定对象的高度 padding 决定了究竟在边框与内容之间应该插入多少空间距离

margin 设置一个元素在四个方向上与浏览器窗口边界或上一级元素 的边界的距离 overflow 当对象内的内容超出对象所能容纳的范围时的处理方式 position 设置对象的位置 z­index 决定对象的先后顺序和覆盖关系 visibility 针对嵌套地下的可视性设置 

Float 环绕属性值 

float属性值 说明 none 禁用float属性 Left 居左对齐 right 居右对齐 

Overflow溢出属性值 

overflow属性值 说明 Visible 无论对象的大小，内容都会显示出来 Hidden 会隐藏超出对象的大小的内容 Scroll 不管内容是否超出对象的范围，选中此项都会为对象添加滚动条 Auto 只在内容超出对象的范围时才显示滚动条

列表属性

列表属性 描述 list­style­type 设定引导列表项目的符号类型 list­style­image 选择图像作为项目的引导符号 List­style­position 决定列表项目所缩进的程度 

list­style­type 列表样式类型属性值 

List­style­type属性值 说明disc 在文本行前面加“●”实心圆 circle 在文本行前面加“○”空心圆 square 在文本行前面加“■”实心方块 decimal 在文本行前面加普通的阿拉伯数字 lower­roman 在文本行前面加小写罗马数字 upper­roman 在文本行前面加大写罗马数字 lower­alpha 在文本行前面加小写英文字母。 upper­alpha 在文本行前面加大写英文字母。 none 不显示任何项目符号或编号 

list­style­position 列表位置属性值 

List­style­position属性值 说明 outside 列表贴近左侧边框 inside 列表缩进

其他属性 

Cursor 鼠标光标属性值 鼠标光标属性值 描述 hand 手 crosshair 交叉十字 text 文本选择符号 wait Windows的沙漏形状 Default 默认的鼠标形状 help 带问号的鼠标 e­resize 向东的箭头 ne­resize 指向东北方的箭头 n­resize 向北的箭头 nw­resize 指向西北的箭头 w­resize 向西的箭头 sw­resize 向西南的箭头 s­resize 向南的箭头 se­resize 向东南的箭头

CSS 滤镜

滤镜 描述 alpha 透明的层次效果 BlendTrans 淡入或淡出效果

合集下载

第6章Div标签与CSS样式表(4)-CSS语法

第6章Div标签与CSS样式表(4)-CSS语法

因此，概括来说，CSS就是由3个基本部分组成 的——“对象”、“属性”和“值”。
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
css教程pdf

css教程pdf

css教程pdf CSS（层叠样式表）是一种用于描述网页样式的标记语言，它被广泛应用于网页设计和开发中。CSS具有层叠、继承、复用等特性，可以让开发者轻松地控制网页的布局和外观。

CSS教程PDF是一种电子书，用于教授CSS的基本概念、语法和技巧。它通常由专业的网页设计师和开发人员编写，旨在帮助初学者了解和掌握CSS。

CSS教程PDF通常包含以下内容： 1. CSS基本概念：介绍CSS的概念和作用，解释为什么CSS在网页设计和开发中如此重要。

2. CSS语法：详细解释CSS的语法规则，包括如何选择HTML元素、如何定义样式和如何应用样式。

3. CSS选择器：介绍各种CSS选择器的类型和用法，包括标签选择器、类选择器、ID选择器等。它还解释了选择器的优先级，以及如何使用多个选择器来应用样式。

4. CSS样式属性：介绍CSS的各种样式属性，包括文字样式、背景样式、边框样式等。它还解释了如何使用单位、色彩值和颜色名称来定义样式。

5. CSS盒模型：解释CSS盒模型的概念和组成部分，包括内容区、内边距、边框和外边距。它还介绍了如何使用盒模型来控制元素的尺寸和布局。 6. CSS布局：介绍CSS的各种布局技术，包括浮动、定位和弹性布局。它还解释了如何创建响应式布局，使网页在不同设备上都能正常显示。

7. CSS动画和过渡：介绍如何使用CSS实现动画和过渡效果，包括使用关键帧动画和过渡属性来创建各种动态效果。

8. CSS响应式设计：介绍如何使用CSS媒体查询和断点来创建响应式网页，使网页能够自适应不同屏幕尺寸和设备。

通过学习CSS教程PDF，读者可以了解CSS的基本原理和应用技巧，掌握CSS的各种特性和语法规则。这将有助于他们成为优秀的网页设计师和开发人员，并能够创建出具有吸引力和专业外观的网页。

总的来说，CSS教程PDF是学习CSS的一种方便而易于理解的资源，它提供了全面的指导和实例，帮助读者快速入门和掌握CSS的使用。无论是初学者还是有经验的开发人员，都可以从中受益，并将其应用于实际项目中。

css语法

css语法

使用C S S样式美化和布局网页1 CSS简介•CSS 是Cascading Style Sheets 的缩写，称为层叠样式表。

它允许网页设计者定义网页元素的样式，包括字体、颜色以及其他高级样式。

•采用CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。

•CSS 样式可以是一个单独的外部文件（.css 文件），该文件被链接到站点中的一个或多个网页页面中。

•CSS 样式也可以定义在HTML 文档内部，在头文件部分的<style></style> 标记内定义。

例如：•<html>•<head>•<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />•<title></title>•<style type=“text/css”>•<!--•.y{•font-size:10px;•line-height:25px;•color:#112233;•}•-->•</style>•</head>•<body><p class=“y”>CSS层叠样式表</p>•</body> </html>2 CSS的使用•一个样式表由样式规则组成，以告诉浏览器怎样呈现一个文档。

2.1 CSS基本语法•CSS 语法结构由2 部分组成：选择器和声明。

其中声明由样式属性和取值构成。

•语法：选择符{ 样式属性: 取值;样式属性: 取值；……}•例如：H1{color:blue;font-family: 隶书;}•选择符：指这组样式编码所要针对的对象，可以是一个HTML标签，如body、h1；也可以是定义了特定的id或class的标签，如#main 表示选择指定了id属性值为main的标签。

html、css、javascript语法手册

html、css、javascript语法手册

ash CS3 / Firework CS3 Drea m aver CSwe 3 / Fl1其中 Href 属性指定了文档的基础U R L地址。

该属性在<BASE> 标签中是必须存在的。

Target 定义的是打开页面的窗口，同框架一起使用。

它定义了当文档中的链接被单击后，在哪一个框架集中展开页面。

如果文档中的超级链接没有明确指定展开页面的目标框架集，则就使用这里定义的地址代替。

2.3 元信息标签<META><META> 标签的功能是定义页面中的信息，这些文件信息并不会出现在浏览器页面的显示之中，只会显示在源代码中。

<META> 标签通过属性来定义文件信息的名称、内容等。

<META> 标签是实现元数据的主要标签，它能够提供文档的关键字、作者、描述等多种信息，在HTML的头部可以包括任意数量的<META> 标签。

如表 2 所示。

表2 <MET A> 标签属性通过这些属性，可以建立多种多样的效果，实现多种多样的功能。

1. 定义编辑工具前面介绍过，使用Frontpage、Dreamweaver 等多种编辑工具可以制作网页，在源代码中可以设定网页编辑器的名称。

这个名称不会出现在浏览器的显示中。

<MEta name=”generator”content=”value”>Generator 为编辑器定义，content 中定义编辑器的名称。

2. 设定关键字关键字是为搜索引擎而提供的，如一个音乐网站，为了提高在搜索引擎中被搜索到的机率，可以设定多个和音乐主题相关的关键字以便搜索。

这些关键字不会出现在浏览器的显示中。

需要注意的是，大多数搜索引擎进行检索时都会限制关键字的数量，有时关键字过多该网页会在检索中被忽略。

所以关键字的输入不宜过多，应切中主题。

另外，关键字之间要用逗号分隔。

<MEta name=”keywords”content=”value”>其中，keywords 为关键字定义，content 中定义关键字的内容。