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

用CSS3设置text元素的大小写

    博客分类:
  • css
阅读更多

下面的例子展示了你如何设置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技术的好案例。小黄人是电影《神偷奶爸》中的经典角色,以其独特的形象和幽默的性格深受喜爱。通过这个...

    CSS 3 Intellisense Schema 完整安裝包

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

    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`等属性可以轻松实现报纸式的多栏布局。 - **...

    典型博客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...

Global site tag (gtag.js) - Google Analytics