外链式样式表_WEB前端 CSS样式表

最新推荐文章于 2024-10-06 22:51:55 发布

訚慈

最新推荐文章于 2024-10-06 22:51:55 发布

阅读量929

点赞数

文章标签：外链式样式表

本文链接：https://blog.csdn.net/weixin_28762271/article/details/112928248

版权

CSS层叠样式表

字体样式属性

font-size:字号大小

页中普遍使用14px+。

尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。

font-family:字体

中文字体需要加引号，英文则不需要

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

p{ font-family:"微软雅黑";}

复制代码

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:"Microsoft Yahei"。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

注：可以通过escape() 来测试属于什么字体

复制代码字体名称

英文名称

Unicode 编码

宋体

SimSun

\5B8B\4F53

新宋体

NSimSun

\65B0\5B8B\4F53

黑体

SimHei

\9ED1\4F53

微软雅黑

Microsoft YaHei

\5FAE\8F6F\96C5\9ED1

楷体_GB2312

KaiTi_GB2312

\6977\4F53_GB2312

隶书

LiSu

\96B6\4E66

幼园

YouYuan

\5E7C\5706

华文细黑

STXihei

\534E\6587\7EC6\9ED1

细明体

MingLiU

\7EC6\660E\4F53

新细明体

PMingLiU

\65B0\7EC6\660E\4F53

font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900(100的整数倍)。

注：数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

复制代码

font:综合设置字体样式

使用font属性时，必须按语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性将不起作用。

选择器{font: font-style font-weight font-size/line-height font-family;}

复制代码

CSS标签

CSS命名不要纯数字、中文等命名，尽量使用英文字母来表示。

标签选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

复制代码

类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用的时候用 class=“类名” 即可。

复制代码

多类名选择器

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。

各个类名中间用空格隔开。

多类名

复制代码

id选择器

id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素

注：选择器和类选择器区别在于次数 id只能使用一次

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

复制代码

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

复制代码

伪类选择器

注意写的时候，他们的顺序尽量不要颠倒按照顺序 link->visited->hover->active

a { /* a是标签选择器所有的链接 */

font-weight: 700;

font-size: 16px;

color: gray;

}

a:hover { /* :hover 是链接伪类选择器鼠标经过 */

color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */

}

复制代码

结构(位置)伪类选择器(CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器

:last-child :选取属于其父元素的最后一个子元素的指定选择器

:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型

:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式

li:first-child { /* 选择第一个孩子 */

color: pink;

}

li:last-child { /* 最后一个孩子 */

color: purple;

}

li:nth-child(4) { /* 选择第4个孩子 n 代表第几个的意思 */

color: skyblue;

}

复制代码

目标伪类选择器(CSS3)

:target {

color: red;

font-size: 30px;

}

复制代码

引入CSS样式表

type="text/CSS" 在html5中可以省略，写上也比较符合规范。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

复制代码

行内式(内联样式)

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

内容标签名>

复制代码

外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

复制代码href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

复制代码

标签显示模式

块级元素(block-level)

常见的块元素有

~

、

、
等，其中
标签是最典型的块元素。
复制代码块级元素的特点：

总是从新行开始

高度，行高、外边距以及内边距都可以控制。

宽度默认是容器的100%

可以容纳内联元素和其他块元素。

行内元素(inline-level)

常见的行内元素有、、、、、~~、~~、、、等，其中标签最典型的行内元素。~~~~

复制代码行内元素的特点：

和相邻行内元素在一行上。

高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或则其他行内元素。(a特殊)

注：

只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

链接里面不能再放链接。

复制代码

块级元素和行内元素区别

块级元素的特点：

总是从新行开始

高度，行高、外边距以及内边距都可以控制。

宽度默认是容器的100%

可以容纳内联元素和其他块元素。

复制代码行内元素的特点：

和相邻行内元素在一行上。

高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或则其他行内元素。

复制代码

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

复制代码