日期:2020-10-02
作者:19届WY
标签:CSS长度单位,颜色单位,字体的分类,字体的样式,文本样式
一、长度单位
1、像素px
- 像素是我们在网页中使用的最多的一个单位,
- 一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的。但是这些像素点,是不能直接看见。
- 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。
2、百分比%
- 也可以将单位设置为一个百分比的形式,这样浏览器将会根据其父元素的样式来计算该值
- 使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变
- 在我们创建一个自适应的页面时,经常使用100%
3、em
- em和百分比类似,它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时,当字体大小发生改变时,em也会随之改变
- 当设置字体相关的样式时,经常会使用em
<style type="text/css">
.box{
width:100px;
height:100px;
background-color: red;
}
.box1{
font-size: 10px;
width:1em;
height:50%;
background-color: yellow;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
二、颜色单位
1、颜色单位
-
在CSS可以直接使用颜色的单词来表示不用的颜色
-
也可以使用RGB值来表示不同的颜色
-
所谓的RGB值是指通过Red,Green,Blue三元色,通过这三种颜色的不同的浓度,来表示出不同的颜色
-
例子:rgb(红色的浓度,蓝色的浓度,绿色的浓度);
-
颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有
-
浓度也可以采用一个百分数来设置,需要一个0%~100%之间的数字
-
使用百分数最终也会转换为0-255之间的数
0%表示0 100%表示255
2、十六进制RGB值
-
也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样
-
只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色
-
每组表示一个颜色,第一组表示红色的浓度,范围00-ff
第二组表示绿色的浓度,范围00-ff
第三组表示蓝色的浓度,范围00-ff -
语法:#红色绿色蓝色
00-ff
00表示没有,相当于rgb中的0
ff表示最大,相当于rgb中的255 -
红色:
#ff0000 -
像这种两位重复的颜色,可以简写
-
比如#ff0000可以写成#f00、
#abc #aabbc
background-color: #0000ff;
三、字体的分类
-
在网页中将字体分成五大类:
serif(衬线字体) sans-serif(非衬线字体) monospace(等宽字体) cursive(草书字体) fantasy(虚幻字体)
-
可以将字体设置为这些大的分类。当设置成大的分类以后,浏览器会自动选择指定的字体并应用样式
<p style="font-size:50px;font-family:serif;">衬线字体,我是一段文字,ABCDEFG</p>
<p style="font-size:50px;font-family:sans-serif;">非衬线字体,我是一段文字,ABCDEFG</p>
<p style="font-size:50px;font-family:monospace;">等宽字体,我是一段文字,ABCDEFG</p>
<p style="font-size:50px;font-family:cursive;">草书字体,我是一段文字,ABCDEFG</p>
<p style="font-size:50px;font-family:fantasy;">虚幻字体,我是一段文字,ABCDEFG</p>
四、字体的样式
1、基本样式
- 设置字体颜色,使用color来设置文字的颜色
.p1{
color:red;
}
<body>
<p class="p1">
我是一个p标签,ABCDefg
</p>
</body>
/*下面这里相同*/
- 设置文字的大小,浏览器中一般默认的文字大小都是16px
- font-size设置的并不是文字本身的大小
- 在页面中,每个文字都是处在一个看不见的框中的
- 我们设置的font-size实际上是设置格的高度,并不是字体的大小
- 一般情况下文字都要比这个格小一些,又是也会比格大
- 根据字体不同,显示效果也不同
.p1{
font-size:20px;
}
- 通过font-family可以指定文字的字体
- 当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体
- 该样式可以同时指定多个字体,多个字体之间使用逗号分开
- 当采用多个字体时,浏览器会优先使用前边的字体
- 浏览器使用的字体就是计算机中的字体,如果计算机中有,则使用,如果没有则不用
- 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,有可能用户的电脑没有,就不能达到想要的结果
.p1{
font-family: "curlz mt";
}
2、其他样式
-
font-style可以用来设置文字的斜体
-
可选值:
normal, 默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示
-
大部分浏览器不会对倾斜和斜体做区分,也就是说我们设置italic和oblique往往效果是一样的
-
一般我们只会使用italic
-
font-weight可以用来设置文本的加粗效果:
-
可选值:
normal,默认值,文字正常显示 bold,文字加粗显示
-
该样式也可以指定100-900之间的9个值
-
但是由于用户的计算机往往没有那么多级别的字体,所以达到我们想要的效果
-
也就是有200肯呢个比100粗,300可能比200粗,但也有可能是一样的
-
font-variant可以用来设置小型大写字母
-
可选值:
normal,默认值,文字正常显示 small-caps 文本以小型大写字母显示
-
小型大写字母:
将所有的小写字母都以大写字母形式显示,但是小写字母的大写, 要比大写字母的大小小一些
-
在CSS中还提供了样式叫font
-
使用该样式可以同时设置字体相关的所有样式
-
可以将字体样式的值,统一写在font样式中,不同的值之间用空格隔开
-
使用font设置字体样式时,斜体 加粗 小大字母 ,没有顺序要求,甚至可写可不写,
如果不写则使用默认值,但是要求文字的大小和字体必须写 -
大小必须是倒数第二个样式
-
实际上使用简写属性也会有一个比较好的性能
<style type="text/css">
.p1{
color:red;
font-size: 30px;
font-family:"微软雅黑";
font-style:italic;
font-variant:small-caps;
}
.p2{
/*设置一个文字大小*/
font-size: 30px;
/*设置一个字体*/
font-family:华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
font:italic small-caps bold 60px "微软雅黑";
}
</style>
<body>
<p class="p1">我是一段文字,ABCDEFG</p>
<p class="p1" style="font-style:oblique;">我是一段文字,ABCDEFGabcdegf</p>
<p class="p2">我是一段文字,ABCDEFGabcdegf</p>
<p class="p3">我是一段文字,ABCDEFGabcdegf</p>
</body>
五、行间距
1、设置行高
- 在CSS并没有为我们提供一个直接设置行间距的方式
- 我们只能通过设置行高来间接的设置行间距,行高越大间距越大
- 使用line-height来设置行高
- 行高类似我们上学单线本,单线本是一行一行,线与线之间的距离就是行高
- 网页中的文字实际上也是写在一个看不见的线中的,而文字默认在行高中垂直居中显示
- 行间距 = 行高 - 字体大小
.p1{
font-size: 20px;
line-height: 2;
}
-
通过设置line-height可以间接地设置行高
-
可以接收的值: 1、直接就收一个大小 2、可以指定一个百分数,则会相对于字体去计算行高 line-height: 200%; 3、可以直接传一个数值,则行高会设置为字体大小相应的倍数
2、单行文本的行高设置
- 对于单行文本来说,可以将行高设置为和父元素的高度一致
- 这样可以使单行文本在父元素中垂直居中
.box{
width:200px;
height:200px;
background-color: #bfa;
line-height: 200px;//和height一样,文字居中
}
3、font指定行高
-
在font中也可以指定行高
-
在字体后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值
.p2{
/*line-height:50px;这句话写这里不生效*/
font:30px "微软雅黑";/*这里没有指定行高就会使用默认值,导致覆盖前面的值,所以把行高写后面*/
line-height:50px;
}
六、文本样式
1、text-transform
- text-transform可以用来设置文本的大小写
-
可选值: none 默认值,该怎么显示就怎么显示,不做任何处理 capitalize 单词的首字母大写 uppercase 所有的字母都大写 lowercase 所有的字母都小写
.p1{
text-transform:lowercase;
}
2、text-decoration
-
text-decoration可以用来设置文本的修饰
可选值: none:默认值,不添加任何修饰,正常显示 underline 为文本添加下划线 overline 为文本添加上划线 line-through 为文本添加删除线
3、超链接
- 超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline
- 如果需要去除超链接的下划线则需要将该样式设置为none
4、letter-spacing和word-spacing
- letter-spacing可以指定字符间距
- word-spacing可以设置单词之间的距离
实际上就是设置词与词之间空格的大小
.p3{
letter-spacing: 10px;
word-spacing: 32px;
}
5、text-align
-
text-align用于设置文本的对齐方式
可选值: left 默认值,文本靠左对齐 right ,文本靠右对齐 center,文本居中对齐 justify,两端对齐 - 通过调整文本之间的空格的大小,来达到一个两端对齐的目的
.p4{
text-align: right;
}
6、text-indent
- text-indent用来设置首行缩进
- 当给它指定一个正值时,会自动向右侧缩进指定的像素
- 当给它指定一个负值时,会自动向左侧缩进指定的像素
- 通过这种方式可以将一些不想显示的文字隐藏起来
.p5{
font-size: 20px;
text-indent: 2em;
}