快速修改css样式表,css怎么修改

如何在线编辑Wordpress主题css样式表

很多wordpress主题都提供了可自定义编辑、修改功能,如:更改背景图片,背景颜色,顶部图片,还有一些主题上的小工具可以选择是否让它显示出来等等,但是并不是所有的wp主题都提供这样的功能,所以如果你不熟悉wordpress主题修改,那么建议你选择wp主题的时候,尽可能选择能支持自定义编辑的主题。下面,无忧主机()小编将演示修改wordpress主题的style.css样式表的过程。首先如下图,登录后台点击外观-编辑-就可以看到主题的css样式表了。

从策划到设计制作,每一步都追求做到细腻,制作可持续发展的企业网站。为客户提供成都做网站、网站建设、网站策划、网页设计、域名注册、虚拟空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

主题所有的样式都是写在style.css里面的,今天就以博客文章的字体大小为例做演示。大家都知道,wp的文章是不能修改字体大小的,但是我们可以通过修改主题样式文件来达到修改字体大小的目的。我们只需要在style.css中,找到font-size:100% 把它改为Font-size:20px后,点更新,然后返回到博客首页,就可以看到修改后的效果。这个是很简单的一个操作。我们只需要随意修改css样式表里面的属性,就可以控制并改变wp主题的输出,非常简单强大。

如何修改CSS样式表?

这是一个继承关系的问题

依你的情况举例如下:

a href=""链接1/a

div class="test"a href=""链接2/a/div

你要改的是链接2的属性 而不是链接1的

css代码如下:(只针对链接2)

.test a{}

.test a:hover{}

.test a:active{}

..............

应该理解意思了吧? 就是把父子关系写出来就可以了

刷新页面更换CSS样式表

首先准备两个样式表:1.css 2.css (先用这个吧)

然后在head标签里加入一下代码:

head

script type="text/javascript"

var cssname=Math.floor(Math.random()*2+1);

document.write("link rel='stylesheet' type='text/css' href='"+cssname+"'.css/");

/script

……

/head

注释:用的是随机输出1~2之间的整数来作为CSS的文件名,所以CSS的文件名必须和它对应。呵呵 有一个缺点就是不能保证每次刷新时都会调用新的CSS。希望高手来搭把手!

看看对你有没有帮助

=======================

如果用这个代码,那css文件名就必须至少含有1或者2。如果你想要按照自己的方式命名,那就用数组吧。其实也就是调用arr[0]、arr[1]、arr[2]这种模式。个人感觉没什么必要,以后维护也没什么繁琐的。

百度空间的css样式表怎样编辑

我的百度空间地址是

这个问题不是很白痴,我当时也是一窍不通,其实搞CSS很简单的,就是从网上找一些别人公布的代码,添加到你的CSS样表相应的位置就行了,我给你回答的内容就是里面那么一大片英文的中文备注.不如说你要换文章标题图片,你就找到相应的代码,添加到文章标题那一向的花括号里就行了,就是复制和粘贴的办法,一个一个来,慢慢的都会了.你可以去百度空间吧里看看,里面几乎所有的代码都用人公布出来,或者上一些论坛上去,如果你不知道怎么上,就直接在百度主页的搜索栏里打上”百度空间代码”几个字,保证有你想要的东西的,呵呵!好了,回答完毕,别忘了给我加分哦!

在学CSS之前

学习CSS之前,首先应学会写HTML。如果你对HTML还一无所知(像我一样。。。),请参见HTML教程。

CSS(Cascading Style Sheets)简介

当初一帮技术人员想出HTML,主要侧重于定义内容,比如p表示一个段落,h1表示标题,而并没有过多设计HTML的排版和界面效果。

随着Internet的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直到CSS出现。

CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout)。

CSS的英文是Cascading Style Sheets,中文可以翻译成串联式样式表。

CSS按其位置可以分成三种:

内嵌样式(Inline Style)

内部样式表(Internal Style Sheet)

外部样式表(External Style Sheet)

内嵌样式(Inline Style)

Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。

CODE:[Copy to clipboard]P style="font-size:20pt; color:red"这个Style定义p/p里面的文字是20pt字体,字体颜色是红色。/p

显示示例

内部样式表(Internal Style Sheet)

