`
zlpx
  • 浏览: 156456 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用CSS3设置text元素的大小写

    博客分类：
  • css
css3 
阅读更多

下面的例子展示了你如何设置capitalization，通过text-transform样式。

text-transform样式接收下面的值。

capitalize-首字母大写

uppercase-所有字母大写

lowercase-所有字母小写

none-无

 

<!DOCTYPE html>
<html>
<head>
    <title>Setting the text capitalization on a text element in CSS</title>
</head>
<body>
 
    <div style="text-transform:none;">1) The quick brown fox jumps over the lazy dog.</div>
    <div style="text-transform:capitalize;">2) The quick brown fox jumps over the lazy dog.</div>
    <div style="text-transform:lowercase;">3) The quick brown fox jumps over the lazy dog.</div>
    <div style="text-transform:uppercase;">4) The quick brown fox jumps over the lazy dog.</div>
 
</body>
</html>

 源码下载 ：

 setting-the-text-capitalization-on-a-text-element-in-css.zip

 

0
顶
0
踩
分享到：
| 使用CSS3建立不可选的的文字
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用css3写的小黄人

    本项目“用css3写的小黄人”聚焦于利用CSS3的特性来创建一个生动有趣的小黄人动画，这无疑是一个学习和实践CSS3技术的好案例。小黄人是电影《神偷奶爸》中的经典角色，以其独特的形象和幽默的性格深受喜爱。通过这个...

    div+css有实例,易学易懂

    - **文本的转换**：使用`text-transform`属性更改文本大小写。 #### 水平和垂直居中问题 - **已知容器和内容大小的水平和垂直居中问题**：通过`margin`和`position`属性实现。 - **未知容器的大小而已知内容大小的...

    CSS3 SVG 3D立体阴影文字动画特效

    这可以通过CSS3的`text-shadow`属性实现，它可以设置文字的多个阴影，通过改变阴影的颜色、偏移量和模糊度，可以创建出立体感。为了实现线条化的阴影，可以结合SVG的`stroke`和`stroke-width`属性，将阴影转化为线条...

    5组可爱CSS3按钮

    5. **文本效果**：除了按钮的背景和边框，CSS3还可以对按钮内的文本进行各种美化，如使用`text-shadow`添加文字阴影，`text-transform`控制文字大小写，或者`text-decoration`添加下划线、删除线等。 6. **动画效果...

    css 3布局与技术 外国大牛写的

    - **过渡和动画**：CSS3中的过渡(`transition`)和动画(`animation`)特性允许元素平滑地改变样式，无需JavaScript即可实现动态效果。 - **多列布局**：通过`column-count`等属性可以轻松实现报纸式的多栏布局。 - **...

    CSS 3 Intellisense Schema 完整安裝包

    4. **文字特效**：CSS3支持文字阴影（`text-shadow`）、文字渲染（`text-rendering`）和文字大小写转换（`text-transform`），提供了更多文字美化选项。 5. **定位与布局**：新增的弹性盒模型（Flexbox）和网格布局...

    典型博客CSS3网页模板

    还有`text-decoration`的改进，如`line-through`和`underline`，以及`text-transform`用于控制文本的大小写形式。 5. **布局技术**：CSS3的Flexbox（弹性盒模型）和Grid（网格布局）是现代网页布局的重要工具。...

    css-text 教程

    **文本转换**：`text-transform`属性用于更改文本的大小写。常用的值包括`uppercase`（大写）、`lowercase`（小写）和`capitalize`（首字母大写）。例如： ```css p { text-transform: uppercase; } ``` 这会让段落...

    html图片自适应手机屏幕大小的css写法

    这段代码指定了最小宽度（min-width:320px）来确保小屏幕设备的兼容性，并设置了字体属性，包括字体族（font-family）、字体大小调整（-webkit-text-size-adjust），以及字体颜色。 ```css body { min-width: 320px...

    纯css3实.rar_纯css3实

    3. **文本效果**：`text-shadow`可以添加文字阴影，`text-decoration`控制下划线、删除线等，而`text-transform`则可以控制文本大小写。 4. **过渡和动画**：`transition`属性用于平滑地改变一个或多个CSS属性，而`...

    css3课程.7z

    CSS3对文本处理有了显著提升，例如`text-shadow`属性可以添加阴影效果，`text-decoration`允许创建下划线、上划线或删除线，`text-transform`用于控制文本大小写，还有`word-wrap`和`text-overflow`用于处理长单词和...

    CSS测验 CSS测验 CSS测验

    13. 文本以大写字母开头，使用`text-transform`属性，设置为`capitalize`，正确答案是`text-transform: capitalize`。 14. 改变元素的字体，使用`font-family`属性，如`font-family: Arial, sans-serif`。 15. 文本...

    CSS3小图标分享按钮.zip

    在CSS3小图标分享按钮的设计中，当鼠标滑过按钮时，文字会从左右飞入飞出，这正是通过设置过渡时间、属性和速度曲线来实现的。通过控制这些参数，可以创造出流畅且自然的动画效果，使得按钮在用户交互时更具吸引力。...

    DivCSS网站布局视频教程第3课 CSS设置文字效果

    10. **转换**：`text-transform`用于控制字母的大小写，如`uppercase`（全大写）、`lowercase`（全小写）和`capitalize`（首字母大写）。 11. **间距**：`letter-spacing`调整字符间距，`word-spacing`调整单词间距...

    CSS3_中文手册【圆角-多背景-用户自定义字体-文字阴影等等】

    CSS3的`background`属性扩展了背景图层的概念，现在可以为一个元素设置多个背景图像，每个图像可以有不同的位置、大小和重复模式。使用逗号分隔的列表来实现这一点： ```css background: url(image1.jpg) top left ...

    css3创意数字科技风格404动画页面模板

    10. **性能优化**：CSS3允许将部分计算量较大的样式写在JavaScript中，然后用CSS3的calc()函数动态计算，提高页面渲染速度。 在实际应用中，"Zp_demo.demohuo.top_18"这个文件可能是模板的示例或者源代码，包含了...

    使用CSS3制作漂亮的圆角按钮.zip

    接下来，我们用CSS3来设计这个按钮。圆角按钮的关键在于`border-radius`属性，它可以设置元素边框的圆角半径，从而实现圆形或圆角效果。例如，想要创建一个具有8像素圆角的按钮，可以这样写： ```css .rounded-...

    CSS样式命令 css命令大纲

    7. `text-transform`: 控制文本的大小写，可以是`uppercase`（全大写）、`lowercase`（全小写）、`capitalize`（首字母大写）或`none`（默认）。 8. `color`: 设置文本颜色，可以使用颜色名称、十六进制、RGB、RGBA...

Magicbox
Global site tag (gtag.js) - Google Analytics