CSS学习五：文本的css属性、一个web页面示例 - myworldworld

顺晟科技

2022-09-13 13:05:59

文本样式的font属性

文本大小：font-size
文本字体：font-family
文本粗细：font-weight
文本倾斜：font-style
文本颜色：color
文本行高：line-height
文字属性font简写

示例：

p {
    height: 100px;
    /* background-color: blue; */
    font-size: 30px;   /* 字体大小，默认值14*/
    font-family: "微软雅黑"; /* 字体类型，默认值arial、宋体*/
    font-weight: 900px; /* 字体粗细，默认值normal */
    font-style: normal; /* 字体倾斜风格，默认值normal*/
    line-height: 100px; /* 行高，默认值normal */
    color: #008000;  /* 字体颜色，默认值none */
    color: rgba(3,2,2,0.5);
    text-align: left;  /* 文本水平对齐方式*/
    vertical-align: middle;  /* 文本垂直对齐方式*/
    
    text-decoration: underline; /*文本修饰,上中下划线等，默认值none*/
    text-indent: 40px;  /*文本首行缩进*/
    letter-spacing: 10px; /*字符间距，默认值0 */
    word-spacing: 20px; /*单词间距，默认值0 */
    text-transform: capitalize; /*单词大小写,首字母大写等*/
    text-shadow: 10px 20px 5px paleturquoise;  /*文本阴影*/
}

具体描述：

文本大小、字体大小：font-size，通常使用px

属性值为数值，必须给数值加上单位，0除外
单位可以是pt，px，em。9pt=12px。1em=16px。em是相对文字单位，当前文本的字符大小；pt是绝对长度单位，单位为磅；px是相对长度单位，单位像素，使用比较多。
使用绝对大小关键词，它们的实际大小根据不同的浏览器及设备来决定。xx-small，x-small，small，medium，large，x-large，xx-large。默认值meduim。

五号字体大小：10.5pt，14px

文本字体、字体类型：{font-family：字体1，字体2，字体3}

浏览器首先寻找字体1，如果字体1不存在，依次寻找字体2.....如果设置的字体都不存在，则使用系统默认字体显示
当字体是中文字体时，需要加双引号。
当英文字体中有空格时，需要加双引号。
当英文字体只有一个单词组成时，不加双引号。
英文默认字体为arial，中文默认字体为宋体。

文本粗细、字体粗细：font-weight

属性值范围：bolder更粗，bolder更粗，bold粗体，normal常规，lighter更细，100-900
100-900,100对应最细的字体，900是最粗。400等同于normal。

文本倾斜：font-style，较少使用

属性值范围：italic倾斜度小，oblique倾斜度大，normal，取消倾斜，正常显示。

文本颜色、字体颜色：color

16进制表示的颜色值，#123456
RGB模式表示的颜色值，rgb(12, 34, 45)
RGBA模式表示的颜色值，前3个值表示RGB颜色值，第4个值表示透明度，rgba(2,3,40.5)
英文单词表示的颜色值，如blue

文本行高：line-height

当单行文本的行高，等于容器高时，可实现单行文本在容器中，垂直方向居中对齐。
当单行方本的行高，小于容器高时，可实现单行文本在容器中，垂直中齐以上任意位置的定位。
当单行文本的行高，大于容器高时，可实现单行文本在容器中，垂直中齐以下任意位置的定位。
文本行高line-height，与文本大小font-size的差值，称为行间距。行间距分为两部分，分别加到一个文本行内容的顶部和底部，可以包含这些内容的最小框，就是行框。
倍行高：{line-height:2/2em}；2倍行距：{line-height:200%}，可以使用百分比或em等单位。

文本样式的text属性：

text-align：文本水平对齐方式，属性值范围：left，right，center，justify两端对齐。

vertical-align：文本垂直对齐方式，属性值范围：top，bottom，middle。适用于指定图片，相对于其它文字的垂直对齐方式

文本样式修饰的运用规范：

text-decoration：文本修饰，属性值范围：none没有修饰，underline下划线，overline上划线，line-through删除线，blink闪烁

text-indent：文本首行缩进，只对段落的第一行起作用，属性值为数值；当为负值时，首行会被缩进到左边。

letter-spacing：字符间距，属性值为数值。默认值为0或normal。

word-spacing：控制英文单词之间词距。默认值为0或normal。

white-space：元素空白的处置方式，属性值：normal默认的处理方式(空白会被浏览器忽略)，pre用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文本超出边界时不换行；nowrap强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或遇到br标签；pre-wrap用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行；pre-line保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

text-transform：控制元素中的字母，属性值范围：capitalize将单词首字母转大写，uppercase所有字母转大写，lowercase所有字母转小写

文字添加阴影和自动换行：

{text-shadow：h-shadow v-shadow blur color；}：给文字添加阴影，取值：h-shadow必需，水平阴影的位置，数值，允许负值；v-shadow必需，垂直阴影的位置，数值，允许负值；blur可选，模糊的距离；color阴影的颜色

word-wrap：自动换行属性，允许长单词或url地址换到下一行，属性值：normal默认，只在允许的断点换行；break-word在长单词或url地址内部进行换行。比较少用。

