一、wordpress怎么更改css样式
二、确定修改重点这里讲述的是怎么修改CSS文件,其实仔细观察Wordpress主题模板代码,不管是index.php首页还是page.php页面,或者single.php文章内页,你会发现,其实大部分主题都只是通过CSS来控制页面布局,页面本身的代码基本相同,特别是一些国外简洁明了的优秀主题更是如此。
当我们要修改某部分样式及结构时,都会直接打开Wordpress主题模板文件或在后台编辑主题,密密麻麻的代码,就是主题作者自己看了也会头晕眼花,所以会经常在关键部位加上一些注释,php中注释一般为:css中为:/** XXX **/一般调整比较常见的是页面宽度、文本主体宽度、字体大小、行间距、背景颜色等。通过修改style.css文件都能够达到预期效果(部分主题会指定CSS文件,只需对应找到控制的CSS文件),部分国外主题在functions.php中加入加入大量模板函数,这不是本文讲述的重点。
三、修改Wordpress主题CSS文件下面以Wordpress默认主题Twentyeleven修改为例用Mozilla Firefox浏览器打开网站,首先在要修改样式的地方右键单击→查看元素。此时浏览器自动打开DOM样式探查器左侧是页面html源代码,右侧这部分就是控制标题文字的CSS属性,当然可以自己琢磨着对照左侧代码进行选择我们简单地对CSS参数进行调整,可以实时预览效果,不管是字体大小,还是背景颜色都如此。
例如把color: rgb(34, 34, 34);调整为color: rgb(345, 34, 34);你会发现标题颜色发生改变,再加入字体参数font-size: 20px;font-family: 微软雅黑; 此时发现页面中,文章标题全部都变为微软雅黑字体,字号为20px,红色,调整到满意的效果后,就应该把文件修改进CSS文件里。注意:字体如果是要使用微软雅黑等中文字体时,需要参照CSS中文字体对照表使用Unicode编码保存方法有二种一种是对照代码右侧位置style.css:745 用Dreamweaver软件或是记事本打开style.css文件找到第745行代码进行修改。
另一种是点击style.css:745自动跳转到样式编辑器,然后选择保存CSS文件。
二、wordpress建立博客,自定义css样式
CSS 背景属性(Background)background 在一个声明中设置所有的背景属性。
1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color 设置元素的背景颜色。
1 background-image 设置元素的背景图像。 1 background-position 设置背景图像的开始位置。
1 background-repeat 设置是否及如何重复背景图像。 1 CSS 边框属性(Border 和 Outline)border 在一个声明中设置所有的边框属性。
1 border-bottom 在一个声明中设置所有的下边框属性。 1 border-bottom-color 设置下边框的颜色。
2 border-bottom-style 设置下边框的样式。 2 border-bottom-width 设置下边框的宽度。
1 border-color 设置四条边框的颜色。 1 border-left 在一个声明中设置所有的左边框属性。
1 border-left-color 设置左边框的颜色。 2 border-left-style 设置左边框的样式。
2 border-left-width 设置左边框的宽度。 1 border-right 在一个声明中设置所有的右边框属性。
1 border-right-color 设置右边框的颜色。 2 border-right-style 设置右边框的样式。
2 border-right-width 设置右边框的宽度。 1 border-style 设置四条边框的样式。
1 border-top 在一个声明中设置所有的上边框属性。 1 border-top-color 设置上边框的颜色。
2 border-top-style 设置上边框的样式。 2 border-top-width 设置上边框的宽度。
1 border-width 设置四条边框的宽度。 1 outline 在一个声明中设置所有的轮廓属性。
2 outline-color 设置轮廓的颜色。 2 outline-style 设置轮廓的样式。
2 outline-width 设置轮廓的宽度。 2 CSS 文本属性(Text)color 设置文本的颜色。
1 direction 规定文本的方向 / 书写方向。 2 letter-spacing 设置字符间距。
1 line-height 设置行高。 1 text-align 规定文本的水平对齐方式。
1 text-decoration 规定添加到文本的装饰效果。 1 text-indent 规定文本块首行的缩进。
1 text-shadow 规定添加到文本的阴影效果。 2 text-transform 控制文本的大小写。
1 unicode-bidi 设置文本方向。 2 white-space 规定如何处理元素中的空白。
1 word-spacing 设置单词间距。 1 CSS 字体属性(Font)font 在一个声明中设置所有字体属性。
1 font-family 规定文本的字体系列。 1 font-size 规定文本的字体尺寸。
1 font-size-adjust 为元素规定 aspect 值。 2 font-stretch 收缩或拉伸当前的字体系列。
2 font-style 规定文本的字体样式。 1 font-variant 规定是否以小型大写字母的字体显示文本。
1 font-weight 规定字体的粗细。 1 CSS 外边距属性(Margin)margin 在一个声明中设置所有外边距属性。
1 margin-bottom 设置元素的下外边距。 1 margin-left 设置元素的左外边距。
1 margin-right 设置元素的右外边距。 1 margin-top 设置元素的上外边距。
1 CSS 内边距属性(Padding)padding 在一个声明中设置所有内边距属性。 1 padding-bottom 设置元素的下内边距。
1 padding-left 设置元素的左内边距。 1 padding-right 设置元素的右内边距。
1 padding-top 设置元素的上内边距。 1 CSS 列表属性(List)list-style 在一个声明中设置所有的列表属性。
1 list-style-image 将图象设置为列表项标记。 1 list-style-position 设置列表项标记的放置位置。
1 list-style-type 设置列表项标记的类型。 1 marker-offset 2 内容生成(Generated Content)content 与 :before 以及 :after 伪元素配合使用,来插入生成内容。
2 counter-increment 递增或递减一个或多个计数器。 2 counter-reset 创建或重置一个或多个计数器。
2 quotes 设置嵌套引用的引号类型。 2 CSS 尺寸属性(Dimension)height 设置元素高度。
1 max-height 设置元素的最大高度。 2 max-width 设置元素的最大宽度。
2 min-height 设置元素的最小高度。 2 min-width 设置元素的最小宽度。
2 width 设置元素的宽度。 1 CSS 定位属性(Positioning)bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。
2 clear 规定元素的哪一侧不允许其他浮动元素。 1 clip 剪裁绝对定位元素。
2 cursor 规定要显示的光标的类型(形状)。 2 display 规定元素应该生成的框的类型。
1 float 规定框是否应该浮动。 1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。
2 overflow 规定当内容溢出元素框时发生的事情。 2 position 规定元素的定位类型。
2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。
2 vertical-align 设置元素的垂直对齐方式。 1 visibility 规定元素是否可见。
2 z-index 设置元素的堆叠顺序。 2 CSS 打印属性(Print)orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。
2 page-break-after 设置元素后的分页行为。 2 page-break-before 设置元素前的分页行为。
2 page-break-inside 设置元素内部的分页行为。 2 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。
2 CSS 表格属性(Table)border-collapse 规定是否合并表格边框。 2 border-spacing 规定相邻单元格边框。
三、wordpress怎么更改css样式
二、确定修改重点
这里讲述的是怎么修改CSS文件,其实仔细观察Wordpress主题模板代码,不管是index.php首页还是page.php页面,或者single.php文章内页,你会发现,其实大部分主题都只是通过CSS来控制页面布局,页面本身的代码基本相同,特别是一些国外简洁明了的优秀主题更是如此。
当我们要修改某部分样式及结构时,都会直接打开Wordpress主题模板文件或在后台编辑主题,密密麻麻的代码,就是主题作者自己看了也会头晕眼花,所以会经常在关键部位加上一些注释,
php中注释一般为:<;!– XXX –>
css中为:/** XXX **/
一般调整比较常见的是页面宽度、文本主体宽度、字体大小、行间距、背景颜色等。通过修改style.css文件都能够达到预期效果(部分主题会指定CSS文件,只需对应找到控制的CSS文件),部分国外主题在functions.php中加入加入大量模板函数,这不是本文讲述的重点。
三、修改Wordpress主题CSS文件
下面以Wordpress默认主题Twentyeleven修改为例
用Mozilla Firefox浏览器打开网站,首先在要修改样式的地方右键单击→查看元素。
此时浏览器自动打开DOM样式探查器
左侧是页面html源代码,右侧这部分就是控制标题文字的CSS属性,当然可以自己琢磨着对照左侧代码进行选择
我们简单地对CSS参数进行调整,可以实时预览效果,不管是字体大小,还是背景颜色都如此。
例如把color: rgb(34, 34, 34);调整为color: rgb(345, 34, 34);你会发现标题颜色发生改变,再加入字体参数font-size: 20px;
font-family: 微软雅黑; 此时发现页面中,文章标题全部都变为微软雅黑字体,字号为20px,红色,调整到满意的效果后,就应该把文件修改进CSS文件里。注意:字体如果是要使用微软雅黑等中文字体时,需要参照CSS中文字体对照表使用Unicode编码
保存方法有二种
一种是对照代码右侧位置style.css:745 用Dreamweaver软件或是记事本打开style.css文件找到第745行代码进行修改。另一种是点击style.css:745自动跳转到样式编辑器,然后选择保存CSS文件。
四、如何自定义wordpress菜单css样式
1.首先找到wordpress菜单中的class类名
2.在wordpress模版目录下一般在wp-content\themes\主题名,找到style.css
3.在style.css中为类名添加样式,如下:
.menu-item:{color:red;}
这样就可以设计菜单css样式了
五、如何在线编辑Wordpress主题css样式表
很多wordpress主题都提供了可自定义编辑、修改功能,如:更改背景图片,背景颜色,顶部图片,还有一些主题上的小工具可以选择是否让它显示出来等等,但是并不是所有的wp主题都提供这样的功能,所以如果你不熟悉wordpress主题修改,那么建议你选择wp主题的时候,尽可能选择能支持自定义编辑的主题。
下面,无忧主机(www.51php.com)小编将演示修改wordpress主题的style.css样式表的过程。首先如下图,登录后台点击外观-编辑-就可以看到主题的css样式表了。
主题所有的样式都是写在style.css里面的,今天就以博客文章的字体大小为例做演示。大家都知道,wp的文章是不能修改字体大小的,但是我们可以通过修改主题样式文件来达到修改字体大小的目的。
我们只需要在style.css中,找到font-size:100% 把它改为Font-size:20px后,点更新,然后返回到博客首页,就可以看到修改后的效果。这个是很简单的一个操作。
我们只需要随意修改css样式表里面的属性,就可以控制并改变wp主题的输出,非常简单强大。
转载请注明出处51数据库 » wordpress如何设置css样式表