什么是css？css三种样式以及文字属性的介绍-css教程-PHP中文网

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

Aug 09, 2018 pm 03:31 PM

csshtml

这篇文章给大家介绍的内容是关于什么是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更明显
value	100~900的不带单位数值，一般100~500为正常效果，600~900为加粗，数值越大，字体越粗

font-weight: bold;

5 文本的大小写: text-transform

text-transform: capitalize;

6 文字水平对齐方式：text-align

text-align: left;

7 文字垂直对齐方式

可选值	说明
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
inherit	规定应该从父元素继承 vertical-align 属性的值