首页 > 代码库 > css基础-1
css基础-1
css简介
一、CSS 指层叠样式表
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS 可以通过以下方式添加到HTML中:
1.内部样式：
行内样式
嵌入样式
2.外部样式
（1）行内样式- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
（2）嵌入样式-在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
以上是直接给元素定义css
（1、通过选择器来调用css
定义方式有两种：id选择器和class选择器
例子1：id选择器 调用
#id名字 {属性：值} <标签 id="刚才定义的id名字">
#pang {clor:red} <p id="pang">
例子2： class选择器 调用
.名字 {属性:值} <标签 clas="刚才定义的id名字">
.pang {color:red} <p class="pang">
这两种调用可以使用在内部样式表和外部引用中
（3）外部引用 - 使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">
</head>
最好的方式是通过外部引用CSS文件.
CSS样式表优先顺序
ID选择器＞类选择器＞标签选择器
选择器类型相同时，按照代码应用顺序，后应用的样式覆盖先应用的样式
CSS行内样式在所有样式表中优先级最高
二、css语法格式
1、CSS 规则由两个主要的部分构成：（1）选择器，（2）以及一条或多条声明:
（1）选择器通常是：您需要改变样式的 HTML 元素。（也就是标签）
（2）每条声明：由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号;结束，声明组以大括号{}括起来:
例子：
p {color:red;text-align:center;}
如果属性值有两个单词以上，需要""扩起来
比如: a {color:"red asd"}
2、css注释
/* 注释内容 */
三、css常用属性
（1）height： 表示高度
（2）width： 表示宽度
（3）background ： 表示背景
背景属性（背景图片）例子：
{backgrouund:blue url(1.png) no-repeat X轴位置 Y轴位置;}
blue：背景颜色
no-repeat:表示背景图片不重复显示
X、Y轴可以用像素来表示：比如100px 200px
center:表示居中
fixed：这个值表示固定背景图片，图片不会随着滚动条的下拉而消失。也就是说始 终在屏幕上。
css基础-1