注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

css简介  

2013-02-21 14:17:57|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

      CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML 等文件样式的计算机语言。CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
css简介 - 我是——斑竹 - 闪电行创意设计
 

1.css=层叠样式表;
2.html表达结构,css表达样式;
3.样式与内容/结构是分离的。

4.有三种形式:内嵌样式表、内部样式表、外部样式表。
继承原则:按照就近一致原则。

外部样式表引用方式:
<link rel="stylesheet" type="text/css" href="mystyle.css">



5.背景样式:纯色或者图片做背景
(1)使用纯色背景
<body style="background-color:grey;">
1) 默认是透明:<body style="background-color:transparent;">
2) 使用RGB颜色体系,每种颜色两位16进制,一共六位数字,每个数字从0到F:<body style="background-color:#ff0000;">
3) 另一种RGB颜色模式:<body style="background-color:rgb(255,0,0);">

4) 到CSS3时,又多了一个alpha通道,通俗的说是透明度,取值是0到1之间:
<body style="background-color:rgba(255, 0, 0, 0.5);">


(2)使用图像做背景
<body style="background-image: url(a.jpg);">
1)设置重复
<body style="
background-image: url(a.jpg); 
background-repeat:no-repeat;    no-repeat, repeat-x, repeat-y等三种方式。
background-position:top">    可以组合,如:top right。center、top、middle等。
                                                也可以使用坐标:background-position:100px 100px 。


2)设置图片是否跟着背景滚动?
background-attachment:fixed;     图片固定。
默认是scoll;


一个偷懒的方法是这样的:如下顺序写这些样式——color image repeat attachment
<body style="background: url(a.jpg) no-repeat top"



(3)可以为整个页面设背景,但是也可为为一两个段落设置背景;
<h1 style="background-color:rgba(255, 0, 0, 0.5);">123</h1>




6.文本样式
(1)文本红色:
<h1 style="color:red">my site</h1>

(2)缩进
1)<p style="text-indent:2em">百度提醒您:在使用百度搜索引擎(以下简称百度)前,请您务必仔细阅读并透彻理解本声明。您可以选择不使用百度,但如果您使用百度,您的使用行为将被视为对本声明全部内容的认可。</p>


(3)首行悬挂:
<p style="text-indent:-2em; padding:2em">百度提醒您:在使用百度搜索引擎(以下简称百度)前,请您务必仔细阅读并透彻理解本声明。您可以选择不使用百度,但如果您使用百度,您的使用行为将被视为对本声明全部内容的认可。</p>

(4)行间距,默认为 line-height:normal;
<p style="text-indent:-2em; padding:2em; line-height:2em;">百度提醒您:在使用百度搜索引擎(以下简称百度)前,请您务必仔细阅读并透彻理解本声明。您可以选择不使用百度,但如果您使用百度,您的使用行为将被视为对本声明全部内容的认可。</p>

(5)文字对齐。中文无明显影响。英文一般是靠左对齐,想要右对齐,使用  text-align:right;  可用:center / left /right /justify

(6)单词间距离   word-spacing:30px;  
<p style="text-indent:-2em; padding:2em; line-height:2em; word-spacing:30px;  ">Jimm Wang百度提醒您:在使用百度搜索引擎(以下简称百度)前,请您务必仔细阅读并透彻理解本声明。您可以选择不使用百度,但如果您使用百度,您的使用行为将被视为对本声明全部内容的认可。</p>

(7)字母间距离   letter-spacing:10px;  

(8)字母大小写:text-transform:uppercase;大写    lowercase;小写    capitalize;首字母大写 

(9)字体装饰:text-decoration: underline overline line-through   ;   
                                                       下划线    上划线    中间划线。

(10)空白字符的处理:
white-space:pre;    空格、回车保留;没有自动卷绕;
white-space:pre-wrap;     和pre一样,同时有卷绕;   
white-space:no-wrap;     不会卷绕,除非有br,否则不会换行。    
white-space:pre-line;   