内部样式表是写在HTML的head/head里面的。内部样式表只对所在的网页有效。

CODE:[Copy to clipboard]HTML

HEAD

STYLE type="text/css"

H1.mylayout {border-width:1; border:solid; text-align:center; color:red}

/STYLE

/HEAD

BODY

H1 class="mylayout" 这个标题使用了Style。/H1

H1这个标题没有使用Style。/H1

/BODY

/HTML

显示示例

内部样式表(Internal Sytle Sheet)要用到Style这个Tag,写法如下:

CODE:[Copy to clipboard]STYLE type="text/css"

......

/STYLE

外部样式表(External Style Sheet)

如果很多网页需要用到同样的样式(Styles),用什么方法呢?

将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

比如可以用文本编辑器(NotePad)建立一个叫home的文件,文件后缀不要用.txt,改成.css。文件内容如下:

CODE:[Copy to clipboard]H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}

然后你建立一个网页,代码如下:

CODE:[Copy to clipboard]HTML

HEAD

link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"

/HEAD

BODY

H1 class="mylayout" 这个标题使用了Style。/H1

H1这个标题没有使用Style。/H1

/BODY

/HTML

显示示例

使用外部(Extenal)样式表,相对于内嵌(Inline)和内部式(Internal)的,有以下优点:

样式代码可以复用。一个外部CSS文件,可以被很多网页共用。

便于修改。如果要修改样式,只需要修改CSS文件,而不需要修改每个网页。

提高网页显示的速度。如果样式写在网页里,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。

串联(Cascading)

CSS第一个字母,是Cascading,意为串联。它是指不同来源的样式(Styles)可以合在一起,形成一种样式。

Cascading的顺序是:

浏览器缺省(browser default)(优先级最低)

外部样式表(Extenal Style Sheet)

内部样式表(Internal Style Sheet)

内嵌样式表(Inline Style)(优先级最高)

样式(Styles)的优先级依次是内嵌(inline), 内部(internal), 外部(external), 浏览器缺省(browser default)。假设内嵌(Inline)样式中有font-size:30pt, 而内部(Internal)样式中有font-size:12pt,那么内嵌(Inline)式样式就会覆盖内部(Internal)样式。

显示示例

-

基本语法

一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性(Property),属性值(Value)。

CODE:[Copy to clipboard]selector {property: value}

举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。

CODE:[Copy to clipboard]p {color:blue}

HTML中所有的Tag都可以作为selector。

注:如果你想为Style加多个属性,在两个属性之间要用分号加以分隔。下面的Style就包含2个属性,一个是对齐方式居中,一个字体颜色为红,当中用分号分隔开。

CODE:[Copy to clipboard]p {text-align:center;color:red}

为了提高Style代码的可读性,你也可以分行写:

CODE:[Copy to clipboard]p

{

text-align: center;

color: black;

font-family: arial

}

组合(Grouping)

你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。

CODE:[Copy to clipboard]h1,h2,h3,h4,h5,h6

{

color: red

}

上面的例子是将所有正文标题(h1到h6)的字体颜色都变成红色。

Class Selector

利用Class Selector,你可以用同样的HTML Tag构成不同的样式。比如说,你希望段落p有两种样式,一种是居中对齐,一种是居右对齐。你就可以写如下样式:

CODE:[Copy to clipboard]p.right {text-align:right}

p.center {text-align:center}

其中right和center就是两个class。然后你就可以引用这两个class,示例代码如下:

CODE:[Copy to clipboard]p class="center"这一段居中显示。/p

p class="right"这一段是居右显示。/p

演示示例演示示例

你也可以不用HTML Tag,直接用.加上Class名称作为一个Selector。示例代码如下:

CODE:[Copy to clipboard].center {text-align: center}

这种通用的Class Selector就没有Tag的局限性,可以用于不同的Tag。比如:

CODE:[Copy to clipboard]h1 class = "center"这个标题居中显示。/h1

p class = "center"这个段落居中显示。/p

演示示例演示示例

Contextual Selector

你可以为嵌入其它Tag的Tag定义样式,示例代码如下:

CODE:[Copy to clipboard]p em{color: red}

