Css基本样式————文本

一、CSS文本属性可定义文本外观


二、通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进


三、常用属性:

color        文本颜色

body{
    color: aqua;
}
<body>
    <p>查看颜色</p>
</body>

这里给body设置color,在p标签中可以看到效果

说明color这个属性是可以继承的

direction        文本方向

line-height        行高

letter-spacing        字符间距

text-align        对齐元素中的文本

p{
    color: red;
    text-align: right;
}
<body>
    <p>Hello World</p>
</body>

text-decoration        向文本中添加修饰

text-indent        缩进元素中文本的首行

h3{
    text-indent: 2em;
}
<body>
    <div>
        <h3>静夜思</h3>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </div>
</body>

也可以按百分比缩进

text-transform        元素中的字母

p{
    text-transform: capitalize;
}
<body>
    <div>
        <p>there is a beautiful girl</p>
        <p>a so lovely girl</p>
        <p>i always tell myself "never give up,never give up, never give up!"</p>
    </div>
</body>

capitalize:把所有单词的首字母大写

lowercase:全部变小写

uppercase:全部变大写

inherit(中文意思为“继承”):默认方式(不改变原文内容)

unicode-bidi        设置文本方向

white-sapce        元素中空白的处理方式

word-spacing        字间距

四、CSS3文本效果:

    text-shadow:向文本添加阴影

p{
    text-shadow: 5px 5px 5px #FF0000;
}
<body>
    <div>
        <p>there is a beautiful girl</p>
        <p>a so lovely girl</p>
        <p>i always tell myself "never give up,never give up, never give up!"</p>
    </div>
</body>

text-shadow需要设置4个值

第一个值:相对于原本文字距左的距离

第二个值:距当前文本上方的位置

第三个值:清晰度

第四个值:背景颜色

word-wrpa:规定文本的换行规则

p{
    width: 100px;
    text-wrap: normal;
}

width:100px;    设置p元素整体宽度为100

text-wrap:normal;    自动换行

此外还有一个功能

如果<p></p>内写的是英文,"text-wrap"这个属性不会把当前的文字拆开(这个效果非常不错)







时间: 2024-12-31 18:13:02

Css基本样式————文本的相关文章

css字体样式+文本样式

font-family属性值:具体字体名或者字体集 如果是中文或者有单词之间有空格,需要加双引号 字体集: Serif (有装饰线) Sans-serif (无装饰线) Monospace Cursive Fantasy <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &

CSS基本样式-文本属性

字体属性 文本属性呢,自我认为就是写文档的一些格式属性,例如:字体颜色,字体加粗,字体大小,字体类型等,而且我们在输出测试用例报告的时候也可以用到这些属性,对测试报告进行优化. <html> <head lang="en"> <meta charset="UTF-8"> <title>字体属性</title> <style> .box{ /*字体颜色*/ color: red; /*字体加粗*/

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

css实现的文本框focus获取焦点设置样式代码实例

css实现的文本框focus获取焦点设置样式代码实例:文本框获取焦点然后设置它的css样式通常可以使用javascript代码.具体可以参阅javascript实现的文本框获取焦点设置其样式代码一章节.其实使用纯css也能够实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=

CSS(2)---css字体、文本样式属性

css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size).字体粗细(font-weight).字体风格(font-style).字体颜色(color). 1.字体设置(font-family) 网页中常用的字体有 宋体.微软雅黑.黑体 等,例如将网页中 所有p标签的字体设置为微软雅黑,可以使用如下CSS样式代码: p { font-family:"微软雅

CSS 字体和文本样式

一.字体 font-family font-family:[字体1] [,字体2] [,...]例如: font-family:"宋体"; 1. 含空格字体名和中文,用英文引号( " ) 括起 font-family:"微软雅黑"; font-family:"Calibri Light"; 2. 多个字体,用英文逗号 “,” 隔开 设置多个字体,浏览器依次查找,如果都没有,使用浏览器默认样式. 由于每个人安装的操作系统不一样,每个操作系

HTML: css 修飾文本和字體

因爲這個我認爲不用記,所以關於css 修飾文本&字體的屬性只需要打開css手冊,找到(屬性 > 文本) & (屬性 > 字體)翻看即可. 關於字體屬性: Properties 属性 Description 简介 font 复合属性.设置或检索对象中的文本特性 font-style 设置或检索对象中的字体样式 font-variant 设置或检索对象中的文本是否为小型的大写字母 font-weight 设置或检索对象中的文本字体的粗细 font-size 设置或检索对象中的字体尺

css text-overflow溢出文本显示省略号

<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象内文本溢出时显示省略标记</nobr></div> 语法: text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...)

CSS基本样式

CSS基本样式 内联样式:直接在页面文件中使用HTML标记的style属性.例如: <p style="font-family:宋体;color: red;font-size: 10pt;">程序员</p> 在页面文件中定义样式:这种方式是通过<style>标记来定义样式,语法格式如下: <style type="text/css"> h1 {font-family: "微软雅黑";font-siz