(11)文字书写方向;
direction:rtl;     对中英文没用,仅仅是最后一行的标点放到最左端。对于阿拉伯文字有效果。





7.字体
(1)字体家族 font-family: 通用系列 5大类serif sans-serif monospace cursive手写体  fatasy其他
<p style="font-family:serif sans-serif monospace cursive fatasy;"Jimm Wang百度提醒您:在使用百度搜索引擎(以下简称百度)前,请您务必仔细阅读并透彻理解本声明。您可以选择不使用百度,但如果您使用百度,您的使用行为将被视为对本声明全部内容的认可。</p>

(2)字体样式
font-style:normal;         italic;斜体          oblique;斜体   
font-variant:small-caps;  小的大写字母;
font-weight:bold;   900到100的数字;   字体是否加粗?
font-size: 2em;     0.4em;     1em;是正常的默认的字体的宽度。最好使用em,而不要使用绝对值。


(3)阴影效果:
<p style="text-shadow: 3px 5px 4px rgba(0, 255, 0, 0.5);"Jimm Wang百度提醒您:在使用百度搜索引擎(以下简称百度)前,请您务必仔细阅读并透彻理解本声明。您可以选择不使用百度,但如果您使用百度,您的使用行为将被视为对本声明全部内容的认可。  </p>

四个值的意义:左三个点,下5个点,阴影范围是4个点,颜色是绿色。

这个不明显,可以考虑加到h1标签中,效果更明显。

这个就像雕刻的文字:
<h1 style="font-family:cursive; text-shadow: 0px -1px 0px #000, 0px 1px 3px #606060; color:#606060;"Jimm Wang</h1>

(4)边框
outline-color
outline-style:inside; outside; ...
outline-width

<h1 style=" outline:#00FF00 dotted thick;"Jimm Wang</h1>




8.列表与表格
(1)ul与li的样式
1)<ul style="list-style-type:disc">  circle;   square;
    <li>加糖</li>
  <li>不加糖</li>
</ul>

也可以使用图片
style="list-style-imge: url(dot.png)">

2)位置:
list-style-position: inside;  如果文字很长,需要换行,则左端和小圆点的最左端对齐。
list-style-position: outside;  如果文字很长,需要换行,则左端和小圆点的最右端对齐。

(2)表格的样式
边线,表格中文字与边框的距离;

<table style="border: 1px solid blue; border-collapse: collapse;">
 <tr>
      <td>OS</td>
      <td>YES</td>
      <td>YES</td>
   </tr>

 <tr>
      <td>WM8</td>
      <td>YES</td>
      <td>YES</td>
   </tr>
</table>

border-collapse: collapse; 表格的边线合并为单线;
border-collapse: separate; 表格的边线分开为两条单线;

指定表格宽度:width:50px; height:100px; 
指定对齐:vertical-align:top;   垂直对齐方式;
                  text-align:right;     水平对齐方式;

文字与边框距离:padding:10px;  

表头位置: caption-side:top;默认是顶部     bottom;底部

表格布局设置:table-layout: automatic;默认是自动分配宽度,等读全部表格后再计算宽度,并显示。如果表格大,则不行。
                        table-layout: fixed;  根据第一行的列宽,作为以后的列宽;







9.框模型与定位——又名盒模型
(1)哪些是块状元素?
块元素:段落p、标题h、表格table、div等;

可以规定框的高度height与宽度width颜色color,以及里面元素与框的距离padding,框与框之间的距离margin,框内的背景background。

内容与框的距离:padding有4个距离,可以分别指定:padding-top, padding-right, padding-bottom, padding-left;
也可以一次性指定:padding: 10 15 20 25;  顺序是从top开始顺时针方向,上 右 下 左

--两个上下相邻的框,会取一个的bottop与另一个top最大的距离显示;
--padding不能使负数;


(2)定位
html是一种流式的排版语言,填充完一行后再填充下一行。
而css可以定义块模型,使其占用某个位置。
以前,定位是通过table来定位的。

