【前端开发系列】—— 文字阴影与样式

简介:

id与class的区别

id是这个界面唯一的元素,标识某个特定的容器,比如div等等。而class是一种样式,可以应用与多个div。

另外他们在配置CSS也是不同的:

id:

div#test1{
...
}

class:

div.test2{

}

text-shadow

为字体属性添加样式阴影

word-break

  一段文字自动换行

  normal:默认样式

  keep-all:不分割单词

  break-all:可以分割单词

@font-face字体属性

font-family:字体

font-size:字体大小

  

复制代码
<style type="text/css">
        div#div1{
            font-family:Comic Sans MS;
            font-size:16px;
            color:blue;
            word-break:keep-all;
            text-shadow:5px 5px 5px gray;
        }
        div#div2{
            font-family:Tahoma;
            font-size:16px;
            color:red;
            word-break:normal;
        }
        div.div3{
            font-family:Arial;
            font-size:16px;
            color:purple;
            word-break:break-all;
        }
        div.div4{
            font-family:Times New Roman;
            font-size:16px;
            color:green;
        }
    </style>
复制代码

测试样例

本文转自博客园xingoo的博客,原文链接:【前端开发系列】—— 文字阴影与样式,如需转载请自行联系原博主。
相关文章
|
4月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
5月前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
65 1
|
7月前
|
前端开发 数据可视化 网络协议
GIS前端-图形样式编辑
GIS前端-图形样式编辑
35 0
|
7月前
|
前端开发 JavaScript
前端基础 - JavaScript修改标签样式的属性值
前端基础 - JavaScript修改标签样式的属性值
36 0
|
11天前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
10天前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
10天前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
【4月更文挑战第30天】Flutter是一款由谷歌开发的开源移动应用框架,因其高性能和跨平台能力受到开发者青睐。本文聚焦Flutter中的主题与样式主题化,阐述如何通过`ThemeData`定义和设置全局主题,以及如何利用`TextStyle`、`AppBarTheme`和`ButtonTheme`定制文本、AppBar和按钮样式。了解并运用这些知识,能提升应用的统一风格和用户体验,助力Flutter开发。
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
|
11天前
|
JSON JavaScript 前端开发
前端框架vue的样式操作,以及vue提供的属性功能应用实战
前端框架vue的样式操作,以及vue提供的属性功能应用实战
|
11天前
|
XML 前端开发 JavaScript
前端CSS样式零基础教学总结,UI、前端开发都适用
前端CSS样式零基础教学总结,UI、前端开发都适用
|
11天前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?