css基础
2015-07-29 22:50
471 查看
css有以下优点：提高页面浏览速度；缩短改版时间，降低维护费用；更好地控制页面布局；实现表现和结构、内容相分离；更方便搜索引擎的搜索。将css样式加入到xhtml中有三种途径：1.外部样式表顾名思义是将 我们写好的样式放在一个单独的文件中，并在需要该样式的文档中引用；引用代码如下：<head><link rel="stylesheet" type="text/css" href="myStyle.css"/></head>2.嵌入式样式表用<style>元素将包含在网页内部的样式设置，其作用和范围仅限于该网页。它的优点是样式规则和标记元素在一个页面里，可以快速将两者融合在一起。<style type="text.css">----加上样式规则</style>3.内联样式表大多数的html标记都包含有一个style属性，允许指定在标记显示时的样式。<h style="color:red;">红色标题列</h>样式规则：由选择器 声明块 两大部分组成h1{color：blue;}其中h1为选择器 {}为声明块 color为属性 blue为值属性和值用冒号隔开，声明用分号隔开文档树html文档是结构化，在层次关系上类似一个倒挂的树，数的每个层次与家族关系相似选择器1.元素选择器em{color：blue；}元素选择器选择匹配选择器的网页上的任何html元素，不考虑这些元素在文档树中的位置2.类选择器它用于选择某个class属性的任何html元素，不考虑这些元素在文档树中的位置对样式文档进行格式化.big{font-size:110%}类选择器最强大的特点在于多个类可以应用于一个元素虽然它很强大但不推荐使用，而选择用类来格式化例如：
<style type="text/css">
h2 {
text-align: center;
color: red;
}
h3 {
text-align: center;
color: green;
}
.p {
background-color: orange;
color: blue;
text-align: center;
font-weight: bold;
}
.o {
background-color: yellow;
font-style: italic;
text-align: center;
color: blue
}
.l {
background-color: pink;
font-weight: bold;
text-align: center;
color: blue
}
</style>
</head>
<body>
<h2>古诗两首</h2>
<h3>静夜思</h3>
<p class="p">李白</p>
<p class="o">床前明月光</p>
<p class="l">疑是地上霜</p>
<p style="background-color: black">举头望明月</p>
<p class="l">低头思故乡</p>
<h3>春晓</h3>
<p class="p">孟浩然</p>
<p class="o">春眠不觉晓</p>
<p class="l">处处闻啼鸟</p>
<p class="o">夜来风雨声</p>
<p class="l">花落知多少</p>设置元素内容的字体
设置字体名称font-family
设置字体倾斜程度 font-style
设置字重font-weight
设置字体大小font-size
设置元素内容的文本属性text-align
设置行高line-height
设置字间距letter-spacing
设置词间距word-spacing
设置元素内容的字体颜色与背景
background-color背景颜色
background-image背景图片用URL或none
background-reapt设置背景图片是否如何铺排
background-attachment设置背景图像是随对象内容滚动还是固定的（scroll默认/图像相对于显示屏铺排，fixed相对于上一级元素的区域铺排）
background-position 用于指定背景图片显示的位置
样式表的层叠
我们在同一元素的同一属性color上定义多条css规则，这种情况叫层叠，这时就要考虑优先级算法来确定
1.css规则的来源和重要性：
从小到大的顺序为
浏览器默认样式表
用户在浏览器中定义中的normal规则
开发人员定义的样式中的normal规则
开发人员中的样式中important规则
2.css规则的特殊性
特殊性值是一个4个整数组成的一个类似数组的值：abcd，其中a的权重最高以此类推
如果该规则是一条内联样式那么a=1，否则a=0
若选择器中出现的id选择器的数量就是b的值
若出现属性选择器或类选择器伪类选择器的数量总和就是d的值
通配符为0000
3.css规则在文档中出现的顺序
如果两条规则有相同的重要性和特殊性那出现在后的总是比出现在前的具有更高的优先级
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 