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

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的博客,原文链接:【前端开发系列】—— 文字阴影与样式,如需转载请自行联系原博主。

时间: 2024-10-25 13:39:49

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

【前端开发系列】—— 通过鼠标浮动改变样式

这个简单的demo,可以应用到很多地方.比如导航鼠标移动到上方时,可以改变样式,或者触发下拉框,等等.很有意思 1 <html> 2 <head> 3 <style type="text/css"> 4 .red { 5 color:red; 6 font-size: 32; 7 font-style: italic; 8 } 9 .blue { 10 color: blue; 11 font-size: 25; 12 } 13 .black { 1

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型="类型名字"]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配

【前端开发系列】—— 利用选择器添加内容

上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容. 也可以通过变量来实现自定义的标题 1 h1:before{ 2 content:'第'counter(mycounter)'章'; 3 color:red; 4 font-size:30px; 5 } 6 h1{ 7 counter-increment:mycounter; 8 } 代码样例 <html> <head> <style type="text/css">

【前端开发系列】—— 别说你不会Ajax

之前一直都是用封装好的Ajax,所以一直很好奇它是如何使用和实现的.这里正好就进行一下学习,下面是Ajax的一个时间图. 设置触发条件 这里模拟一个使用场景,就是在用户登陆时,异步的对用户名以及密码进行验证.所以使用onBlur()触发,onBlur函数在输入框焦点遗失时,就会触发. 1 <form name="loginForm"> 2 <table> 3 <tr> 4 <td>用戶名:<input type="text

前端开发人员必须熟悉的10个CSS3属性

导读:随着Css3和html5的风靡,越来越多的前端人员开始学习Css3,今天的文章就是来说说前端应该掌握10个Css3属性. 对于Css3的新属性,你又了解多少呢?虽然大多数的css3属性在很多流行的浏览器中不支持,但是我们鼓励在前端开发中要学会并且运行这些css3属性,因为这是未来的趋势. 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解,你能肯定的说IE显示的90度的角就不圆滑嘛?这取决于你的决定.但是要永远记住,网站设计不必看到所有浏览器的不同. 1. Border-radius

前端开发工程师和美工掌握的知识的区别

文章描述:前端开发所需掌握的知识. 摘要:很多公司甚至是多数以互联网网站为主要业务的公司都会把"美工"的概念搞混淆,通常这些公司都会把网页设计+网页制作的人员统称为"美工".而一家成熟的互联网公司则会把网站方面的人才规划的比较详细,如UED团队(用户体验设计,英文User Experience Design的缩写),其中详细划分成了"交互设计"."视觉设计"."前端开发"."用户研究".

用户体验至上:前端开发中的图片优化简述

文/来自竹林 现在的互联网,是一个用户体验至上的时代,大多数公司都会把如何提高产品的易用性放在首要位置.如何提高产品的质量则体现在项目开发的很多阶段,例如产品设计.UI设计和前端开发等.而图片优化在提高产品质量上也起到了举足轻重的作用,这也就是为什么越来越多的产品团队更加关注这个问题. 本文关于图片优化的内容主要由两部分构成: 1. 整理总结网上关于图片优化的一些方式方法. 2. 自己在项目开发过程中实际遇到的问题以及用到的图片优化方案. 如有不足之处,欢迎大家指出并补充. 1. 简约而不简单

合格的前端开发:为高校新学生讲解网页设计

互联网处在快速变革期.网页前端开发深受近年来不断改变的编码技巧和手段的影响.在2003年,一个合格的网页前端开发者需要了解HTML和CSS,他们也可能会一点Javascript(有可能是从别的地方复制粘贴来的).他们所编写的网站会在桌面电脑上供人浏览. 但是2013年情况不一样了!现在,一个合格的前端开发者必须精通HTML.CSS.Javascript.jQuery,CSS预处理器,以及诸如响应式设计之类的新技术,他们还要考虑首先为移动端设计页面,各种设备查看网站时的情况. 既然网页前端开发这一

Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航

原文:Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航 在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类App来说,Pivot更适合多个频道的展示,因为内容基本都是一样的. 到了Win10,微软模仿其他平台也推出了汉堡菜单,但并没有提供现成的控件,而是需要开发者通过一个名为SplitView的控件来实现.我个人并不觉得左上