在html5中,新增加了一些模块。可以叫做预先起了名字的div。
页眉header、页脚footer、侧边side条等信息。


position: static; 静态的,默认;
position: relative; 相对定位;
position: absolute; 原来位置不保留,需另外指定;
position: fixed; 


1)相对定位
<h1 style="background-color:rgba(255, 0, 0, 0.5); position:relative; left:-20px;">123</h1>  相对定位,不顾padding与margin,可以重新考虑位置;

2)绝对定位
<h1 style="background-color:rgba(255, 0, 0, 0.5); position:absolute; left:-20px;">123</h1>  根据上一个块模型body向左移动20点。

<div style="position:absolute; top:-20px;  border:2px solid red;">
    <h1 style="background-color:rgba(255, 0, 0, 0.5); position:absolute; left:-20px;">123</h1>
</div>

3)浮动定位

<img src="a.jpg" width=100 style="float:right;" />

float:right;   left;   none;  一共三个值;








10.样式选择器
四种选择器:标签选择器、id选择器、类选择器、属性选择器;
还有一个全局选择器:*,不过不常用。


(1)标签选择器 / 元素选择器
在head中定义样式:
<style>
   th{border: 1px solid blue; }
</style>

则以后html代码中的所有th都被赋予了这种样式;

批量标签的样式相同的话,可以这样:
<style>
  p, ul,  th{border: 1px solid blue; }
  p{background-color: red; }    /*p还可设置一些自己的样式*/
</style>

(2)类选择器
类选择器定义时使用: 点 + 类名,
引用时,使用 class=类名;定以后的样式可以供多个元素引用。

如:
<style>
  .my, th{border: 1px solid blue; }
  p{background-color: red; }    /*p还可设置一些自己的样式*/
</style>

<p class="my">my text here</p>

(3)ID选择器
ID选择器定义时使用: # + ID名,
仅仅适用于 ID=ID名;的元素,唯一性。

<style>
  #dis, th{border: 1px solid blue; }
  p{background-color: red; }    /*p还可设置一些自己的样式*/
</style>

<p id="dis">my text here</p>


(4)属性选择器
如果有这个属性,则使用这种样式;
<style>
  *[title], th{color: red; }
</style>

<p title="hello" >my text here</p>


(5)后代选择器:有嵌套关系
如仅仅是p标签中的em元素使用这种样式:
1)空格隔开:对p标签内的所有em元素使用样式,不管中间是否还有其他标签隔开。
<style>
  p em{color: red; }
</style>

<p>my<i> <em>text is here</em> , you</i> can change it as you want</p>


2)大于号隔开:对p标签内紧邻的em元素使用样式,中间不能有其他标签隔开
<style>
  p > em{color: red; }
</style>

<p>my<i> <em>text is here</em> , you</i> can <em>change</em> it as you want</p>
如上,前一个em被i隔开,em内不显示红色,后一个em内为红色。


3)加号隔开:对前一个元素紧邻的p标签内使用样式,中间不能有其他标签隔开
兄弟选择器:
<style>
  h1 + p {color: red; }
</style>

<h1>123</h1>
<p>my text is here</p>
<p>you can change it as you want</p>
如上,仅仅第一个p标签内显示为红色,第二个标签没这个效果。





(6)超级链接选择器:
样式:
<style>
  h1 + p {color: red; }
 a:visited{color: red;}  /*伪类 visited*/
a:link{color: blue;}
a:hover{color: purple;}
a:active{color: grey;}
 a.red : visited {color: yellow;}  /*为a标签中red类使用这个样式*/
</style>

html:
<a href="http://www.163.com" target="_blank">网易</a>








11.后续学习
定位、盒子模型、菜单






参考资料:
[1]网易公开课:css入门
[3]css命名规则(非强制,主要是为了方便合作开发与维护):http://wenku.baidu.com/view/833b9e6a011ca300a6c39009.html
  评论这张
 
阅读(226)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017