首页 > web前端 > css教程 > 什么是css?css三种样式以及文字属性的介绍

什么是css?css三种样式以及文字属性的介绍

不言
发布: 2018-08-09 15:31:55
原创
2682 人浏览过

这篇文章给大家介绍的内容是关于什么是css?css三种样式以及文字属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是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更明显
value100~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三种样式以及文字属性的介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板