关于css:标梵CSS及其引用

45次阅读

共计 1944 个字符,预计需要花费 5 分钟才能阅读完成。

前言

是不是感觉应用 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. 行内款式

语法:< 标记 style=”属性 1: 属性值 1; 属性 2: 属性值 2;…”>

实例:<p style=”font-size:10px;color:red;”>

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

2. 外部款式

外部款式写在 HTML 的 <head></head> 中,应用 <style></style> 搁置 CSS 规定。

语法:<style type=”text/css”>

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

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

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

<style>

实例:`p{

font-size: 10px;

background-color: blue;

}

table{

border-with:2px;

border-style:soild

text-align:center

}
`

3. 内部款式

内部样式表是将 CSS 写在以.css 为后缀名的文件中,在须要用到该款式的网页中援用此文件,可供多个网页应用,从而实现整体格调对立。内部款式分为链入内部样式表和导入内部样式表。

1). 链入内部样式表

语法:<link type=”text/css”,rel=”stylesheet”,href=”out.css”>

type 规定被链接文件的 MIME 类型,rel 定义以后文件与被链接文件之间的关系,href 定义被链接文件的地位。

2). 导入内部样式表

语法:<style type=”text/css”>

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

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

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

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

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

<style>

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

3

结语

CSS 的援用办法中,最罕用的是链入内部样式表,肯定要熟练掌握哦,通常不应用行内款式,因为太多的行内款式会使 HTML 文件十分凌乱,是不是感觉 CSS 十分乏味呢,连忙入手学起来吧!
文章起源: 标梵互动 (https://www.biaofun.com/)

正文完
 0