本文介绍了CSS的基础概念，包括层叠样式表的定义、语法、不同类型的样式表及其作用域与优先级，以及各种选择器的使用方法。
CSS基础
CSS定义
CSS全称 cascading style sheets，层叠样式表。其中层叠的意思是指在不同的选择器或者是不同的样式表给同一个元素添加相同的CSS属性时，CSS的属性会层叠覆盖。
CSS语法
选择符{
属性:属性值;
}
其中（属性：属性值）统称为“声明”。
块级元素与行内元素
块级元素，p,h,ul,ol等标签；行内元素，span,input,img等标签，宽高由内容决定，不可以设置宽高。
样式表
1内部样式表
<head>
<style>
P{
值
}
</style>
</head>
2外部样式表
在CSS文件夹中建立如index.css的文件，在其中直接编码；在<head></head>中建立
<link rel=”stylesheet” type=”text/css” href=”../css/index.css”>
3内联样式表
<p style=”color:red;”> </p>
4样式表的作用域
1.内部样式表仅对当前页面生效
2.外部样式表，只要链接该css文件就能生效
3.内联样式表仅对当前元素生效
5样式表的优先级
优先级：内联样式表＞内部样式表、外部样式表
内部样式表与外部样式表，在下面的样式表优先级高
基本选择器
标签选择器
div{
color:red;
}
类（class）选择器
.lemon{
width:100px;
}
类class名可以重复使用
id选择器
#lemon{
height:100px;
}
id名不可重复使用
通配符选择器
*{
margin:0;
padding:0;
;}
页面中所有的元素都能获取
群组（并集）选择器
#header,#banner,#main,#news,#links{
margin:o auto;
;}
后代选择器
#header ul li{
color:orange;
}
常用一些选择器的属性
margin padding margin-top margin-bottom float:left border-right:1px solid #cc;
选择器优先级
内联样式表中的选择器＞id选择器＞类选择器＞标签选择器
!important 代表最高权重
div{
color:red !important;
}
优先级比较时，先判断是否为直接作用于同一元素。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
