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="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:这个值表示固定背景图片,图片不会随着滚动条的下拉而消失。也就是说始 终在屏幕上。