点击切换帐号登陆
帐号密码登陆

  • 章节

  • 笔记

  • 评论
第1章 CSS 入门教程
1-1CSS速查总表
1-2CSS 教程学习导读
1-3CSS简介
1-4CSS语法
1-5CSS 创建
1-6CSS 定位(Position)
1-7CSS 布局(Layout)
1-8CSS 尺寸 (Dimension)
1-9CSS 外边距(Margin)
1-10CSS 填充(Padding)
1-11CSS 背景(Backgrounds)
1-12CSS 边框(Border)
1-13CSS 颜色(Color)
1-14CSS 字体(Fonts)
1-15CSS 文本(Text)
1-16CSS 文本装饰(Text Decoration)
1-17CSS 书写模式(Writing Modes)
1-18CSS 列表样式(List)
1-19CSS 表格(Table)
1-20CSS 内容(Content)
1-21CSS用户界面(User Interface)
1-22CSS打印(Print)
1-23CSS媒体查询(Media Queries)
1-24CSS 链接(Link)
1-25CSS 轮廓(Outline)
1-26CSS 分组 和 嵌套(Grouping and Nesting)
1-27CSS 浮动 (Float)
1-28CSS 盒子模型(Box Model)
1-29CSS 显示(Display)
1-30CSS 导航栏(Navigation Bar)
1-31CSS 溢出(Overflow)
1-32CSS 下拉菜单(Drop down menu)
1-33CSS 对齐(Align)
1-34CSS 提示工具(Prompt Tool)
1-35CSS 图片廊(Image Gallery)
1-36CSS 图像透明/不透明(Opacity)
1-37CSS 图像拼合技术(Image stitching technique)
1-38CSS 媒体类型(Media Type)
1-39Only IE
1-40Only Webkit
1-41Only Firefox
1-42CSS 总结
第2章 CSS 原生手册
2-1CSS 手册导读
2-2CSS 选择器
2-3CSS 听觉参考手册
2-4CSS Web安全字体组合
2-5CSS 动画
2-6CSS 函数
2-7CSS 单位
2-8CSS 颜色
2-9CSS 颜色值
2-10CSS 颜色名
2-11CSS 颜色十六进制
第3章 CSS 函数 Function
3-1CSS attr() 函数
3-2CSS calc() 函数
3-3CSS linear-gradient() 函数
3-4CSS radial-gradient() 函数
3-5CSS repeating-linear-gradient() 函数
第4章 CSS选择器 Selectors
4-1元素选择符
4-2关系选择符
4-3属性选择符
4-4伪类选择符
4-5伪对象选择符
第5章 CSS取值与单位 Values and Units
5-1CSS 长度(Length)
5-2CSS 角度(Angle)
5-3CSS 时间(Time)
5-4CSS 频率(Frequency)
5-5CSS 布局(Layout-specific)
5-6CSS 分辨率(Resolution)
5-7CSS 文本(Textual)
5-8CSS 函数(Functional)
5-9CSS 生成内容(Content)
5-10CSS 图像(Image)
5-11CSS 数字(Numeric)
第6章 CSS语法与规则 Rules
6-1!important
6-2comment
6-3@import
6-4@page
6-5@supports
第7章 CSS 属性 Property
7-1border-top
7-2scan
7-3border-top-color
7-4overflow-wrap
7-5border-top-left-radius
7-6text-size-adjust
7-7border-top-right-radius
7-8text-decoration-skip
7-9text-underline-position
7-10border-top-style
7-11column-break-before
7-12border-top-width
7-13column-break-after
7-14border-width
7-15column-break-inside
7-16bottom
7-17text-fill-color
7-18box-align
7-19box-reflect
7-20box-direction
7-21tap-highlight-color
7-22user-drag
7-23box-flex
7-24border-colors
7-25box-flex-group
7-26border-top-colors
7-27box-lines
7-28border-right-colors
7-29box-ordinal-group
7-30border-bottom-colors
7-31border-left-colors
7-32box-orient
7-33scrollbar-3dlight-color
7-34box-pack
7-35scrollbar-darkshadow-color
7-36box-shadow
7-37scrollbar-highlight-color
7-38box-sizing
7-39scrollbar-shadow-color
7-40caption-side
7-41scrollbar-arrow-color
7-42clear
7-43scrollbar-arrow-color
7-44clip
7-45scrollbar-face-color
7-46color
7-47scrollbar-track-color
7-48column-count
7-49scrollbar-base-color
7-50column-fill
7-51behavior
7-52column-gap
7-53column-rule
7-54column-rule-color
7-55column-rule-style
7-56column-rule-width
7-57column-span
7-58column-width
7-59columns
7-60content
7-61counter-increment
7-62counter-reset
7-63cursor
7-64direction
7-65display
7-66empty-cells
7-67filter
7-68flex
7-69flex-basis
7-70flex-direction
7-71flex-flow
7-72flex-grow
7-73flex-shrink
7-74flex-wrap
7-75float
7-76font
7-77@font-face
7-78font-family
7-79font-size
7-80font-size-adjust
7-81font-stretch
7-82font-style
7-83font-variant
7-84font-weight
7-85grid-columns
7-86grid-rows
7-87hanging-punctuation
7-88height
7-89icon
7-90justify-content
7-91@keyframes
7-92left
7-93letter-spacing
7-94line-height
7-95list-style
7-96list-style-image
7-97list-style-position
7-98list-style-type
7-99margin
7-100margin-bottom
7-101margin-left
7-102margin-right
7-103margin-top
7-104max-height
7-105max-width
7-106@media
7-107min-height
7-108min-width
7-109nav-down
7-110nav-index
7-111nav-left
7-112nav-right
7-113nav-up
7-114opacity
7-115order
7-116outline
7-117outline-color
7-118outline-offset
7-119outline-style
7-120outline-width
7-121overflow
7-122overflow-x
7-123overflow-y
7-124padding
7-125padding-bottom
7-126padding-left
7-127padding-right
7-128padding-top
7-129page-break-after
7-130page-break-before
7-131page-break-inside
7-132perspective
7-133perspective-origin
7-134position
7-135punctuation-trim
7-136quotes
7-137resize
7-138right
7-139rotation
7-140tab-size
7-141table-layout
7-142target
7-143target-name
7-144target-new
7-145target-position
7-146text-align
7-147text-align-last
7-148text-decoration
7-149text-decoration-color
7-150text-decoration-line
7-151text-decoration-style
7-152text-indent
7-153text-justify
7-154text-outline
7-155text-overflow
7-156text-shadow
7-157text-transform
7-158text-wrap
7-159top
7-160transform
7-161transform-origin
7-162transform-style
7-163transition
7-164transition-delay
7-165transition-duration
7-166transition-property
7-167transition-timing-function
7-168unicode-bidi
7-169pointer-events
7-170vertical-align
7-171user-select
7-172visibility
7-173ime-mode
7-174white-space
7-175zoom
7-176width
7-177-webkit-appearance
7-178word-break
7-179@charset
7-180word-spacing
7-181text-stroke
7-182word-wrap
7-183text-stroke-width
7-184z-index
7-185text-stroke-color
7-186writing-mode
7-187<angle>
7-188deg
7-189​grad
7-190rad
7-191turn
7-192s
7-193align-content
7-194ms
7-195<frequency>
7-196align-items
7-197Hz
7-198align-self
7-199kHz
7-200all
7-201<fraction>
7-202animation
7-203<grid>
7-204animation-delay
7-205fr
7-206animation-direction
7-207gr
7-208animation-duration
7-209<resolution>
7-210animation-fill-mode
7-211dpi
7-212animation-iteration-count
7-213dpcm
7-214dppx
7-215animation-name
7-216unset
7-217animation-play-state
7-218<string>
7-219<url>
7-220animation-timing-function
7-221<identifier>
7-222appearance
7-223calc()
7-224backface-visibility
7-225toggle()
7-226background
7-227counter()
7-228background-attachment
7-229counters()
7-230attr()
7-231<image>
7-232background-blend-mode
7-233image()
7-234background-clip
7-235image-set()
7-236background-color
7-237<gradient>
7-238background-image
7-239repeating-radial-gradient()
7-240background-origin
7-241<integer>
7-242background-position
7-243<percentage>
7-244background-repeat
7-245background-size
7-246border
7-247border-bottom
7-248border-bottom-color
7-249border-bottom-left-radius
7-250border-bottom-right-radius
7-251border-bottom-style
7-252border-bottom-width
7-253border-collapse
7-254border-color
7-255border-image
7-256border-image-outset
7-257border-image-repeat
7-258page
7-259border-image-slice
7-260page-break-before
7-261border-image-source
7-262page-break-after
7-263page-break-inside
7-264border-image-width
7-265border-left
7-266border-left-color
7-267border-left-style
7-268border-left-width
7-269border-radius
7-270border-right
7-271device-width
7-272border-right-color
7-273device-height
7-274border-right-style
7-275orientation
7-276border-right-width
7-277aspect-ratio
7-278border-spacing
7-279device-aspect-ratio
7-280border-style
7-281color-index
7-282monochrome
7-283initial
7-284inherit
7-285RGBA
7-286Color Name
7-287HEX
7-288RGB
7-289HSL
7-290HSLA
7-291transparent
7-292currentColor
7-293<length>
7-294em
7-295ex
7-296ch
7-297rem
7-298vw
7-299vh
7-300vmax
7-301vmin
7-302cm
7-303mm
7-304q
7-305in
7-306pt
7-307pc
7-308px
7-309<number>
第8章 CSS附录 Appendix
8-1颜色关键字(Color Keywords)
8-2媒体类型(Media Types)
第9章 CSS HACK
9-1条件Hack
9-2属性级Hack
9-3选择符级Hack
第10章 问题和经验
10-1Bugs及解决方案列表
10-2CSS技巧和经验列表
10-3其它技巧和经验列表
10-4参考资源列表

