CSS基础知识（颜色、文本、阴影） color: 该属性用于控制文本颜色
font- family: 设置文字的字体
font- size: 用于设置文字的大小，后边可以直接为数字的大小
font- stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽；
字体依次由窄到宽：ultra- condensed、extra- condensed、condensed、semi- condensed、normal、semi- expanded、expanded、extra- expanded、ultra- expanded；
normal : 默认值。不应用拉伸变形；narrower: 使用比当前设置的值导致字体宽度更小的值；
wider : 使用比当前设置的值导致字体宽度更大的值。
font- weight: 设置字体是否加粗，其值：lighter: 更细，normal：正常，bold：加粗，bolder：更粗
text- decoration: 用于决定文字是否有修饰线：none：无修饰，blink：闪烁，underline：下划线，line- through: 中划线，overline：上划线
font- variant: 用于设置文字的大写字母的格式
text- transform: 用于设置文字的大小，capitalize：首写字母大写，uppercase：全部大写
line- height: 用于设置字体的行高
letter- spacing: 用于增加（值为正）或减少（值为负）字符间距；字符间隔：字母和字母之间的空白对中文有效
word- spacing: 字间隔 ：单词和单词之间的间隔 对中文无效
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html charset=utf-8" >
< title> font< / title>
< / head>
< body>
< ! -- 该属性用于控制文本颜色-- >
color: #888888 :
< span style= "color: #888888" > 哈哈哈哈< / span> < br/ >
color: red:
< span style= "color:red" > 哈哈哈哈< / span> < br/ >
< ! -- 设置文字的字体-- >
font- family: '楷体_GB2312' :
< span style= "font-family:'楷体_GB2312'" > 哈哈哈哈< / span> < br/ >
< ! -- font- size: 用于设置文字的大小，后边可以直接为数字的大小-- >
font- size: 20 pt:
< span style= "font-size:20pt" > 哈哈哈哈< / span> < br/ >
font- size: xx- large:
< span style= "font-size:xx-large" > 哈哈哈哈< / span> < br/ >
< ! -- font- stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽。-- >
< ! -- 字体依次由窄到宽：ultra- condensed、extra- condensed、condensed、semi- condensed、normal、semi- expanded、expanded、extra- expanded、ultra- expanded-- >
< ! -- normal : 默认值。不应用拉伸变形
narrower: 使用比当前设置的值导致字体宽度更小的值
wider : 使用比当前设置的值导致字体宽度更大的值-- >
font- stretch: narrower:
< span style= "font-stretch:narrower" > 哈哈哈哈< / span> < br/ >
< ! -- 设置字体是否加粗，其值：lighter: 更细，normal：正常，bold：加粗，bolder：更粗-- >
font- weight: bold:
< span style= "font-weight:bold" > 哈哈哈哈< / span> < br/ >
font- weight: 300 :
< span style= "font-weight:300" > 哈哈哈哈< / span> < br/ >
< ! -- 用于决定文字是否有修饰线：none：无修饰，blink：闪烁，underline：下划线，line- through: 中划线，overline：上划线-- >
text- decoration: blink:
< span style= "text-decoration:blink;" > 哈哈哈哈< / span> < br/ >
text- decoration: underline:
< span style= "text-decoration:underline" > 哈哈哈哈< / span> < br/ >
text- decoration: line- through:
< span style= "text-decoration:line-through" > 哈哈哈哈< / span> < br/ >
< ! -- 用于设置文字的大写字母的格式-- >
font- variant: small- caps:
< span style= "font-variant:small-caps" > HAHAHAHAHAhahahahaha< / span> < br/ >
< ! -- 用于设置文字的大小，capitalize：首写字母大写，uppercase：全部大写-- >
text- transform: uppercase:
< span style= "text-transform:uppercase" > hahahahahaHAHAHAHAHA< / span> < br/ >
text- transform: capitalize:
< span style= "text-transform:capitalize" > hahahahahaHAHAHAHAHA< / span> < br/ >
< ! -- 用于设置字体的行高-- >
line- height: 30 pt:
< span style= "line-height:30pt" > 哈哈哈哈< / span> < br/ >
< ! -- 用于增加（值为正）或减少（值为负）字符间距；字符间隔：字母和字母之间的空白 对中文有效-- >
letter- spacing: 5 pt:
< span style= "letter-spacing:5pt" > 哈哈哈哈ABC< / span> < br/ >
letter- spacing: 15 pt:
< span style= "letter-spacing:15pt" > 哈哈哈哈ABC< / span> < br/ >
< ! -- 字间隔 ：单词和单词之间的间隔 对中文无效-- >
word- spacing: 20 pt:
< span style= "word-spacing:20pt" > hello world< / span> < br/ >
word- spacing: 60 pt:
< span style= "word-spacing:60pt" > hello world< / span> < br/ >
< / body>
< / html>
text- indent: 缩进
text- align: center: 居中对齐
text- align: right：居右对齐
direction: rtl：文本从右边流入
direction: ltr：文本从左边流入
white- space: nowrap: 强制不换行，知道遇到br标签
text- overflow: clip：当文字溢出时，只是简单的裁切
text- overflow: ellipsis：当文字溢出时，裁切之后显示裁切标记
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html charset=utf-8" >
< title> 文本相关属性设置< / title>
< style type= "text/css" >
div{
border: 1 px solid #000000 ;
height: 30 px;
width: 200 px;
}
< / style>
< / head>
< body>
< ! -- 缩进20 pt-- >
text- indent: 20 pt:
< div style= "text-indent:20pt" > 哈哈哈哈< / div>
< ! -- 缩进40 pt-- >
text- indent: 40 pt:
< div style= "text-indent:40pt" > 哈哈哈哈< / div>
< ! -- 居中对齐-- >
text- align: center:
< div style= "text-align:center" > 哈哈哈哈< / div>
< ! -- 居右对齐-- >
text- align: right:
< div style= "text-align:right;" > 哈哈哈哈< / div>
< ! -- 文本从右边流入-- >
direction: rtl:
< div style= "direction:rtl;" > 哈哈哈哈嘻嘻嘻嘻< / div>
< ! -- 文本从左边流入-- >
direction: ltr:
< div style= "direction:ltr;" > 哈哈哈哈嘻嘻嘻嘻< / div>
< ! -- 强制不换行，知道遇到br标签-- >
white- space: nowrap:
< div style= "white-space:nowrap;" > 哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈< / div>
< ! -- 当文字溢出时，只是简单的裁切-- >
text- overflow: clip:
< div style= "overflow: hidden;white-space: nowrap; text-overflow:clip;" > 哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈< / div>
< ! -- 当文字溢出时，裁切之后显示裁切标记-- >
text- overflow: ellipsis:
< div style= "overflow: hidden;white-space: nowrap; text-overflow:ellipsis;" > 哈哈哈哈呵呵呵呵嘻嘻嘻嘻哈哈哈哈< / div>
< / body>
< / html>
word- break : keep- all: 不允许在单词中换行
word- break : break - all: 允许在单词中换行
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html charset=utf-8" >
< title> 文本相关属性设置< / title>
< style type= "text/css" >
div{
border: 1 px solid #000000 ;
height: 50 px;
width: 240 px;
}
< / style>
< / head>
< body>
< ! -- 不允许在单词中换行-- >
word- break : keep- all:
< div style= "word-break:keep-all" >
Hello World Hi World Hello World Hello World
< / div>
< ! -- 允许在单词中换行-- >
word- break : break - all:
< div style= "word-break:break-all" >
Hello World Hi World Hello World Hello World
< / div>
< / body>
< / html>
background- color: rgb ( 255 , 0 , 255 )
background- color: rgb ( 255 , 0 , 255 , 0.5 ) ; "
最后一个代表透明度，0 - 1 ：0 代表完全透明，1 代表完全显示
background- color: hsl ( 120 , 80 % , 50 % )
background- color: hsla ( 120 , 80 % , 50 % , 0.5 )
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html charset=utf-8" >
< title> color< / title>
< style type= "text/css" >
div> div{
width: 300 px;
height: 40 px;
}
< / style>
< / head>
< body>
< script type= "text/javascript" >
for ( var i = 0 ; i < 110 ; i++ ) {
document. write ( "hahahaha" ) ;
}
< / script>
< div style= "position: absolute;top: 0px" >
< div style= "background-color: gray;" > hahahaha
< / div>
< div style= "background-color: #aaa;" > hahahaha
< / div>
< div style= "background-color: #ffff00;" > hahahaha
< / div>
< div style= "background-color: rgb(255,0,255);" > hahahaha
< / div>
< div style= "background-color: hsl(120,80%,50%);" > hahahaha
< / div>
< div style= "background-color: rgb(255,0,255,0.5);" > < ! -- 最后一个代表透明度，0 - 1 ：0 代表完全透明，1 代表完全显示-- >
< / div>
< div style= "background-color: hsla(120,80%,50%,0.5);" >
< / div>
< / div>
< / body>
< / html>
text- shadow：设置文本的阴影
text- shadow: X- Offset Y- Offset blur color;
X- Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y- Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0 ；
Color：是指阴影的颜色，其可以使用rgba色。
< ! DOCTYPE html>
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html charset=utf-8" >
< title> 阴影< / title>
< style type= "text/css" >
span{
display: block;
padding: 8 px;
font- size: xx- large;
}
< / style>
< / head>
< body>
text- shadow: red 5 px 5 px 2 px:
< span style= "text-shadow:red 5px 5px 2px" > 哈哈哈哈< / span> < br/ >
text- shadow: 5 px 5 px 2px ( 省略阴影颜色）:
< span style= "text-shadow:5px 5px 2px" > 哈哈哈哈< / span> < br/ >
text- shadow: - 5 px - 5 px 2 px gray ( 向左上角投影）:
< span style= "text-shadow:-5px -5px 2px gray" > 哈哈哈哈< / span> < br/ >
text- shadow: - 5 px 5 px 2 px gray ( 向左下角投影）:
< span style= "text-shadow:-5px 5px 2px gray" > 哈哈哈哈< / span> < br/ >
text- shadow: 5 px - 5 px 2 px gray ( 向右上角投影）:
< span style= "text-shadow:5px -5px 2px gray" > 哈哈哈哈< / span> < br/ >
text- shadow: 5 px 5 px 2 px gray ( 向右下角投影）:
< span style= "text-shadow:5px 5px 2px gray" > 哈哈哈哈< / span> < br/ >
text- shadow: 15 px 15 px 2 px gray（向右下角投影、更大偏移距）:
< span style= "text-shadow:15px 15px 2px gray" > 哈哈哈哈< / span> < br/ >
text- shadow: 5 px 5 px 10 px gray（向右下角投影，模糊半径增加，模糊程度加深）:
< span style= "text-shadow:5px 5px 10px gray" > 哈哈哈哈< / span> < br/ >
< / body>
< / html>
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
