网页设计与制作(三)

CSS核心基础

CSS样式规则
使用HTML时,需要遵从一定的规范。CSS样式规则具体格式如下:
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
1
在上面的样式规则中,选择器用于指定样式CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。其中,属性与属性值以**“键值对”*的形式出现,属性是指对指定的对象设置的样式属性,例如字体大小、文本颜色等。属性与属性值之间用英文“:”连接,多个“键值对”之间用英文“;”进行区分。
下面通过CSS对标题标记进行控制,具体如下:
h2{font-size:20px;color:red;}
1
这个代码就是一个完整的CSS样式。
同时,我们还需要注意一下CSS代码结构中的几个特点:
1.CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写的习惯一般将“选择器、属性和值”都采用小写的方式。
2.多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。
3.如果属性的值由多个单词组成切中间包含空格,则必须为这个属性值加上英文状态下的引号。例如:
p{font-family:“Time New Roman”;}
1
4.在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释,例如:
/这是注释文本不会显示在浏览器窗口中/
1
5.CSS代码中空格是不被解析的,花括号以及分号前后的空格可有可无。因此,可以使空格键、Tab键、Enter键等对样式代码进行排版,即所谓的格式化CSS代码,这样可以提高代码的可读性。例如:
h1{font-size:20 px;color:red;} (注意20与px之间有空格)
1

h1{
font-size:20 px; /定义字体大小属性
/
color:red; /定义颜色属性/
}
1234
引入CSS样式表
1.行内式
行内式也称内联样式,是通过标记的style属性来设置元素的样式,其基本语法格式如下:
<标记名 style="属性1;属性值1;属性2:属性值2;>内容</标记名>
1
该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。其中,属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。
2.内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标记中,并且用

3.链入式 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中。其基本语法如下: 123 4.导入式 导入式与链入式相同,都是针对外部样式表文件的。对HTML头部文档应用style标记,并在

CSS基础选择器
1.标记选择器
标记选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一个类标记指定统一的CSS样式,其基本语法如下:
标记名{属性1:属性值1;属性2:属性值2;}
1
该语法中,所有的HTML标记名都可以作为标记选择器。用该选择器定义的样式对页面中的该类型的所有标记都有效。
例如,可以使用p选择器定义HTML页面中所有段落的样式。示例代码如下:
p{font-size:12 px;color:#666; font-family:“微软雅黑”;}
1
2.类选择器
类选择器使用"."(英文点号)进行标识,后面紧跟类名。如下:
类名(属性1:属性值1;属性2:属性值2;}
CSS文本相关样式*
CSS字体样式属性
1.font-size:字号大小
属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位,
CSS长度单位:
em 相对于当前对象内文本的字体尺寸
px 像素 最常用 推荐使用
in 英寸
cm 厘米
mm 毫米
pt 点
2.font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS代码:
p{ font-family:“华文彩云”,“宋体”,“黑体”;}
1
【各种字体之间必须使用英文状态下的引号,英文字体一般不需要加引号。】
【当需要设置英文字体时,英文字体名必须位于中文字体名之前。】
【如果字体名中包含空格、#、$、等符号,则该字体必须加英文状态下的单引号或双引号】
【尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示】
3.font-weight:字体粗细
可用属性值如下:
normal 默认值,定义标准的字符
bold 定义粗体的字符
bolder 定义更粗的字符
lighter 定义更细的字符
100~900(100的整数倍) 定义由细到粗的字符。其中,400等同于normal,700等同于bold,值越大字体越粗
4.font-variant:变体
属性用于设置字体变化,一般用于定义小型大写字母,仅对英文字符有效。其可用属性值如下:
normal:默认值,浏览器会显示标准的字体
small-caps:浏览器会显示小型大写的字体,即所有的小写字母均会转换为大写。但是,所有使用小型大写字体的字母均与其余文本相比,其字体尺寸更小。
5.font-style:字体风格
属性用于定义字体风格,如设置斜体、倾斜或正常的字体
6.font:综合设置字体样式
选择器{font: font-style font-variant font-weight font-size/line-height font-family;}
1
使用font属性时,必须按上面语法格式中的顺序写,各个属性以空格隔开。

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页