Em这个Tag嵌套在P里面。p em就叫做Contextual Selector,定义嵌套于P里的Em的样式。这个例子表示,在P里面的用Em这个Tag标记的字体颜色是红色。

演示示例演示示例

CSS注释

为了方便你自己或者他人日后更好地理解你的CSS代码,你可以写CSS代码注释。CSS代码注释以/*开头,以*/结束。

CODE:[Copy to clipboard]/* 段落样式 */

p

{

text-align: center;

/* 居中显示 */

color: black;

font-family: arial

}

CSS字体属性

CSS常用文本属性

CSS背景属性

CSS边框属性

CSS边距属性

CSS间隙属性

CSS盒子模式(Box Model)

... margin_padding.html

CSS列表样式属性

CSS伪类(pseudo-class)

CSS代码示例

推荐 布啦布啦 - 网页教程与代码的中文站点

上面的东西都是理论,看是看不会的, 必须动手操作实践。

下面是百度给出的空间页面CSS说明

空间页面CSS说明

body 整个空间页面{background-color:#FFFFFF}

--------------------------------------------------------------------------------

空间名称和简介区域

#header 主体部分{height:89px;background:#3399CC}

#header div.lc 左背景图{background:url(temp1/hdl.jpg) no-repeat}

#header div.rc 右背景图{background:url(temp1/hdr.jpg) no-repeat top right}

#header div.tit 空间名称{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑体}

#header div.tit a.titlink 空间名称链接{color:#FFFFFF;text-decoration:none}

#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}

#header div.desc 空间简介{top:33px;left:20px;color:#FFFFFF;font-size:13px}

#tabline TAB菜单下方的横线{top:89px;background-color:#FFFFFF}

#tab TAB菜单主体{top:67px;background:url(temp1/tabbg.gif) repeat-x}

#tab a.on,#tab a.on:link,#tab a.on:visited TAB选中状态{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}

#tab span TAB与TAB之间的分割符“|”{color:#FFFFFF;font-size:14px}

#tab a:link TAB未选中状态{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab2 设置TAB菜单主体{background:#DAE9F5}

#tab2 span TAB选中状态{color:#000000;font-size:12px;font-weight:bold}

#tab2 a TAB未选中状态{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

--------------------------------------------------------------------------------

.stage 内容区域(TAB菜单与版权信息之间的区域){background:#F3F1F1}

其它区域(即访问量等信息)

#comm_info 主体{color:#333333;font-family:Arial;text-align:left}

#comm_info div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

#comm_info a 链接{color:#3399CC}

--------------------------------------------------------------------------------

页码区域

#page 主体{height:30px;font-size:14px;font-family:Arial;text-align:center}

#page span 当前页码(不可点击){padding:3px;color:#000000;font-size:14px;font-weight:bold}

#page a.pc 上一页和下一页{color:#3399CC;font-size:14px;font-weight:bold}

#page a.pc:visited{color:#3399CC}

#page a.pi 页码(可点击){padding:3px;color:#3399CC;font-size:14px}

#page a.pi:visited{color:#3399CC}

--------------------------------------------------------------------------------

模块

.mod {margin-bottom:10px}

.modhandle{cursor:move}

.modth 模块标题栏主体{height:24px}

.modhead{padding:4px 4px 0 4px}

.modopt 模块操作区(如写新文章){padding:4px 4px 0 0}

.modtit 模块标题区(如文章列表){color:#FFFFFF;font-size:12px;font-weight:bold}a.modtit{color:#FFFFFF}a.modtit:visited{color:#FFFFFF}

.modtitlink{color:#FFFFFF;font-size:12px;font-weight:bold}a.modtitlink{color:#FFFFFF;text-decoration:none}a.modtitlink:visited{color:#FFFFFF;text-decoration:none}a.modtitlink:hover{color:#FF5100;text-decoration:underline}

.modact 操作文字链接(如文章列表){color:#FFFFFF;font-size:12px}a.modact:link{color:#FFFFFF}a.modact:visited{color:#FFFFFF}

.modbox 模块内容区{padding:10px 10px 0 10px;background-color:#FFFFFF}

.modtl 模块左上角背景{background:url(temp1/ptitl.gif) no-repeat top left;line-height:1px}

.modtc 模块中上背景{background:url(temp1/ptitc.gif) repeat-x}

.modtr 模块右上角背景{background:url(temp1/ptitr.gif) no-repeat top right;line-height:1px}

.modbl 模块左下角背景{background-color:#FFFFFF;line-height:1px}

.modbc 模块中下背景{background-color:#FFFFFF;line-height:1px}

.modbr 模块右下角背景{background-color:#FFFFFF;line-height:1px}

--------------------------------------------------------------------------------

文章区域

#m_blog div.tit 文章标题{font-size:14px;font-weight:bold}

#m_blog div.tit a 文章标题链接{color:#333333;font-size:14px;font-weight:bold}

#m_blog div.tit a:visited{color:#333333}

#m_blog div.date 文章发表日期{margin:5px 0 8px 0;color:#666666}

#m_blog div.cnt 文章内容{color:#333333;line-height:20px;font-size:14px}

#m_blog div.more{margin:14px 0 16px 0}

#m_blog div.more a 阅读全文链接{color:#3399CC;font-size:14px}

#m_blog div.more a:visited{color:#3399CC}

#m_blog div.opt 文章操作区(如编辑、评论等){color:#666666;font-size:12px}

#m_blog div.opt a 文章操作链接{color:#3399CC;font-size:12px}

#m_blog div.opt a:visited{color:#3399CC}

#m_blog div.line 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#m_blog div.none 无文章提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}

--------------------------------------------------------------------------------

个人档案区域

#m_pro a 链接{color:#3399CC}

#m_pro a:visited{color:#3399CC}

#m_pro div.image 个人头像{text-align:center}

#m_pro div.act 操作区(如加为好友、发送消息){margin-top:10px}

#m_pro div.user 用户名{margin-top:10px;color:#333333;font-size:12px;font-weight:bold}

#m_pro div.desc 用户简介{color:#333333;font-size:12px}

#m_pro div.line 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#m_pro td{color:#333333;line-height:24px;font-size:14px}

--------------------------------------------------------------------------------

相册区域

#m_album div.image 照片{text-align:center}

#m_album div.page {color:#666666;font-size:12px;text-align:center}

#m_album div.page a{color:#0000CC;font-size:12px}

#m_album div.page a:visited{color:#0000CC}

--------------------------------------------------------------------------------

友情链接区域

#m_links div.item 子项{color:#333333;font-size:12px}

#m_links div.item a 名称(链接){color:#3399CC;font-size:12px;text-decoration:none}

#m_links div.item a:visited{color:#3399CC}

#m_links div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

文章分类

#m_artclg div.item 子项{color:#666666;font-size:12px}

#m_artclg div.item a 分类名称(链接){color:#3399CC;font-size:12px}

#m_artclg div.item a:visited{color:#3399CC}

#m_artclg div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

最新评论区域

#m_comment div.item 子项{color:#333333;font-size:12px}

#m_comment div.item a 发表人(链接){color:#3399CC;font-size:12px}

#m_comment div.item a:visited{color:#3399CC}

#m_comment div.item a.cnt 评论摘要(链接){color:#333333;font-size:12px;text-decoration:none}

#m_comment div.item a.cnt:visited{color:#333333;text-decoration:none}

#m_comment div.item a.cnt:hover{color:#333333;text-decoration:underline}

#m_comment div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

相册列表

#m_albumlist div.note{color:#333333;font-size:14px}

#m_albumlist div.desc 简介{margin-bottom:12px;padding:3px 10px 3px 10px;line-height:22px;background-color:#F2F2F2;font-size:14px}

#m_albumlist div.none 无照片提示信息{padding:100px 0 100px 0;color:#333333;font-size:14px}

#m_albumlist div.line 分界线{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}

#m_albumlist div.tit 照片标题{margin:6px 0 7px 0;color:#333333;font-size:14px}

#m_albumlist div.tit a 照片标题链接{color:#3399CC;font-size:14px}

#m_albumlist div.tit a:visited{color:#3399CC}

#m_albumlist span.count 照片数量{color:#666666;font-size:12px;font-weight:bold}

#m_albumlist span.size 照片尺寸{color:#999999;font-size:12px;font-family:Arial}

#m_albumlist a.act 操作区链接(如编辑、删除){color:#3399CC;font-size:12px}

#m_albumlist a.act:visited{color:#3399CC}

#m_albumlist a.page 页码链接{color:#0000CC;font-size:14px}

#m_albumlist a.page:visited{color:#0000CC}

#m_albumlist td.image{padding:5px;border:1px solid #999999;background:#FFFFFF}

--------------------------------------------------------------------------------

好友列表

#m_friend div.filter{margin-bottom:10px;padding-left:10px;padding-top:10px;height:27px;line-height:27px}

#m_friend div.catalog{margin-bottom:10px;padding-left:10px;height:27px;line-height:27px;background-color:#F2F2F2;font-size:14px}

#m_friend div.user{margin-top:4px;color:#333333;font-size:12px}

#m_friend div.user a 好友名称(链接){color:#3399CC;font-size:12px}

#m_friend div.user a:visited{color:#3399CC}

#m_friend div.line 分界线{margin-top:10px;line-height:16px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

设置访问统计、模板设置

#m_setting a 链接{color:#3399CC}

#m_setting a:visited{color:#3399CC}

#m_setting 主体{line-height:22px;color:#333333;font-size:14px}

#m_setting img.sel 模板预览图(选中状态){border:4px solid #FFDB7B}

#m_setting img.unsel 模板预览图(未选中状态){border:1px solid #D2D2D2}

#m_setting span.tit 模板标题名称{font-size:14px}

#m_setting span.usr 作者名{color:#666666}

#m_setting div.sel “当前模板”文字{padding-top:6px;font-size:14px;font-weight:bold}

#m_setting div.line 分界线{margin-top:20px;line-height:16px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

系统公告

#m_sysinfo a 链接{color:#3399CC}

#m_sysinfo a:visited{color:#3399CC}

#m_sysinfo 主体{line-height:22px;color:#333333;font-size:14px}

#m_sysinfo span.new 最新{color:#FF0000;font-size:10px;font-family:Arial}

#m_sysinfo span.date 发布时间{color:#666666;font-size:14px}

--------------------------------------------------------------------------------

基本选项

#m_setbase 主体{color:#333333;font-size:14px}

#m_setbase td{color:#333333;font-size:14px}

#m_setbase div.line 分界线{margin-top:5px;line-height:8px;border-top:1px solid #D2E9F4}

--------------------------------------------------------------------------------

网友评论

#in_comment 主体{width:710px}

#in_comment div.tit 标题{margin-bottom:12px;color:#333333;font-size:14px;font-weight:bold}

#in_comment div.user 发表人名{margin-bottom:6px;color:#333333;font-size:12px}

#in_comment div.user a 发表人名(链接){color:#3399CC;font-size:12px}

#in_comment div.user a:visited{color:#3399CC}

#in_comment div.user span.date 发表时间{color:#666666;font-size:12px}

#in_comment div.desc 评论内容{color:#333333;font-size:12px}

#in_comment div.line 分界线{margin-top:17px;line-height:17px;border-top:1px solid #D2E9F4}

#in_send div.tit 发表评论(标题){margin:10px 0 10px 0;color:#333333;font-size:14px;font-weight:bold}

怎么设置css表格的样式(颜色等)

下面来个例子,你可以复制到你的编辑器里修改测试

style type="text/css"

table.gridtable {}{

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #666666;

border-collapse: collapse;

}

table.gridtable th {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

background-color: #dedede;

}

table.gridtable td {}{

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

background-color: #ffffff;

}

/style

!-- Table goes in the document BODY --

table class="gridtable"

tr

thInfo Header 1/ththInfo Header 2/ththInfo Header 3/th

/tr

tr

tdText 1A/tdtdText 1B/tdtdText 1C/td

/tr

tr

tdText 2A/tdtdText 2B/tdtdText 2C/td

/tr

/table

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

如何用JavaScript实现动态修改CSS样式表

方法一、使用obj.className来修改样式表的类名

方法二、使用obj.style.cssText来修改嵌入式的css

function changeStyle2() {

var obj = document.getElementById("btnB");

obj.style.cssText = "background-color:black; display:block;color:White;

}


分享标题:快速修改css样式表,css怎么修改
标题URL:http://myzitong.com/article/dsiiggd.html