简单实用的css教程

will86 · 发表于 2013-12-2 19:55:37

我看到有些坛友觉得css好像很难，其实很简单的，只要你懂英文一看就知道了，不懂的话也很简单，用google翻译就可以了，下面我写一下简单的教程，大家看过之后会对css有一个简单的认识，如果您能理解我的意思的话，修改网页的颜色搭配甚至位置的改变都是可以的。下面这段代码是我选用的wp自带的2011就是twenty eleven这个主题来给大家讲解一下。

这段代码大概是从网页的代码的43行

到63行。可以打开网页之后查看源文件获得。 <div id="page" class="hfeed">
	<header id="branding" role="banner">
	<hgroup>
	<h1 id="site-title"><span><a href="http://localhost/wordpress/" title="美容" rel="home">美容</a></span></h1>
	<h2 id="site-description">又一个 WordPress 站点</h2>
	</hgroup>

	<a href="http://localhost/wordpress/">
	<img src="http://localhost/wordpress/wp-content/themes/twentyeleven/images/headers/wheel.jpg" width="1000" height="288" alt="" />
	</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的要怎么写呢？

比如

<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 20:13:06

好东西就要收藏下来........

cfdylz · 发表于 2013-12-2 22:08:52

非常感谢楼主的分享!谢谢

hua120 · 发表于 2013-12-2 22:20:20

感谢楼主的分享，学习了！

will86 · 发表于 2013-12-2 22:27:10

cfdylz 发表于 2013-12-2 22:08
非常感谢楼主的分享!谢谢

喜欢就加分吧，谢了

will86 · 发表于 2013-12-2 22:29:12

hua120 发表于 2013-12-2 22:20
感谢楼主的分享，学习了！

您的分是我的动力，如果大家分加的多的话，我找个站给大家写一个实战教程

八夜 · 发表于 2013-12-2 22:50:36

谢了露珠这个很简单试用

will86 · 发表于 2013-12-3 10:40:36

查看88,6个回复，6个币，略显凄惨

ADbb · 发表于 2013-12-3 12:03:18

自己写教程，无论如何都要大力支持，
如果楼主真的再写实战教程，还有分加，谢谢分享
但不要拿其他人的教程充数哦，呵呵

阅读悦享 · 发表于 2013-12-3 12:33:52

will86 发表于 2013-12-2 22:29
您的分是我的动力，如果大家分加的多的话，我找个站给大家写一个实战教程

...

楼主来个实战教程吧。我把今天的分都加给你

yangjianfeng · 发表于 2013-12-3 12:38:25

话说也要学习一下CSS咯，不能什么都靠插件解决啊。。

KerryWang · 发表于 2013-12-3 19:25:04

感谢楼主分享

will86 · 发表于 2013-12-3 20:01:43

KerryWang 发表于 2013-12-3 19:25
感谢楼主分享

不客气，希望对你有帮助

月光飞燕 · 发表于 2013-12-4 03:57:45

楼主最好录制视频教程，你可以参考一下我的意见，这样也锻炼你的表达和讲解能力，对你人生有好处的，软件可以使用Camtasia Studio 8

luxury · 发表于 2013-12-4 11:05:36

我觉得css手册最重要。。。

熟能生巧哇 · 发表于 2013-12-4 11:14:39

不错支持所有爱学习的同学

婿婿 · 发表于 2013-12-4 11:30:43

我前些日子认真学了一个星期，学CSS嘛，先把HTML学会，然后花几天把CSS的核心理论研究明白其他的东西大概看看，知道什么是干什么的就行了，常用的记一下，不常用的有手册那摆着呢，这个学会稍微下功夫就是一个星期的节奏，我笔记大概写了也就有3页左右吧，就没得记了，学会后认真仿几个大站的页面就算毕业了，记得做多浏览器测试喔，最后要说下的就是现在要学索性把HTML5学下吧，那玩意高端大气上档次，低调奢华有内涵，我给你讲做出来的效果那叫一个赞！~

will86 · 发表于 2013-12-4 15:22:10

婿婿发表于 2013-12-4 11:30
我前些日子认真学了一个星期，学CSS嘛，先把HTML学会，然后花几天把CSS的核心理论研究明白其他的东西大概看 ...

说的有道理，html我也没有学，因为我看得懂，哈哈，本屌学的是英文，那些东西一看就明白了，哈哈

简单实用的css教程

评分

评分

评分

评分