CSS 字体(Fonts)

CSS Fonts(字体) 

CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)

CSS字体系列:

在 CSS 中,有两种不同类型的字体系列名称:

通用字体系列:拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")

特定字体系列 : 具体的字体系列(比如 "Times" 或 "Courier")

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

字体示例
Serif 字体

This is a heading

This is a paragraph

Sans-serif 字体

This is a heading

This is a paragraph

Monospace 字体

This is a heading

This is a paragraph

Cursive 字体

This is a heading

This is a paragraph

Fantasy 字体

This is a heading

This is a paragraph

设置字体系列

font-family 属性用于设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体",多个字体系列是用一个逗号分隔指明

实例

h1{pfont-family:"Times New Roman", Times, serif;}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

对于较常用的字体组合,看看我们的 Web安全字体组合

设置字体样式

主要是用于指定斜体文字的字体样式属性

这个属性有三个值:

normal:正常显示文本

italic:以斜体字显示的文字

oblique:文字向一边倾斜(和斜体非常类似,但浏览器不太支持)

实例

<style type="text/css">
	h1{
		font-style: normal;
	}
	h2{
		font-style:italic;
	}
	h3{
		font-style:oblique;
	}
	</style>
</head>
<body>
	<h1>This is a heading</h1>
	<h2>This is a heading</h2>
	<h3>This is a heading</h3>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

设置字体大小:

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对值。

绝对值:将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性),绝对大小在确定了输出的物理尺寸时很有用

例:像素(px)

相对大小:相对于周围的元素来设置大小允许用户在浏览器改变文本大小

例:em

1em 等于当前的字体尺寸,如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

实例

<style type="text/css">
	.p1{
		font-size:16px;
	}
	.p2{
		font-style:1em;
	}
	</style>
</head>
<body>
	<p class="p1">This is a heading</p>
	<p class="p2">This is a heading</p>
	
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 3.jpg

设置字体加粗:

font-weight 属性设置文本的粗细。

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。

如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

实例

<style type="text/css">
	.p1{
		font-weight:bold;
	}
	.p2{
		font-weight:700;
	}
	</style>
</head>
<body>
	<p class="p1">This is a heading</p>
	<p class="p2">This is a heading</p>
	
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 4.jpg

所有CSS字体属性

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号