建站+备查:本博客在主题Hoot Ubix中使用的额外的CSS3代码
建站:WordPress开启SSL后CSS样式错乱、后台登陆错乱等问题的解决办法
CSS3 @font-face详细用法[转载]
转载自:http://www.phpvar.com/archives/2663.html
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了!肯定会有人问,这样的东西IE能支持吗?我告诉大家@font-face这个功能其实早在IE4就支持了,你肯定会感到惊讶。如果你看到一些英文网站或blog看到一些很漂亮的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来和大家分享。
首先我们一起来看看@font-face的语法规则:
1 2 3 4 5 6 |
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; } |
取值说明
- YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体(下载回来的叫什么字体,这里就填什么字体名),他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”
- source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
- format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,svg等;
- weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
兼容浏览器
说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:
CSS 的语法结构[转载]
转载自:http://echorightcss.blog.51cto.com/321209/63689
将CSS应用到XHTML之中,首先要做的就是选择合适的选择符,选择符是CSS控制XHTML文档中对象的一种方式,简单地说,它用于告诉浏览器这段样式将应用到哪个对象。
1、CSS属性与选择符
CSS语法结构仅仅由三部分组成:选择符(selector)、属性(property)和值(value )。
使用方法:selector ( Property : value ; )
- 选择符(selector)指着组样式编码所要针对的对象,可以是一个XHTML标签,如body、h1;也可以是定义了特定 id 或 class 的标签,如 #main 选择符表示选择,即一个 被指定了main为id的对象。浏览器将对CSS选择符进行严格的解析,每一组样式均会被浏览器应用到对应的对象上。
- 属性(Property)是CSS样式控制的核心,对每一个XHTML中的标签,CSS都提供了丰富的样式属性,如颜色、大小、定位、浮动方式等。
- 值(value)是指属性的值,形式有两种,一种是指定范围的值,如float属性,只可能应用left、right、none三种值;另一种为数值,如width能够使用0-9999px或其他数学单位来制定。
在实际应用中,我们往往使用以下类似的应用形式:body { background-color : blue ; } 表示选择符为body,即选择了页面中的这个标签,属性为background-color这个属性用于控制对象的背景颜色,而值为blue。页面中的body对象的背景颜色通过使用这组CSS编码,被定义了蓝色。
除了单个属性的定义,同样可以为一个标签定义一个至更多个属性定义,每个属性之间使用逗号分开。
[cc lan=”css”]
p{
text-align : center ;
color : black ;
font-family : arial :
}
[/cc]
p标签被我们指定了3样式属性,包含对齐方式文字颜色及字体。同样一个id,或一个class,都能通过相同的形式编写样式。
[cc lan=”css”]
#content {
text-align : center ;
color : black ;
font-family : arial ;
}
.title{
line-height : 25px ;
color : blue :
font-family : arial ;
}
[/cc]
WordPress技术:主题中自动调整用 embed、iframe、object 方法插入的内容的大小
WordPress技术:文章目录插件——WordPress Content Index
使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题
转载自:http://blog.wpjam.com/article/child-themes/
在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以修改一些简单的样式。修改的时候,却发现主题文件这么多,里面掺杂各种 PHP、HTML 代码,让人不知道在哪里修改。
太好了,那么我们开始学习子主题吧,子主题就是来解决这个问题的。它可以基于某个主题,继承它的功能和样式,然后让你自己进行简单的代码编写就可以衍生出一个新的版本。你还可以对子主题增加样式、功能等等,不仅仅是修改父主题样式那么简单。
做一个子主题非常简单,只需要用 FTP 什么的新建一个目录,然后增加几个文件就可以。你只需要了解很简单的 HTML 和 CSS 知识就可以修改父主题的样式等,当然当父主题升级之后,子主题样式、功能不会被覆盖失效。所以从这个角度来说,如果你想修改一个主题,你应该用子主题这个功能,而不是直接修改原主题文件。
下面就来具体实践看一下,我们就以 Twenty Twelve 这个主题为例吧,其他的主题都是一样的。