"box1">这是div
display用来设置元素显示的类型
值可以设置为:
inline : 将原始设置为行内元素
block : 将元素设置为块元素,如果应用于行内元素,就可以设置width和height了
inline-block : 行内块,既可以设置width和height,又不会独占一行.
table : 将元素设置为一个表格
none : 元素不在页面中显示,也不占位置,可以用css伪类设置下滑页
设置可见不可见的,还有visibility:
默认visible
hidden: 元素隐藏,但占着坑
行内加关注:span
<p><span>some text.span>some other text.p>
可以看到,它们的显示并无二致.那么,span用来干什么呢?
通过为 span 应用 id 或 class 属性，这样就可以增加适当的语义了,其中,class 用于一组元素，而 id 用于标识单独的唯一的元素。
也可以有另一种用法,示例就是用行元素p来控制行内元素span.
p.tip span {
font-weight:bold;
color:#ff9955;
}
"tip">提问1：你学习好努力是为了什么?
"tip">回复1：是为了自由?
再来说说文本
1 em = 16px,是一个普通文本的字体大小.在设置字体大小(font-size)时，em 的值会相对于父元素的字体大小改变。 为了避免IE文本调整的问题,可以使用 em 单位代替 pixels。
百分比值: 相对于缩进元素父元素的宽度(width)。
文本内
字体: font-family
通用字体是一类拥有相似外观的字体. CSS 定义了 5 种通用字体系列：
*{text-align:center;}
p.sans_serif {font-family:sans-serif;}
p.serif {font-family:serif;}
p.monospace {font-family:monospace;}
p.cursive {font-family:cursive;}
p.fantasy {font-family:Fantasy ;}
This is a paragraph.
This is a paragraph.(sans_serif)
This is a paragraph.(serif)
This is a paragraph.(monospace)
This is a paragraph.(cursive)
This is a paragraph.(fantasy)
也可以指定某种具体的字体. 但为了避免有的浏览器没有这种字体,常结合通用字体使用:
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
斜体文字: font-style
p.normal {font-style:normal}
p.italic {font-style:italic}
"normal">This is a paragraph, normal.
"italic">This is a paragraph, italic.
字体加粗: font-weight
100 ~ 900 为字体指定了 9 级加粗度。
Normal=400
bold=700
thick=900
p.slim {font-weight: 100}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
"slim">This is a paragraph ----100
This is a paragraph ---- Normal Size
"thick">This is a paragraph ----thick
"thicker">This is a paragraph ----900
注意:
如果将元素的加粗设置为 bolder，浏览器会让字体比所继承值更粗.
与此相反，有关键词 lighter 降低加粗度。
字体大小: font-size
- 常用的尺寸
xx-small,x-small,small,medium(默认),large,x-large,xx-large
- % : 把 font-size 设置为基于父元素字体大小的一个百分比值。
div {font-size: 200%}
This is a paragraph in the body
This is a paragraph 字体继承自div
This is a paragraph body中默认的
'double'>This is a paragraph 自行设置的
-基于父元素的,还有em单位:
以px为单位,不太灵活 ;不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em：pixels/16=em.
父元素改变font-size时,如20px,则16->20
允许所有浏览器缩放文本的大小,更加稳妥的办法,是 body 元素（父元素）以百分比设置默认的 font-size 值
body {font-size:100%;}
h1 {font-size:3.5em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
This is heading 1
This is heading 2
This is a paragraph.
This is a paragraph.
此外还有:
- 还可以根据父元素尺寸调节
smaller ; bigger
字母间距,单词间距
letter-spacing 属性,修改字符(字母)间距
word-spacing 属性,修改字(单词)间距
两者的可取值,包括所有长度。
默认值:0。
属性接受一个正长度值或负长度值。
以字间距为例,如果word-spacing提供一个正长度值，那么字之间的间隔就会增加。
为 word-spacing 设置一个负值，会把它拉近
p.letter {
letter-spacing: -2px; # 字符间距,还可以3px
}
p.word{
word-spacing: 20px; # 单词间距,还可-5px
}
"">Do you like me so much.
"letter">Do you like me so much.
"word">Do you like me so much.
对于中文的适配,单词形式的扩张不能用:
p.letter {
letter-spacing: 20px;
}
p.word{
word-spacing: 20px;
}
<p class="">原文: 这是个啥嘛!p>
<p class="letter">字母: 这是个啥嘛!p>
<p class="word">单词: 这是个啥嘛!p>
如何处理空白符? white-space
white-space属性,影响浏览器处理字之间和文本行之间的空白符的方式.
- 默认值是
normal,会把所有空白符合并为一个空格。
但是也可以让它不忽略这些空白符:
p {white-space: pre;}
This(2 space) paragraph has(Tab) many(next line)
spaces in it.
上面的有一个问题,就是文本行很长时,又没有换行符时,不会自动换行,解决就用:
p {white-space: pre-wrap; border-style:solid;}
我要保留换行符和其他空白符a great many s p a c e s
我要自动换行 its textual content, but their preservation will not prevent
line wrapping or line breaking.
空白符太多也有点不整洁,那就,只保留换行符,允许自动换行,把其他的抹掉:
p {white-space: pre-line; border-style:solid;}
我要保留换行符a great many s p a c e s
我要自动换行 its textual content, but their preservation will not prevent
line wrapping or line breaking.
- 只是不让换行
与normal相比,只是不让自动换行. 除非使用了一个 br 元素。
p{white-space: nowrap}
有空格 一些文本。
有TAB 一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
哈哈哈到我这儿才完!
转换大小写: text-transform
text-transform 属性用于指定文本中的大写和小写字母。
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
"uppercase">Be BEGGER.Or be smaller (原文)
"uppercase">Be BEGGER.Or be smaller
"lowercase">Be BEGGER.Or be smaller
"capitalize">Be BEGGER.Or be smaller
指定文本的方向 / 书写方向。
指定添加到文本的装饰效果。如超链接无下划线__
文本的阴影效果
指定应如何向用户示意未显示的溢出内容。
指定文本的垂直对齐方式。
文本外
对齐方式: text-align
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
<h1>标题 1h1>
<h2>标题 2h2>
<h3>标题 3h3>
注意: 标题 1\
text-align属性. 所以要应用style样式.
此外,还有属性值:
text-align:center 与
justify 在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。
缩进: text-indent
缩进是应用于块级元素的,无法用于行内元素.如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
首行缩进
p.indent {text-indent: 2em}
这是段落中的一些文本。它会缩进.
这是段落中的一些文本。它不会缩进,真的.
首行悬挂
p.indent {text-indent: -2em; padding-left: 2em;}
这是段落中的一些文本。它会首行缩进.text-indent 设置为负值时,会“悬挂缩进”，但对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，要再设置一个外边距或一些内边距.
这是段落中的一些文本。它不会缩进,真的.
其他示例
div {width: 500px; border-style:solid;}
p {text-indent: 20%;}
<div>
<p>this is a paragraghp>
div>
- text-indent 属性可以继承,比如,下面的段落1 继承了 id 为 inner 的 div 元素的缩进值。
div#outer {width: 500px; border-style: solid; }
div#inner {text-indent: 10%;}
"outer">
"inner">In inner
, There are some text. some text. some text.
Inside innner, this is a paragragh 1.
outside innner, this is a paragragh 2.
文本方向 : direction
div.right2left{direction: rtl}
div.left2right{direction: ltr}
div.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
"right2left">Some text. Right-to-left direction.
"left2right">Some text. Left-to-right direction.
"ex1">Some text. Right-to-left direction.
文字行高: line-height
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
默认值: normal设置合理的行间距。
当使用数字number时,设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
当使用百分比%时,基于当前字体尺寸的百分比行间距。
p{border-style: solid;}
p.high {
line-height: 1.8;
border-style: solid;
}
p.low {
line-height: 0.8;
border-style: solid;
}
"high">I have suffered a lot before.
"">I have suffered a lot before.
"low">I have suffered a lot before.
注意:
如果设置段落行高,使用max-height,对元素的高度设置一个最高限制。
值可以是100px,或100%(定义基于包含它的父级块级对象的百分比最大高度。)
与此相对,min-height设置元素的最小高度。用法与上面一样.
文本装饰: text-decoration
修饰的颜色由 “color” 属性设置。
若有多个装饰,用空格隔开。
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
这是标题 1
这是标题 2
这是标题 3
"http://www.w3school.com.cn/index.html">这是一个链接
还有其他常用的
img: 导入图片
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
![]()
标签没有结束标签。从技术上讲，![]()
标签并不会在网页中插入图像，而是从网页上链接图像。![]()
标签创建的是被引用图像的占位空间。
有两个必需的属性：src 属性 和alt 属性。
src: 图像 的url
alt: 规定图像的替代文本。说明多于 1024 个字符，那么可以使用 longdesc 属性来设置指向它的链接。
height:值单位可以是px,或%,定义图像的高度。width一致.
align:left 把图像对齐到左边,right middle top bottom
<a href="/example/html/form_action.asp">
<img src="/i/eg_tulip.jpg" ismap />
a>
<p>点击这幅图像，点击坐标会以 URL 查询字符串发送到服务器。p>
当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件（在本例中是 demo_form.asp 程序）可以根据这些坐标来做出响应。
- usemap 属性
应用如: 将一幅图像 planets.gif 映射为 3 个区域，当用户单击其中某一个区域时，将被链接到不同的文档中。
更多查看链接:HTML ![]()
标签的 usemap 属性
