[CSS3]学习笔记-文字与字体相关样式

1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ /*text-shadow: 5px 5px 5px red;*/ /*可指定多个阴影*/ text-shadow: 5px 5px 5px red, 15px 15px 5px red; color:black; fon…

CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色 2. 使用服务器端字体文本换行: word-break:norma | keep-all | bread-all norma(使用浏览器默认的换行规则), keep-all(只能在半角空格或连字符处换行), bread-all(允许在单词内换行) 优先使用客户端字体 1 @font…

[CSS3] 学习笔记-背景与边框相关样式

1.与背景相关的新增属性包括:backgroud-clip,backgroud-origin,backgroud-size <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ background-color: black; border:dashed…

web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中删除了,在 CSS3 的 text 模块中又恢复了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<…

CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

CSS3媒体支持在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽度来进行,指定方法如下所示 <meta name="viewport" content="width=600px" /> CSS可以通过设置media来决定该样式所适用的设备,如screen.tv.print.speech.handheld.all等 <…

CSS3 文字与字体相关样式

给文字添加阴影文字换行客户端文字 font-size-adjust属性给文字添加阴影-text-shadow属性 text-shadow:length length length color 前三个length分别指阴影离开文字横向距离.纵向距离(这两个参数允许值为负)和模糊半径(值越大模糊范围越大,默认为0,不模糊),color指定阴影的颜色 div { text-shadow:5px 5px 10px gray; } 让文本换行很多浏览器本身自带换行功能,在css3中可以使用word…

CSS3 学习笔记(边框背景字体图片旋转等)

边框盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下盒子阴影 box-shadow:box-shadow:x轴偏移量 y轴偏移量阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径阴影颜色投影方式注意:inset 是指阴影在盒子内部,默认在外部,inset写到第一个或者最后一个参数位置,其他位置是无效的值有3个时,表示距离左侧.距离上侧.影子颜色值有4个时,表示距离左侧.距离上侧.…

html5--6-16 CSS3中的文字与字体

html5--6-16 CSS3中的文字与字体中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体.网络字体https://www.youziku.com/ 学习要点掌握文字与字体的设置颜色值查询方法: 百度查询,很多网站有提供下载相关手册等需要时查表运用绘图工具中的拾色器 CSS中常用的字体属性设置 font-size 规定文本的字体尺寸通常使用px,百分比,em来设置字体的大小 e…

html5--6-23 CSS3中的文字与字体

html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉. ellipsis:当对象内文本溢出时显示省略标记(...). 温馨提示:该属性需要和over-flow:hidden属性.white-space:nowrap配合使用,放到后边章节再讲解学习要点掌握文字与字体的设置颜色值查询方法: 百度查询,很多网站有提供下载相关手册等…

html5--6-19 CSS3中的文字与字体

html5--6-19 CSS3中的文字与字体学习要点掌握文字与字体的设置颜色值查询方法: 百度查询,很多网站有提供下载相关手册等需要时查表运用绘图工具中的拾色器 CSS中常用的字体属性设置 font-size 规定文本的字体尺寸通常使用px,百分比,em来设置字体的大小 em是css中的相对单位,是相对于当前对象内的字体尺寸,若没有制定文字大小尺寸,则为浏览器默认字体大小 xx-small.x-small.small.medium.large.x-large.xx-large把字体…

amazeui学习笔记--css（布局相关3）--辅助类Utility

amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条. <div class="am-scrollable-horizontal"> 3.垂直滚动: .am-scrollable-vertical 4.浮动相关: .am-cf - 清除浮动 .am-fl - 左浮动 .am-fr …

CSS3学习笔记(3)-CSS3边框

p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; padding: 5px; margin: 1em 0 1em 0; } .alexrootdiv>div>p:first-of-type,.alextitlep{ font-size: 18px; font-weight: bold; color: red; } .alexrootdiv spa…

amazeui学习笔记--css（布局相关1）--网格Grid

amazeui学习笔记--css(布局相关1)--网格Grid 一.总结基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class="am-g am-g-collapse"> 2.网格布局中的行和列:.am-g .am-u-xx-n 3.3种尺寸:sm md lg 4.从普通css到amaze: .am-g { margin: 0 auto; width: 100%; } .am-g-fixed { max-wi…

amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在ul中,里面有li) 记住这个avg(表示等分网格) 这里数字的意思不一样,这里的数字表示几等份 2.基本使用:被ul和li统治 <ul class="am-avg-sm-4 am-thumbnails"> <li><img class="am-thu…

