在实际应用中,往往使用以下类似的应用形式:
Body {background-color:blue}
表示选择符为body,即选择了页面中的
标记,属性为background-color,这个属性用来控制对象的背景色,而值为blue。页面中的body对象的背景色通过使用这组CSS编码,被定义为蓝色。
浏览器与CSS
CSS在各个浏览器之间还是有差异的,最好的办法就是编写时在两个不同的浏览器上进行预览,及时调整各个细节。
- 在HTML中使用CSS
在HTML网页中添加CSS有4种方法:链接方式、行内方式 、导入样式和内嵌样式。
- 链接外部样式表
连接方式就是在网页中调用已经定义好的样式表来实现样式表的应用,它是一个单独的文件,然后在页面中用标记链接到这个样式表文件,这个标记必须放到页面的
区内。这种方法适合大型网站的CSS样式定义。基本语法
语法说明:
.链接外部样式表时,不需要使用style元素,只需要直接用标记放在
标记中就可以了。.同样外部样式表的文件名称是要嵌入的样式表文件名称,后缀为.css。
.CSS文件一定是纯文本格式。
.在修改外部样式表时,引用他的所有外部页面也会自动的更新。
.外部样式表中的URL相对于样式表文件在服务器上的位置。
.外部样式表优先级低于内部样式表。
.可以同时链接几个样式表,靠后的样式表优先于靠前的样式表。
一个外联样式表文件可以应用到多个页面。当改变这个样式表文件时,所有应用到该样式的页面都随之改变。在制作大量相同样式页面的网站时,外联样式表非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。
2.行内方式
行内方式是混在HTML标记里使用的。用这种方法,可以很简单地对某个元素单独定义样式。行内方式的使用时直接在HTML标记里添加style参数,而style参数的内容就是CSS的属性和值,在style参数后面的引号里的内容相当于在样式表大括号里的内容。
基本语法:
<标记 style=”样式属性:属性值;样式属性:属性值...”>
语法说明:
.标记:HTML标记,如body、table、p等。
.标记的style定义只能影响标机本身。
.style的多个属性之间用分号间隔。
.标机本身定义的style优先于其他所有样式定义。
虽然这种方法使用比较简单、显示直观,但在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件容量过大,不利于搜索引擎(或网络爬虫)搜索,从而导致后期维护成本高。
3.嵌入外部样式表
嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。
基本语法:
@import url(“外部样式表的文件名称”);
语法说明:
.import语句后的“;”一定要加上!
.外部样式表的文件名称是要嵌入的样式表文件名称,后缀为.css。
.@import应该放在style元素的任何其他样式规则面前。
4.定义内部样式表
内部样式表允许他们所应用的HTML文档的内部设置样式,然后在整个HTML文件中直接调用使用该样式的标记。
基本语法:
选择符1(样式属性:属性值;样式属性:属性值;...)
选择符2(样式属性:属性值;样式属性:属性值;...)
选择符3(样式属性:属性值;样式属性:属性值;...)
...
选择符n(样式属性:属性值;样式属性:属性值;...)
-->
语法说明:
.
class选择器1
class 选择器2
h3同样适用
3.ID选择器
在HTML页面中ID参数指定了某一个元素,ID选择器是用来对这个单一元素定义单独样式。对于同一个网页而言,其中农的每一个标签可以使用“id=”””的形式来对id属性进行名称的指派。ID可以理解为一个标记,每一个标记只能用一次。在定义ID选择器时,要在ID名称前加上“#”号。
ID选择器的使用方法和class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。在HTML的标记中只需要利用id属性,就可以直接调用CSS中的ID选择器,其格式:
#id {color:yellow; font-size:30px;}
类选择器和ID选择器一般情况下是区分大小写的。(网站建设者在编写CSS代码时,应该养成良好的编写习惯,一个id最多只能赋予一个HTML标记)
二 用CSS设置文本样式
设计网页中的文字样式
1.font-family属性:font-family属性用来定义相关元素使用的字体。
基本语法:
font-family:”字体1”,”字体2”,...
语法说明:
font-family属性中指定的字体要受到用户环境的影响。打开网页时,浏览器会先从用户计算机中寻找font-family中的第一个字体,如果计算机中没有这个字体,会向右继续寻找第二个字体,依次类推。如果浏览页面的用户在浏览器环境中没有设置相关字体,则定义的字体将失去作用。
代码实例:
- 我爱我家,爸爸和妈妈
2.font-size属性:用来定义字体大小
基本语法:
font-size:大小的取值
语法说明:
font-size属性的属性值可以有多种指定方式,绝对尺寸、相对尺寸、长度、百分比值都可以用来定义。
在CSS中,有两种单位。一种是绝对长度单位,包括英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是相对长度,包括em、ex和像素(px)。ex由于在实际应用中需要获取x大小,因浏览器对此处理方式非常粗糙而被抛弃,所以现在的网页设计中对大小距离的控制使用的单位是em和px(当然还有百分数值,但他必须是一个相对与另一个的值)。
实例代码:
3.font-weight属性:设置字体的粗细
基本语法:
font-weight:字体粗度值
语法说明:
font-weight的取值范围包括normal、bold、bolder、lighter、number。其中normal表示正常粗细;bold表示粗体;bolder表示特粗体;lighter表示特细体;number不是真正的取值,其范围是100~1000,一般情况下都是整百的数字。
实例代码:
4.font-style属性:用来设置字体风格
基本语法:
font-style:样式的取值
语法说明:
font-style属性也可以在Dreamweaver中进行可视化操作。
其CSS代码如下,使用font-style:italic设置字体为斜体
实例代码:
5.font-variant属性:可以将小写的英文字母转变为大写,而且在大写的同时,能够让字母大小保持与小写时一样的尺寸高度。
基本语法:
font-variant:变体属性值
语法说明:
属性值 |
描述 |
normal |
正常值 |
small-caps |
将小写英文字体转换为大写英文字体 |
实例代码:
- dreamweaver
6.text-decoration属性:可以对文本进行修饰
基本语法:
text-decoration:取值
语法说明:
属性值 |
描述 |
none |
默认值 |
underline |
对文字添加下划线 |
overline |
对文字添加上划线 |
line-through |
对文字添加删除线 |
blink |
闪烁文字效果 |
设计文本的段落样式
1.line-height属性:设置对象的行高,行高值可以为长度、倍数和百分比。
基本语法:
line-height:行高值
实例代码:
2.text-align属性
基本语法:
text-align:排列值
语法说明:
left:左对齐
right:右对齐
center:居中对齐
justify:两端对齐
3.text-indent属性:可控制段落首行缩进及缩进的距离。
基本语法:
text-indent:缩进值
语法说明:
缩进值必须是长度值或百分比
4.word-spacing属性:设置英文单词之间的距离
基本语法:
world-spacing:取值
语法说明:
取值可以使用normal,也可以使用长度值。normal指正常的间隔,是默认选项;长度是设置单词间隔的数值及单位,可以使用负值。
5.first-letter首字下沉
基本语法:
p: first_letter{font-size:16px;color:red;float;left;}
语法说明:
首字下沉主要使用到CSS的first-letter,然后配合font-size和float来设置字体的样式即可实现。first-letter选择器选取指定元素文本内容的第一个字母,即用于设置第一个字母的CSS样式。
6.text-transform:用来转换英文字母的大小写
基本语法:text-transform:转换值
语法说明:text-transform的取值范围如下
none |
表示使用原始值 |
lowercase |
表示使每个单词的所有字母转换为小写 |
uppercase |
表示使每个单词的所有字母转换为大写 |
capitalize |
表示使每个单词的首字母转换为大写 |
@欢迎大家指出问题,谢谢。