CSS

CSS是什么?

CSS指层叠样式表 (Cascading Style Sheets)

样式定义如何显示HTML元素,样式通常存储在样式表中,也可以内嵌到HTML中,也可以内联到标签中。

 

CSS的作用?

同时控制多重网页的样式和布局。

 

样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档,外部样式表便会同时改变站点中所有页面的布局和外观。

如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

 

当同一个 HTML 元素被不止一个样式定义时,会按以下顺序使用样式表:

内联样式(在 HTML 元素内部)
内部样式表(位于 <head> 标签内部)
外部样式表
浏览器缺省设置

 

CSS语法
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的HTM 元素:selector
每条声明由一个或多个属性和值对儿组成:declaration1、declaration2...

 

普通选择器:

h1 {color:red; font-size:14px;}

作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中 h1 是选择器,color 和 font-size 是属性,blue 和 14px 是值。

 

派生选择器:
li strong {
    font-style: italic;
    font-weight: normal;
}
只有li标签中的strong元素是以上样式。其他标签中的strong元素不适合以上样式。
strong是派生在li标签里的

 

id 选择器:

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red {color:red;}
#green {color:green;}
下面的HTML代码中,id属性为red的p元素显示为红色,而id属性为green的p元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

 

id 选择器和派生选择器:
在现代布局中,id 选择器常常用于建立派生选择器。
#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

 

类选择器:
类选择器以一个点号显示
.center {text-align: center}
在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
例如:
<h1 class="center">
<p class="center">

 

class用作派生选择器:
.fancy td {
 color: #f60;
 background: #666;
}
在上面这个例子中,类名为fancy的更大的元素内部的表格单元<td>都会以灰色背景显示橙色文字。

 

td.fancy {
 color: #f60;
 background: #666;
}
在上面的例子中,类名为fancy的表格单元将是带有灰色背景的橙色。
<td class="fancy">

 

样式表分类:
外部样式表
内部样式表
内联样式

 

插入外部样式表:
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

 

内部样式表:
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

 

内联样式:
要使用内联样式,你需要在相关的标签内使用样式(style)属性
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

 

CSS语法的常用属性值:

背景色:{background-color: gray;}
背景图像:{background-image: url(/i/eg_bg_04.gif);}
背景定位:{background-position:center;}
缩进文本:{text-indent: 5em;}
字间隔:{word-spacing: 30px;}
字符转换:{text-transform: uppercase}
字体:{font-family: sans-serif;}
字体系列:{font-family: Georgia;}
列表类型:{list-style-type : square}

 

 

摘自:www.w3cschool.cn

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值