时间:2021-07-01 10:21:17 帮助过:60人阅读
什么是CSS?
Cascading Style Sheets,简称CSS,层叠样式表。 
  用来修饰HTML文件,对网页元素进行排版或大小控制等操作。 
  也就是说,HTML文件填充了网页的内容,而CSS则是控制内容的表现 
  例如:元素的大小,元素在网页中的位置,元素的背景等属性。
CSS代码写在那里?
1 内联样式(行内式):css代码可以写在html标签中,使用style=”css样式”;
<p style="color: red;">这是一个段落</p>
2  内部样式:
把css代码写在style标签里面 
  style标签理论上写在文档的任何位置都可以生效,但是我们都会把style写在head标签里面
<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>3 外部样式:
外部样式是把css代码单独写在一个css文件(css后缀文件)中 
  再使用link标签把外部样式文件引入进来 
  外部样式文件中不需要style标签,直接写css代码就可以了
<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>三种样式可以多种同时使用
文字属性 : font属性
1 字体大小:font-size
设置字体的大小,使用带单位的值,例如px,em,pt等
font-size: 12px;
2 字体颜色:color
color: red;
3 字体样式:font-family
设置字体,例如宋体、雅黑之类的 
  可以有多个值 
  但只显示一种字体样式 
  若第一个字体可用就使用第一个,否则使用第二个 
  若第二个字体也不可用,就是用第三个,以此类推 
  字体与字体之间用英文逗号隔开,如果是中文或多个单词的值,要用英文双引号包起来
font-family: "宋体",Times,"New Century Schoolbook";
4 字体粗细:font-weight
| 可选值 | 说明 | 
|---|---|
| normal | 默认值,不加粗 | 
| bold | |
| bolder | 加粗,效果比bold更明显 | 
| value | 100~900的不带单位数值,一般100~500为正常效果,600~900为加粗,数值越大,字体越粗 | 
font-weight: bold;
5 文本的大小写: text-transform
| 可选值 | 说明 | 
|---|---|
| none | 默认值,无效果 | 
| capitalize | 首字母大写 | 
| uppercase | 全部大写 | 
| lowercase | 全部小写 | 
text-transform: capitalize;
6 文字水平对齐方式:text-align
| 可选值 | 说明 | 
|---|---|
| left | 默认值,左对齐 | 
| right | 右对齐 | 
| center | 居中对齐 | 
| justify | 两端对齐 | 
text-align: left;
7 文字垂直对齐方式
| 可选值 | 说明 | 
|---|---|
| baseline | 默认。元素放置在父元素的基线上 | 
| sub | 垂直对齐文本的下标 | 
| super | 垂直对齐文本的上标 | 
| top | 把元素的顶端与行中最高元素的顶端对齐 | 
| text-top | 把元素的顶端与父元素字体的顶端对齐 | 
| middle | 把此元素放置在父元素的中部 | 
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 | 
| text-bottom | 把元素的底端与父元素字体的底端对齐 | 
| inherit | 规定应该从父元素继承 vertical-align 属性的值 | 
只有元素属于inline或是inline-block ,vertical-align属性才会起作用。
vertical-align: baseline;
8文本划线: text-decoration
| 可选值 | 说明 | 
|---|---|
| none | 无下划线 | 
| underline | 下划线 | 
| overline | 上划线 | 
| line-through | 中间划线(删除线) | 
text-decoration: underline;
9 首行缩进: text-indent
该属性接受一个带单位的值 
  规定文本首行缩进多少个单位的空间 
  只对第一行有缩进,而且只用于块元素
text-indent: 2em;
text-indent的属性值一般会使用em作为单位,因为一般缩进都以多少个字符为标准
10字间距: letter-spacing
该属性接受一个带单位的值 
  规定每个字符之间间隔多少个单位的空间
letter-spacing: 1em;
11 词间距: word-spacing
该属性接受一个带单位的值 
  规定每个单词之间间隔多少个单位的空间 
该属性对中文无效
相关文章推荐:
鼠标划过字体时如何用css来实现字体变色?(代码实测)
css三栏布局的三种实现方式(圣杯布局、双飞翼布局、Flex布局)
以上就是什么是css?css三种样式以及文字属性的介绍的详细内容,更多请关注Gxl网其它相关文章!