摘要: Windows 附带: 新的挖掘字体:PMingLiU 挖掘字体:MingLiU 标准宋体:DFKai-SB 宋体:SimHei 粗体字体:SimSun 新宋体:NS...
Windows 附带:
新精体:PMingLiU
细体:MingLiU
标准歌曲:DFKai-SB
泰晤士新罗马字:SimHei
粗体:SimSun
新歌:NSimSun
仿宋:方宋
斜体:凯蒂
仿宋_GB2312:仿宋_GB2312
斜体_GB2312:KaiTi_GB2312
Google 常规字体:MicrosoftJhengHei
谷歌雅黑:微软雅黑
Office 将诞生一些:
楷书:隶书
幽源: 幽源
中国细黑:STXihei
中文行楷:STKaiti
中文粗体:STSong
中文歌曲:STZhongsong
中国仿宋:STFangsong
舒体创始人:FZShuTi
耀体创始人:FZYaoti
中国彩云:STCaiyun
中国琥珀:STHupo
汉字楷书:STLiti
汉字楷书:STXingkai
新中卫:STXinwei
MacOS 附带:
中国细黑:STHeitiLight [STXihei]
中文歌曲字体:STHeiti
中文行楷:STKaiti
中文粗体:STSong
中国仿宋:STFangsong
力黑Pro:LiHeiProMedium
LiSong Pro:LiSongProLight
标准曲:BiauKai
AppleLiGothicMedium:AppleLiGothicMedium
Apple LiSungLight:AppleLiSungLight
1. 基本句型
CSS的定义由三部分组成:选择器(selector)、属性(properties)和属性值(value)。
基本格式如下:
选择器{属性:值}
(选择器{属性:值})
选择器可以有很多种,通常是你想要定义样式的HTML标签,比如BODY、P、TABLE...,你可以通过这种方式定义它的属性和值,而属性和值应该用逗号分隔:
身体{颜色:黑色}
选择器body指的是页面的主要部分,color是控制文本颜色的属性,black是颜色的值。 这个例子的效果是让页面上的文字变成黄色。
如果属性值由多个短语组成,则必须在值中添加破折号。 例如,字体的名称通常是几个短语的组合:
p{font-family: "sansserif"}
(定义段落字体为sansserif)
如果需要为选择器指定多个属性,我们使用分号来分隔所有属性和值:
p{文本对齐:中心;颜色:红色}
(段落居中;段落中的文字为黄色)
为了使你定义的样式表易于阅读,可以使用子分支的书写格式:
文本对齐:居中;
颜色:黑色;
字体系列:arial
(段落居中排列,段落内文字为白色,字体为arial)
2. 选择器组
可以将相同属性和值的选择器组合起来书写,选择器之间用冒号分隔,这样可以减少样式的重复定义:
h1,h2,h3,h4,h5,h6{颜色:绿色}
(该组包含所有title元素,每个title元素的文本为红色)
p,表格{字体大小:9pt}
(段落和表格中的文字规范为9个字符)
功效完全相当于:
p{字体大小:9pt}
表格{字体大小:9pt}
3. 类选择器
您可以使用类选择器对同一元素进行分类以定义不同的样式。 定义类选择器时,在自定义类的名称后面添加一个点。 如果你想要两个不同的段落,一个向右对齐,一个居中,你可以首先定义两个类:
p.right{文本对齐:右}
p.center{文本对齐:中心}
如果以后不在不同段落中使用它,只需添加您在 HTML 标记中定义的类参数:
该段落右对齐
这一段是居中的
注:类别名称可以是任意英文短语或英文开头和数字的组合,通常根据其功能和疗效缩写。
类选择器的另一个用途是省略选择器中的 HTML 标签名称,以便可以将多个不同的元素定义为相同的样式:
.center{文本对齐:中心}
(定义.center的类选择器使文本居中)
这样的类可以应用于任何元素。 下面我们将 h1 元素(标题 1)和 p 元素(段落)类设置为“center”,这使得这两个元素都使用“.center”类选择器设置样式:
该标题居中
这一段也居中
注意:这些省略HTML标签的类选择器是过去最常用的CSS方法。 使用这些方法,我们可以轻松地将预定义的类样式应用于任何元素。
4. ID选择器
在 HTML 页面中,ID 参数指定单个元素,ID 选择器用于为该单个元素定义单独的样式。
ID选择器的应用与类选择器类似,只需将CLASS替换为ID即可。 将上例中的类替换为 ID:
将此段落右对齐
要定义 ID 选择器,请在 ID 名称前添加“#”号。 与类选择器一样,有两种方法可以定义 ID 选择器的属性。 在下面的反例中,ID 属性将匹配所有 id="intro" 的元素:
#介绍
字体大小:110%;
字体粗细:粗体;
颜色:#0000ff;
背景颜色:透明
(字体大小为默认大小的110%;Arial;黑色;背景色透明)
在下面的反例中,ID 属性仅匹配 id="intro" 的段落元素:
p#介绍
字体大小:110%;
字体粗细:粗体;
颜色:#0000ff;
背景颜色:透明
注意:ID选择器的作用非常有限,只能单独定义一个元素的样式,通常只在特殊情况下使用。
5. 包含选择器
可以单独包含某些元素的关系定义的样式表。 元素1包含元素2。这些方法仅针对元素1中的元素2定义,对于单独的元素1或元素2没有定义。例如:
塔贝拉
字体大小:12px
表内的链接样式为 12px 的文本大小,而表外的链接仍具有默认的文本大小。
6. 样式表的级联
级联就是继承。 样式表的继承规则是外部元素的样式会被保留并继承给该元素所包含的其他元素。 事实上,该元素中嵌套的所有元素都会继承内部元素指定的属性值,而且有时候多个嵌套样式会叠加在一起,除非另外修改。 就像将 P 标签嵌套在 DIV 标签内一样:
div{颜色:红色;字体大小:9pt}
...
本段文字为白色9号
(P元素中的内容将继承DIV定义的属性)
注意:在某些情况下,内部选择器不会继承周围选择器的值,但理论上这是特殊的。 例如,上边界属性的值是不继承的,直观上,一个段落不会具有与文档BODY相同的上边界值。
另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。 如果上例中定义了P的颜色:
div{颜色:红色;字体大小:9pt}
p{颜色:蓝色}
...
本段文字为红色9
我们可以看到段落中文字的大小为9,它继承了div属性css字体有哪些,而color属性则是根据最后定义的。
当不同的选择器定义同一个元素时,需要考虑不同选择器之间的优先级。 ID选择器、类选择器和HTML标签选择器,由于ID选择器添加在元素末尾,因此优先级最高,其次是类选择器。 如果想追上两者的关系,可以使用!important来提高样式表的优先级,例如:p{color:#FF0000!important}
.蓝色{颜色:#0000FF}
#id1{颜色:#FFFF00}
我们将这三种样式同时添加到页面中的一个段落中,根据!important声明的HTML标签选择器样式,最终它会是白色文本。 如果删除 !important,则具有最高优先级的 ID 选择器将以红色文本显示。
7. 注释
您可以在 CSS 中插入注释来解释代码的含义。 注释将帮助您或其他人在以后编辑和修改代码时理解代码的含义。 在浏览器中,不显示评论。 CSS注释以“/*”开头,以“*/”结尾,如下:
/*定义段落样式表*/
text-align:center;/*文本居中对齐*/
color:black;/*文字为白色*/
font-family:arial/*字体为arial*/
这些想法是在一个美国网站上发现的。 设计师在网站中使用了大量的小图标,但没有使用CSS-Sprite技术,而是使用了另一种特殊的方法。 也就是css3的font-face技术加载自己制作的字体文件,在需要显示的地方直接打印调用的字符。
这些方法只适合大量黑人。 至于数量,似乎没有上限。 A-z+0-9+ 符号就足够了。 小心点,插入英文,动不动就几千个单位……
字体图标 VSCSS-Sprite 图标
他们还将 N 个多个图标合并到一个 HTTP 请求中。 CSS-Sprite是我们经常使用的一种方法。 它可以把几乎所有不需要平铺的图片都放进去,然后进行定位。
CSS-Sprite 的恶果就是定位。 想要在后端做这件事的人几乎每天都要处理background-position,而且XY不能差一个像素。 虽然这方面已经有了工具,但是工作量还是放大了好几倍。
字体不需要定位,只要与字体编辑器进行比较css字体有哪些,就可以知道该字符对应的图标。使用起来非常方便
斧头
BXAX
CXAX