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

简介:

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月前
|
前端开发 JavaScript API
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
前端 excelex 包可将数据保存为 xls、xlsx、csv、txt 文件(支持单元格样式、合并单元格等)
59 1
|
6月前
|
前端开发 数据可视化 网络协议
GIS前端-图形样式编辑
GIS前端-图形样式编辑
34 0
|
3月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
61 0
|
8月前
|
前端开发
前端项目实战捌拾肆react-admin+material ui-踩坑-material ui Typography铸排文字
前端项目实战捌拾肆react-admin+material ui-踩坑-material ui Typography铸排文字
26 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十八天-推荐歌单的结构和样式实现1
前端学习笔记202306学习笔记第四十八天-推荐歌单的结构和样式实现1
28 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
前端学习笔记202305学习笔记第二十二天-vue3.0-css预处理器和样式重置
39 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十三天-区域文字和立体设置
前端学习笔记202305学习笔记第二十三天-区域文字和立体设置
31 0
|
8月前
|
前端开发 Android开发
前端项目实战壹-安卓4.4/6.0无法安装非原生项目无法渲染样式
前端项目实战壹-安卓4.4/6.0无法安装非原生项目无法渲染样式
47 0
|
5月前
|
前端开发 程序员
前端反卷计划-组件库-03-组件样式
前端反卷计划-组件库-03-组件样式
|
5月前
|
前端开发
【前端切图】CSS文字渐变和背景渐变
【前端切图】CSS文字渐变和背景渐变
34 0