css 宋体_CSS及其引用

前言

是不是感觉使用HTML标签控制网页效果很麻烦呢,那就随小编来看看CSS吧。CSS能更加精准的控制网页效果,CSS是cascading style sheet的缩写,称为“层叠样式表”或“级联样式表”,由多种规则组成,通过浏览器解释执行,能够更加精确的控制页面元素、布局,还能够实现内容和表现的分离,使网站的风格趋向统一、维护更加容易。

1 知识点

一、CSS的基本语法

1.基本语法

selector{property1:value1; property2:value2;…}

2.语法说明

1).选择器:

选择器可以是HTML标记或属性的值或自定义的标识符。

2).属性/属性值对:

“属性:属性值”必须一一对应,属性与属性值之间必须用“:”连接,每个属性/属性值用“;”分隔。

3).属性:

CSS中属性名为两个或两个以上的单词组成时,单词之间用“-”连接。

实例:p{

font-size: 10px;

background-color: blue;

}

即是将HTML中的所有段落设置为“背景为蓝色,字体大小为10像素”。

上面的实例还可以写为:p{font-size: 10px;background-color: blue;},小编建议写第一种哦,因为更加直观,便于更改 。

4).复合属性:

在CSS中,部分属性可以表示多个属性值。

实例:p{

font-size: 10px;

font-family: 宋体;

font-style: italic

}

可直接用p{font: italic 10px 宋体}表示。

小提示:使用font复合属性时,应严格按照font-style、font-variant、font-weight、font-size/line-height、font-family的顺序。类似的复合属性还有border、margin、padding等。

5).多个属性值:

在CSS中,部分属性可以设置多个属性值,用“,”分隔。

实例:p{font-family:”宋体”,”黑体”,”微软雅黑”}

即可用宋体、黑体、微软雅黑三种字体来设置段落中的字体效果,若系统中找不到宋体,就用黑体;若也找不到黑体,就用微软雅黑。

6).标签合并:

当几个标签用到同一个属性且属性值相同时,便可合并标签。

实例:h3{color:red}

p{color:red}

可直接写为:h3,p{ color:red }

2 CSS的引用方法

1.行内样式

语法:

实例:

即是定义段落文字为红色,大小为10像素。

2.内部样式

内部样式写在HTML的中,使用放置CSS规则。

语法:

选择器1{属性1: 属性值1; 属性2: 属性值2;…}

选择器2{属性1: 属性值1; 属性2: 属性值2;…}

选择器n{属性1: 属性值1; 属性2: 属性值2;…}

实例:p{

font-size: 10px;

background-color: blue;

}

table{

border-with:2px;

border-style:soild

text-align:center

}

3.外部样式

外部样式表是将CSS写在以.css为后缀名的文件中,在需要用到该样式的网页中引用此文件,可供多个网页使用,从而实现整体风格统一。外部样式分为链入外部样式表和导入外部样式表。

1).链入外部样式表

语法:

type规定被链接文件的MIME类型,rel定义当前文件与被链接文件之间的关系,href定义被链接文件的位置。

2).导入外部样式表

语法:

@import url(“外部样式表文件1名称”);

@import url(“外部样式表文件2名称”);

选择器1{属性1: 属性值1; 属性2: 属性值2;…}

选择器2{属性1: 属性值1; 属性2: 属性值2;…}

选择器n{属性1: 属性值1; 属性2: 属性值2;…}

导入样式表必须在style标记内开头的位置定义,可同时导入多个外部样式表,每条语句必须以“;”结束,必须书写“@import”。通常,导入外部样式写在最前面,内部样式写在后面。

3 结语

CSS的引用方法中,最常用的是链入外部样式表,一定要熟练掌握哦,通常不使用行内样式,因为太多的行内样式会使HTML文件非常混乱,是不是觉得CSS非常有趣呢,赶紧动手学起来吧!

17e6c3d6d8c4526e0386f94b6e7b0c93.png

本期编辑:廖逸行

e4b27637b7a678ccc65199e31f2befe7.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值