十天精通CSS3学习笔记 part1

http://www.imooc.com/learn/33 第1章初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了. 在编写CSS3样式时,不同的浏览器可能需要不同的前缀.它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都…

css文字与文本相关样式

css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style 设置字体的风格 font-variant 以小型大写字体或正常字体显示文本 font-weight 设置字体的粗细 css3文字相关样式 1.给文字添加阴影 <!--text-shadow:length length length color-…

CSS3 学习笔记（上）

一.CSS简介 CSS(Cascading Style Sheets)层叠样式表.其中,样式定义为如何显示HTML元素,它通常储存在样式表,将样式添加到HTML中,能够解决内容与表现分离的问题.由于网页是多层结构,通过CSS可分别为网页的每一层设置样式,而多个样式定义可层叠为一个. 二.样式表方案一:内联样式(行内样式)(不推荐!) 在标签内部通过style属性来设置元素的样式,而样式只能对一个标签生效,维护不方便,开发绝对不要使用内联样式 <p style="color:red; fo…

CSS3学习笔记之linear-gradient

我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HTML在我看来也是很值得研究的,只有时刻保持一个谦逊的姿态,才能够看得更远,走得更稳. 在这里要感谢一下网站: w3cplus,W3School ,W3C 等等一些网上的教程啊博客什么的(还有好多就不一一列举了),我算是从这些地方开始接触传说中的CSS3和HTML5,而自己的学习笔记自然也会从中借鉴. 建议:大…

[CSS3] 学习笔记-CSS动画特效

在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉伸或拉长:可以通过2D.3D元素来转换: 2D转换方法: translate().rotate().scale().skew().matrix() 3D转换方法: rotateX() rotateY() <!doctype html> <html>…

[CSS3] 学习笔记-CSS3盒子样式

1.盒子的类型在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inline类型. <head> <style> /*div默认是block类型,span默认是inline类型,以下通过display,将它们的类型反过来了*/ div{ background-color: red; display:inline; } span{ background-co…

CSS3学习笔记（3）—左右飞入的文字

前几天看到一个企业招聘的动画觉得很炫,里面有个企业介绍的文字是用飞入的效果做出来的,今天尝试了写了一下,感觉还不错~\(≧▽≦)/~啦啦啦下面来看我做的动态效果: 其实上面的效果很简单的,我的截图软件有问题,所以不是很清晰,但是大概的效果出现了~~~屏幕颜色从红变白是因为我把鼠标从页面上移到截图软件上关闭截图,不要被这个干扰~~~~ 一.页面的主体布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8…

CSS3学习笔记（1）—淡入的文字

今天有空把前几天学的东西发一下,都是一些简单的东西,但是千里之行始于足下,我虽然走的慢,但是未停下前进的脚步, 下来看下我做的“淡入的文字”最终动态效果: 上面这个动画效果制作的过程是: (1)先自定义一个透明度从0到1变化的动画,然后在animation中调用这个动画效果 (2)注意不同行文字出现的时间先后,这个通过animation中延时属性可以实现 (3)规定文字最终动态为动画的最终显示状态,否则文字显示完会自动消失,这个用animation-fill-mode可以实现一.先来看看HTM…

CSS学习笔记1：字体样式属性

CSS初识成叠样式表,主要用于设置html页面的外观产生原因:为了解决混乱的结构和样式,使结构和样式相分离. CSS注释 /*这是CSS注释*/ CSS样式规则 1.选择器用于指定css样式作用的html对象,{}里面是对该对象设置的具体样式. 2.属性和属性值以“键值对”的形式出现. 3.属性是对指定对象设置的样式属性,例如:字体大小.文字样式. 4.属性域属性值之间用英文冒号分开. 5.属性域属性之前用英文分号分隔. <style type="text/css">…

[CSS3]学习笔记-CSS基本样式讲解

1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="styl…

CSS3学习笔记-1：CSS样式继承

自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个…

CSS3学习笔记1-选择器和新增属性

前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够对想学这方面知识的小白有所帮助.因为是各种渠道找的资料,学习的不算系统,所以知识点涵盖的不甚全面,望各位看官不吝指正批评. CSS3简介 CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. css3现…

html5和css3学习笔记

HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记; 比如input和br, /可以不写; 新增的标签 header,nav,footer,section,video,audio··· 功能性标签:video,audio,canvas··· 结构标签:header,nav,footer,section··· 页眉;不兼容IE8-; 页脚;不兼容IE…