3、文本属性

作者: calvinbj | 来源:发表于2019-02-23 11:02 被阅读0次

CSS3 文本效果+字体
H5学习之02css属性（全）
CSS3 文本效果
3、文本属性
iOS NSMutableAttributedString
JQ第二天
031 JQ高级
jQuery基本操作
HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、
css扩展/CSS3

这里注意，css文件记得加上以下这句：

@charset "utf-8";

第四点，属性值与属性值不分先后顺序。可以用下面代码中的border属性的属性值来参考，10px、#f00和solid是border的三个属性值，先后顺序不影响最终得结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div { width: 100px;height: 100px;background: #f00; border: 10px #000 solid;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{width: 300px; height: 30px;background: #f00;margin-bottom: 20px;}
        h1{width: 600px;height: 50px;background: #0f0;font-weight: normal;}
        span{color: #fff;}
    </style>
</head>
<body>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div><span>阿里巴巴</span></div>
    <h1><span>阿里巴巴</span></h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
    <h1>阿里巴巴</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{width: 300px; height: 30px;background: #f00;margin-bottom: 20px;}
        h1{width: 600px;height: 50px;background: #0f0;font-weight: normal;}
        span{color: #fff;}
        #box1{width: 500px;height: 50px;background: #0ff;}
        #box2{width: 800px;height: 100px;background: #ff0;}
    </style>
</head>
<body>
    <div id="box1">阿里巴巴</div>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <div><span>阿里巴巴</span></div>
    <h1><span>阿里巴巴</span></h1>
    <h1>阿里巴巴</h1>
    <h1 id="box2">阿里巴巴</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{width: 300px; height: 30px;background: #f00;margin-bottom: 20px;}
        h1{width: 600px;height: 50px;background: #0f0;font-weight: normal;}
        span{color: #fff;}
        #box1{width: 500px;height: 50px;background: #0ff;}
        #box2{width: 800px;height: 100px;background: #ff0;}
        .aa{border: 5px #000 dotted;}
    </style>
</head>
<body>
    <div id="box1">阿里巴巴</div>
    <div class="aa">阿里巴巴</div>
    <div>阿里巴巴</div>
    <div><span>阿里巴巴</span></div>
    <h1><span>阿里巴巴</span></h1>
    <h1 class="aa">阿里巴巴</h1>
    <h1 id="box2">阿里巴巴</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    div{width: 300px;height: 30px;background: #f00;}
    h1{background: #0f0;}
    p{background: #00f;}

    </style>
</head>
<body>
    <div>阿里巴巴</div>
    <div>阿里巴巴</div>
    <h1>阿里巴巴</h1>
    <p>阿里巴巴</p>
    <ul>
        <li>阿里巴巴</li>
        <li>阿里巴巴</li>
        <li>阿里巴巴</li>
        <li>阿里巴巴</li>
        <li>阿里巴巴</li>
    </ul>
</body>
</html>

如下面代码中，

.box,h1,#fox{width: 600px;height: 50px;border: 5px #000 dashed;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box,h1,#fox{width: 600px;height: 50px;border: 5px #000 dashed;}
    .box{background: #f00;}
    h1{background: #0f0;}
    #fox{background: #00f;}

    </style>
</head>
<body>
    <div class="box">阿里巴巴</div>
    <h1>阿里巴巴</h1>
    <p id="fox">阿里巴巴</p>
</body>
</html>

效果如下：

如下面代码中，在不同的父选择器里，用了名字相同的<span>选择器，可以通过包含选择符这个特点，用“父选择器同名选择器”来分别控制区分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1,.box2{width: 600px;border: 3px #000 solid;margin-bottom: 20px; }
    .box1 span{background: #0f0;}
    .box2 span{background: #030;}
    </style>
</head>
<body>
    <div class="box1">1998年11月11日，马化腾和同学张志东在广东省深圳市正式注册成立“深圳市腾讯计算机系统有限公司”，之后许晨晔、陈一丹、曾李青相继加入。<span class="tt">当时公司的业务是拓展无线网络寻呼系统，</span>为寻呼台建立网上寻呼系统，这种针对企业或单位的软件开发工程是所有中小型网络服务公司的最佳选择。</div>
    <div class="box2">1998年11月11日，马化腾和同学张志东在广东省深圳市正式注册成立“深圳市腾讯计算机系统有限公司”，之后许晨晔、陈一丹、曾李青相继加入。<span>当时公司的业务是拓展无线网络寻呼系统，</span>为寻呼台建立网上寻呼系统，这种针对企业或单位的软件开发工程是所有中小型网络服务公司的最佳选择。</div>
</body>
</html>

效果如下，父选择器box1和box2里面分别控制了不同的样式。解决了控制两个同名选择器<span>实现不同样式。（可以理解为利用父选择器对同名选择器进行准确定位。）

具体如下的代码例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    a{color: #f00;}
    a:hover{color:#0f0; }
    </style>
</head>
<body>
    <h1><a href="#">深圳市腾讯计算机系统有限公司</a></h1>
</body>
</html>

结果如下：

鼠标初始状态、按下时超链接的状态和被访问后的状态，变成红色（#f00）

鼠标滑过超链接时的状态，变成绿色（#0f0）

比如下面的例子：
div选择器的背景颜色为 #f00(红色)。
id选择器的背景颜色为：#0f0(绿色)。
class选择器的背景颜色为：#00f(蓝色)。
根据上面的规则：
div类型选择器的权重为:0001
class选择符的权重为:0010
id选择器的权重为:0100

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{width: 100px;height: 100px;background: #f00;}
    #box{background: #0f0;}
    .fox{background: #00f;}
    </style>
</head>
<body>
    <div id="box" class="fox"></div>
</body>
</html>

权重比较后发现id选择器的权重最大，表现为id选择器的样式，背景颜色为绿色。效果如下：

id选择器的权重最大

第三章 CSS核心属性

<style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";}
    </style>

需要注意到：这里的<h1>标签的样式是2em，这里的em大小默认为16px，<h1>标签的样式为2乘以16px。但是，如果像下面的代码中，父标签body里面设置了font-size为24px，那么<h1>的2em就是2乘以24px为48px。（意味着字体变大了）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-size: 24px;}
    </style>
</head>
<body>
    <h1>days</h1>
    　The days of his youth appeared like dreams before him, and he recalled the serious moment when his father placed him at the entrance of the two roads--one leading to a peaceful,sunny place, covered with flowers,fruits and resounding with soft,sweet songs;the other leading to a deep , dark cave, which was endless, where poison flowed instead of water and where devils and poisonous snakes hissed and crawled. 年轻岁月，如梦般展现在他面前，老人想起父亲把他带到岔路口的那个庄严时刻--一条路通向安宁，快乐的世界，鲜花遍布，果实丰硕，甜美轻柔的歌声在空中回荡；另一条路则通向幽深黑暗，没有尽头的洞穴，洞内流淌着的不是水而是毒液，群魔乱舞，毒蛇嘶嘶爬动。
</body>
</html>

1、这里的#000000中，共有6位。前两位代表红色，中间代表绿色，最后两位代表蓝色（rgb——red green blue）。
2、rgba模式的a表示透明度，读作阿尔法，取值区间在0-1。0表示全透明，1表示实心状态。

1、0到F中，越靠近F，颜色越亮。

例子：color取值模式（十六进制模式、rgb模式、rgba模式）

1、十六进制模式

<style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-size: 24px;color: #f00;}
</style>

2、rgb模式

<style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-size: 24px;color: rgb(255,0,0);}
</style>

3、rgba模式

<style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-size: 24px;color: rgba(255,0,0,1);}
    </style>

以上三种颜色模式，同样实现将文字变红。（如下图）

例子：

<style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-weight: bold;font-size: 24px;color: rgba(255,0,0,1);}
</style>

text-align:left（左对齐）
text-align:right（右对齐）
text-align:center（居中）
text-align:justify（两端对齐）

这个理解为设置“行间距”。

例子：
1、标签<h1>中，<h1>容器的大小为height:200px；要使day水平和垂直方向都居中，需要使用line-height:200px。（同时text-align：center）

<style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-size: 24px;color: rgba(255,0,0,1);font-weight: bold;}
    h1{height: 200px;text-align: center;line-height: 200px;background: #0f0;}
</style>

2、标签<h1>中，<h1>容器的大小为height:200px；要使day水平居中和垂直方向偏上，需要使用line-height:150px。（小于200px）（同时text-align：center）

2、标签<h1>中，<h1>容器的大小为height:200px；要使day水平居中和垂直方向偏上，需要使用line-height:300px。（大于200px）（同时text-align：center）

如下，一个字18px，两个字的距离就是36px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{font-family: "Times New Roman","微软雅黑";font-size: 24px;color: rgba(255,0,0,1);font-weight: bold;}
    h1{text-decoration: underline; height: 200px;text-align: center;line-height: 200px;background: #0f0;}
    p{text-indent: 36px;}
    </style>
</head>
<body>
    <h1>days</h1>
    <p>　The days of his youth appeared like dreams before him, and he recalled the serious moment when his father placed him at the entrance of the two roads--one leading to a peaceful,sunny place, covered with flowers,fruits and resounding with soft,sweet songs;the other leading to a deep , dark cave, which was endless, where poison flowed instead of water and where devils and poisonous snakes hissed and crawled.</p>
    <p> 年轻岁月，如梦般展现在他面前，老人想起父亲把他带到岔路口的那个庄严时刻--一条路通向安宁，快乐的世界，鲜花遍布，果实丰硕，甜美轻柔的歌声在空中回荡；另一条路则通向幽深黑暗，没有尽头的洞穴，洞内流淌着的不是水而是毒液，群魔乱舞，毒蛇嘶嘶爬动。</p>
</body>
</html>

CSS3 文本效果+字体
CSS3 文本效果 CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性： text-shadow 属性...
H5学习之02css属性（全）
本篇内容： 1，字体属性：(font) 2，文本属性: (text) 3，背景属性：（background） 4，...
CSS3 文本效果
1、CSS3 文本效果 CSS3中包含几个新的文本特征。文本属性： text-shadowbox-shadowt...
3、文本属性
这里注意，css文件记得加上以下这句：第四点，属性值与属性值不分先后顺序。可以用下面代码中的border属性的属...
iOS NSMutableAttributedString
1: 父类 2: 方法 3: 分类 4: 属性文本
JQ第二天
JQ高级一、选择器 1、css语法匹配 2、索引匹配二、文本、属性与类 1、文本 2、属性 3、类三、事件 ...
031 JQ高级
JQ高级一、选择器 1、css语法匹配 2、索引匹配二、文本、属性与类 1、文本 2、属性 3、类三、事件 ...
jQuery基本操作
1、文本操作： 2、样式操作：addClassremoveClasstoggleClass例如： 3、属性操作：
HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、
（1）文本的描边、填充、阴影（2）文本的渐变填充（3）文本的图案填充（4）文本的属性设置及效果呈现交互绘制文本....
css扩展/CSS3
CSS3 边框 CSS3 圆角属性新的背景属性新文本属性新转换属性以下列出了所有的转换属性: 2D 转换方...

3、文本属性

这里注意，css文件记得加上以下这句：

第四点，属性值与属性值不分先后顺序。可以用下面代码中的border属性的属性值来参考，10px、#f00和solid是border的三个属性值，先后顺序不影响最终得结果。

结果如下：

如下面代码中，

效果如下：

如下面代码中，在不同的父选择器里，用了名字相同的<span>选择器，可以通过包含选择符这个特点，用“父选择器同名选择器”来分别控制区分。

效果如下，父选择器box1和box2里面分别控制了不同的样式。解决了控制两个同名选择器<span>实现不同样式。（可以理解为利用父选择器对同名选择器进行准确定位。）

第三章 CSS核心属性

例子：color取值模式（十六进制模式、rgb模式、rgba模式）

相关文章

CSS3 文本效果+字体

H5学习之02css属性（全）

CSS3 文本效果

3、文本属性

iOS NSMutableAttributedString

JQ第二天

031 JQ高级

jQuery基本操作

HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、

css扩展/CSS3

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

3、文本属性

这里注意，css文件记得加上以下这句：

第四点，属性值与属性值不分先后顺序。可以用下面代码中的border属性的属性值来参考，10px、#f00和solid是border的三个属性值，先后顺序不影响最终得结果。

结果如下：

如下面代码中，

效果如下：

如下面代码中，在不同的父选择器里，用了名字相同的<span>选择器，可以通过包含选择符这个特点，用“父选择器 同名选择器”来分别控制区分。

效果如下，父选择器box1和box2里面分别控制了不同的样式。解决了控制两个同名选择器<span>实现不同样式。（可以理解为利用父选择器对同名选择器进行准确定位。）

第三章 CSS核心属性

例子：color取值模式（十六进制模式、rgb模式、rgba模式）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

如下面代码中，在不同的父选择器里，用了名字相同的<span>选择器，可以通过包含选择符这个特点，用“父选择器同名选择器”来分别控制区分。