WEB前端 CSS样式表

最新推荐文章于 2024-05-01 22:59:38 发布

weixin_34334744

最新推荐文章于 2024-05-01 22:59:38 发布

阅读量716

点赞数 2

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5c18f578f265da6125780b8a

版权

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样式书写的上下顺序有关。
各个类名中间用空格隔开。

<div class="pink fontWeight font20">多类名</div>
复制代码

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标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
复制代码

行内式（内联样式）

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

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
复制代码

外部样式表（外链式）

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

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>
复制代码

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
复制代码

标签显示模式

块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

复制代码

块级元素的特点：

总是从新行开始

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

宽度默认是容器的100%

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

行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
复制代码

行内元素的特点：

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

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

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

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

注：

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

复制代码

块级元素和行内元素区别

块级元素的特点：

总是从新行开始
高度，行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素。

复制代码

行内元素的特点：

和相邻行内元素在一行上。
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。
复制代码

标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

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

复制代码

weixin_34334744

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WEB前端 CSS样式表

CSS层叠样式表字体样式属性font-size:字号大小页中普遍使用14px+。尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。font-family:字体中文字体需要加引号，英文则不需要如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。p{ font-family:"微软...
复制链接

扫一扫