示例：一个web网站页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>梅西</title>
        <link rel="stylesheet" type="text/css" href="css/meixi.css" />
    </head>
    <body>
        <div id="box">
            <div id="logol">logol</div>
            <div id="nav">
                <div id="navbox">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">首页</a></li>
                        <li><a>首页</a></li>
                        <li><a>首页</a></li>
                    </ul>
                </div>
            </div>
            <div id="main">
                <div id="leftMain">
                    <div><img src="img/meixi.jpg" , alt="meixi.jpg" , name="meixi" , style="width: 200px;height:260px;background-color: #008000;" /></div>
                    <ul id="menu">
                        <li>
                            <a href="#">good</a>
                            <ul>
                                <li>good1</li>
                                <li>good2</li>
                                <li>good3</li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">bad</a>
                            <ul>
                                <li>bad1</li>
                                <li>bad2</li>
                                <li>bad3</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="rightMain">
                    <p>&nbsp;</p>
                    <h1>介绍</h1>
                    <p>里奥·梅西（Lionel Messi），1987年6月24日出生于阿根廷圣菲省罗萨里奥市，阿根廷足球运动员，司职前锋，现效力于巴塞罗那足球俱乐部。</p>
                    <h1>主要比赛经历</h1>
                    <p>2000年加入巴塞罗那俱乐部。<br />
                        2005年，阿根廷青年队夺取世青赛冠军，梅西赢得了金球奖和金靴奖双项大奖。<br />
                        2007年4月18日，梅西在国王杯半决赛对赫塔菲时复制了马拉多纳在世界杯上的连过五人进球。<br />
                        2008年北京奥运会上，梅西随阿根廷国奥队夺取了金牌。<br />
                        2009年底，他当选了欧洲足球先生和世界足球先生。<br />
                        2008-2009赛季率领球队连夺西甲、国王杯和欧冠三个冠军。<br />
                        2011年，梅西获得首届国际足联金球奖，还获得了欧足联欧洲***球员。<br />
                        2013年，他以46粒联赛进球的成绩第三次获得欧洲金靴奖奖杯。<br />
                        2014年，梅西随阿根廷队参加2014巴西世界杯。2014年巴西世界杯上，获得世界杯亚军。
                    </p>
                    <h1>主要荣誉</h1>
                    <p>
                        [1] 2014年12月20日，梅西被IFFHS评为2013年世界职业联赛的***射手奖 <br />
                        [2] 2015年8月，当选欧洲超级杯***球员。 <br />
                        [3] 2015年8月27日，获得欧洲***球员。 <br />
                        [4] 2016年1月12日，梅西荣膺2015年度FIFA金球奖，五度得奖创纪录。2016年6月，在连续三次决赛（2014年世界杯、2015年美洲杯、2016年美洲杯）失利后，梅西正式宣布将退出阿根廷国家队。<br />
                        [5] 8月13日，梅西正式回归阿根廷国家队。
                        2017年11月24日，梅西领取了2016-17赛季的欧洲金靴奖，这也是其个人第四座欧洲金靴奖，四夺欧洲金靴也追平了C罗的纪录。11月25日，巴萨官方和梅西续约到2020-21赛季 <br />
                        [6] 2018年9月，入选国际足联年度***阵容。</p>
                </div>
            </div>
            <div id="footer">
                <div id="text">
                    <p>copy&copy;2017</p>
                    <p>from bbbbb</p>
                </div>
            </div>
        </div>
    </body>
</html>

meixi.css

* {
    margin: 0;
    padding: 0;
}
#box {
    width: 800px;
    margin: 0 auto;  /* margin为0，居中*/
}
#logol {
    height: 24px;
    background-color: #008000;
}
#nav {
    height: 24px;
    background-color: burlywood;
}
#main {
    height: 700px;
}
/* 左边主菜单：向左浮动 */
#leftMain {
    width: 200px;
    background-color: aliceblue;
    float: left;
    height: 700px;
}
/* 右边主菜单：向右浮动 */
#rightMain {
    width: 600px;
    background-color: cadetblue;
    float: right;
    height: 700px;
}
#footer {
    background-color: orange;
}
/* 以上是基本框架 */


/* 导航栏右浮动 */
#navbox {
    float: right;
}
/* 导航栏：每个列表项是行内块级元素，可以设置宽高但不换行 */
/* 并设置列表项内的文本样式 */
#navbox>ul>li {
    list-style-type: none;  /* 移除列表项标记*/
    display: inline-block; /* 将li标签改变为行内块级元素*/
    width: 80px;   /*每个li的宽度*/
    text-align: center;  /*li标签内的文本居中*/
    line-height: 24px;  /*li标签内的文本行高，这里与导航栏的高度一样*/
}
/* 所有a标签的样式：导航栏和左边主菜单的a标签 */
a:link {color: blue; text-decoration:none;} /*未访问：蓝色、无下划线 */
a:active:{color: red; } /*激活：红色 */
a:visited {color:purple;text-decoration:none;} /*已访问：紫色、无下划线 */
a:hover {color: red; text-decoration:underline;} /*鼠标移近：红色、下划线 */


/* 设置左边主菜单的a标签，它的优先级比定义所有a标签样式的优先级要高 */
#leftMain li a {
    color: #FF0000;
    text-decoration: none;
}
/* 左边主菜单：折叠菜单宽高 */
#menu {
    width: 160px;
    margin: 50px;
}
/* 折叠菜单(一级和二级)，列表项的文本样式 */
#menu li {
    font-size: 16px;
    list-style-type: none;
}
/* 一级菜单字体样式 */
#menu>li {
    /* background: url(../img/qt.jpg); */
    line-height: 24px;
    text-indent: 5px;
}
/* 折叠菜单中的二级菜单缩进 */
#menu ul li {
    text-indent: 30px;
}
/* 隐藏二级菜单 */
#menu ul {
    display: none;
}
/* 划过一级菜单li时：显示二级菜单ul */
#menu>li:hover ul {
    display: block;
}


/* footer居中 */
#footer p {
    text-align: center;
}

上一篇：在CSS背景图片的backgroun 下一篇：CSS-icon图标(icon fo

网站建设

Css

CSS学习五：文本的css属性、一个web页面示例 - myworldworld