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>