|
我看到有些坛友觉得css好像很难，其实很简单的，只要你懂英文一看就知道了，不懂的话也很简单，用google翻译就可以了，下面我写一下简单的教程，大家看过之后会对css有一个简单的认识，如果您能理解我的意思的话，修改网页的颜色搭配甚至位置的改变都是可以的。下面这段代码是我选用的wp自带的2011就是twenty eleven这个主题来给大家讲解一下。 这段代码大概是从网页的代码的43行 | 到63行。可以打开网页之后查看源文件获得。 <div id="page" class="hfeed"> | | <header id="branding" role="banner"> | | <hgroup> | | | | <h2 id="site-description">又一个 WordPress 站点</h2> | | </hgroup> | | | | | | | | </a> | | | | <form method="get" id="searchform" action="http://localhost/wordpress/"> | | <label for="s" class="assistive-text">搜索</label> | | <input type="text" class="field" name="s" id="s" placeholder="搜索" /> | | <input type="submit" class="submit" name="submit" id="searchsubmit" value="搜索" /> | | </form> | | | | <nav id="access" role="navigation"> | | <h3 class="assistive-text">主菜单</h3> | | <div class="skip-link"><a class="assistive-text" href="#content" title="跳至主内容区域">跳至主内容区域</a></div> | | <div class="skip-link"><a class="assistive-text" href="#secondary" title="跳至副内容区域">跳至副内容区域</a></div> | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
其中<div id="page"class="hfeed">这个的css样式是在主题下style.css中的75行 #page { margin:2em auto; max-width:1000px; } <headerid="branding" role="banner"> <hgroup>这个的css样式是在主题下style.css中的79行 #branding hgroup { margin:0 7.6%; } 这两个css都被定义为id，通过对比#page，#branding大家有没有发现以id为属性的样式，它的css写法前面都是以井号来标记的#？无论id前面你是写的div还是header还是其他任何的名称，只要是id属性那么它的css标记都是以#开始， 在#branding hgroup { margin:0 7.6%; } 这个css中#branding hgroup 它的意思是为branding下的hgroup定义css样式，因为hgroup没有被定义属性，例如class。所以这里hgroup前面就是空白，那如果hgroup被定义属性为class的要怎么写呢？ 比如 | <nav id="access" role="navigation"> | | <h3 class="assistive-text">主菜单</h3> | <div class="skip-link"><a class="assistive-text" href="#content" title="跳至主内容区域">跳至主内容区域</a></div> |
这段代码，他的css是在style.css中的501行 #access a.assistive-text:active, #access a.assistive-text:focus { background:#eee; border-bottom:1px solid #ddd; color:#1982d1; clip:auto !important; font-size:12px; position:absolute; text-decoration:underline; top:0; left:7.6%; } 这个上面我们可以看到有#access a.assistive-text:active, #access a.assistive-text:focus 这么多.这些的意思我简单说一下。不懂没关系，它是说#access下面的a.assistive-text下面的active,和#access下a.assistive-text下的focus这两个公用相同的css样式，所以写到一起。可以使代码简洁。 好了，回到我们上面的问题。下面这些就希望大家理解了。被定义属性为class 的要怎么写呢？首先在<nav id="access" role="navigation">从这句话我们可以看出想给这个access写样式的话我们要先写#access，然后被定义为class的a标签，也即<aclass="assistive-text" href="#content" title="跳至主内容区域">跳至主内容区域</a> 这段的写法我们要写为 a.assistive-text 这两个a 中间的点就是css 中class 的标记。第一个a 的意思是a 标签也就是a herf 的意思，因为我们没有对其定义属性所以第一个a 前面没有点，点后面以a 为开头的assistive-text 就是对<a class="assistive-text"的样式进行定义。现在大家应该明白class属性在css中对应的写法是. 了吧。 好了这样的话整个写下来就是#accessa.assistive-text.这句代码反应两个问题 1， 在html里的<nav id="access" role="navigation">中有一个被命名为access的id。也就是说html里的名称和你css中的名称是一一对应的。根据它的属性是id还是class在这个名称前面加井号或者点。 2， 想要给一个id下面的class属性的内容写样式的话，id要在css中写在class的前面。这么做的好处是避免class属性对上面的继承导致你直接写class的样式失败。如果写一个id还不能取消继承的话，可以在这个id前面再加一个id。 学会了怎么写开头，我们学下怎么写内容。{ background:#eee; border-bottom:1px solid #ddd; color:#1982d1; clip:auto !important; font-size:12px; position:absolute; text-decoration:underline; top:0; left:7.6%; } 这里我们可以看到，内容是写在中括号里的，每个属性以分号;隔开。下面讲解下上面这个css的意思background:#eee;背景颜色是#eee。
border-bottom: 1px solid #ddd; 1个像素的实线并且实线是#ddd颜色的底部边框。
color:#1982d1; 这块的内容颜色是#1982d1。
font-size: 12px;字体大小12像素。
position: absolute;位置是以整个页面为基准。
text-decoration: underline;文字装饰有下划线。
top: 0;顶部0像素。
left:7.6%;这个部分在整个页面左边的7.6%的位置。clip: auto !important;这个是居中裁剪!important这个是浏览器兼容的作用。 解释过上面的意思之后，说下大家用的时候要注意的问题。比如#eee这个颜色，大家应该注意到了，颜色开头是有井号的。1px，12px，这些凡是有数字的像素是一定要加px的。只有在0像素如top: 0;的时候可以不加px。Position有absolute的绝对定位和relative相对定位两种。left: 7.6%从这里我们可以看出除了用固定像素之外还可以用百分比来固定你的位置，宽度，高度。 相信如果大家能看懂这些，经过一些实践的话，3-5天你就学会css了。如果遇到不懂的属性的话。大家可以把这些词拿去google下，明白他的中文意思，我想大家就知道怎么写样式了吧。其实常用的属性也就只有不到30个单词，只要记住这30个左右的单词，相信应付日常的工作是没问题的，毕竟我们不是开发网站的。 最后一句也是最重要的。大家在改css的时候一定要用英文输入法，不要用搜狗这类的输入法，只有英文输入法才会有作用。希望大家一定要多动手，多去看别人的css，学习下别人的。这样你就会进步很快了。 本屌并没有学过css。这些都是本屌偶然看到别人操作一次后回去自己实践学会的。都是让大家看完之后直接去操作的实用教程。因为非专业出身，所以有不对的地方请大神予以指出，以免误导群众。多谢。最后希望大家能够学会css。也希望大家能给多加t币，多谢。最后无耻一下，如果大家觉得好，t币给的多的话，我再写一个补充教程。嘿嘿
| 
[复制链接]
发表于 2013-12-2 19:55:37
提升卡
沉默卡
变色卡
楼主
