本文详细介绍了CSS的基本概念，包括注释、样式类型、选择器、文本样式设置、元素分类及盒模型等内容，帮助初学者快速掌握CSS的核心知识。
1.CSS注释代码
/*注释语句*/
2.CSS样式分3种：内联式、嵌入式、外部式
a.内联式 css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>注意： 要写在元素的开始标签里， 并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开
<p style="color:red;font-size:12px">这里文字是红色。</p>
b.嵌入式 嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间
<style type="text/css">
span{
color:red;
}
</style> 一般情况下，嵌入式css样式写在<head></head>之间。
c.外部式 也称为外联式，就是把css代码写在一个单独的外部文件中，以".css"为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
css样式文件名称以有意义的英文字母命名，如main.css
rel="stylesheet" type="text/css"是固定写法不可修改
<link>标签位置一般写在<head>标签之内
调用的css相对路径是否正确：
1、"/xxx.xx" 表示从网站根目录开始,即网站根目录下的xxx.xx文件
2、"./xxx.xx"表示本目录下的xxx.xx
3、"../xxx.xx"表示上一级目录中的xxx.xx，当然，"../../xxx.xx"表上上一级目录中的xxx.xx
4、"xxx/"表示当前目录下的xxx文件夹,也相当与"./xxx/"
优先级：就近原则
内联式 > 嵌入式 > 外部式
3.选择器
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式;
} 4.
标签选择器其实就是html代码中的标签
p{font-size:12px;line-height:1.6em;} 5.类选择器
.类选器名称{css样式代码;} 注意：
a、英文圆点开头
b、其中类选器名称可以任意起名（但不要起中文）
.stress{color:red;}/*类前面要加入一个英文圆点*/
<span class="stress">胆小如鼠</span> 6.ID选择器
a、为标签设置id="ID名称"，而不是class="类名称"。
b、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
#setGreen{
color:green;
}
<span id="setGreen">公开课</span>7.ID选择器和类选择器的区别
a、ID选择器只能在文档中使用一次
b、可以使用类选择器词列表方法为一个元素同时设置多个样式。
下面代码是正确的：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p> 下面代码是错误的：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p> 8.子选择器，即大于符号(>),用于选择指定标签元素的
第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
9.包含（后代）选择器，即加入空格,用于选择指定标签元素下的后辈元素。
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
举例地址：点击打开链接
10.通用选择器，使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;} 11.伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红
12.分组选择符，想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;} 13.权值，为同一个元素设置不同的css样式代码，根据权值决定启用哪一个。
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
14.设置最高权值
p{color:red!important;}
排版
1.字体
body{font-family:"Microsoft Yahei";}
2.字号、颜色
body{font-size:12px;color:#666} 3.粗体
p span{font-weight:bold;}
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
p a{font-style:italic;}
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
p a{text-decoration:underline;} 这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。（浏览器不支持） |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。
7.行间距
p{line-height:1.5em;} 8.字间距
汉字、字母间隔：
h1{
letter-spacing:50px;
}
单词间隔：
h1{
word-spacing:50px;
} 9.块状元素中的文本、图片设置对齐方式
h1{
text-align:center;
}
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
10.元素分类：块状元素、内联元素、内联块状元素
常用的块状元素有：
<div> <p> <h1> ...<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
常用的内联元素有：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用的内联块状元素：
<img> <input>
11.块状元素特点：
a.每个块状元素都从新的一行开始，并且其后的元素也另起一行。
b.元素的高度、宽度、行高及顶和底边距都可设置
c.元素宽度在不设置的情况下，是它本身父容器的100%
设置display:block就是将元素显示为块状元素
a{display:block;} 块状元素可以通过代码设置称为内联元素
display:inline
12.内联元素特点：
a.和其他元素都在一行上
b.元素的高度、宽度、及顶部和底边距不可设置
c.元素的宽度就是它包含的文字或者图片的宽度，不可改变
13.内联块状元素的特点：
a.和其他元素都在一行上
b.元素的高度、宽度、行高以及顶部和底边距都可以设置
display:inline-block
盒子模型
内边距：padding
外边距：margin
边框：border
都有4个方向
1.边框：可以设置 粗细、样式、颜色 三个属性
div{
border:2px solid red;
} or
div{
border-width:2px;
border-style:solid;
border-color:red;
} a.border-style常见样式有：dashed虚线、dotted点线、solid实线
b.border-color颜色可以设置为16进制颜色
border-color:#888;//前面的井号不要忘掉。c.border-width宽度也可以设置为thin、medium、thick，最常用的还是像素px
d.单独设置某一边框
div{border-bottom:1px solid red;}
border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;2.盒模型的宽度和高度
css内定义的宽和高指的是填充以里的内容范围
元素实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度同理
3.盒模型-填充
元素内容与边框之间设置的距离称之为“填充”。填充也分为上、右、下、左（顺时针）
div{padding:20px 10px 15px 30px;} 如果上右下左的填充都为10px
div{padding:10px;} 如果上下一样，左右一样
div{padding:10px 20px;}
CSS布局模型
1.流动模型
流动（flow）是默认的网页布局模式，网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型有2个比较典型的特征：
a.块状元素都会在所处的包含元素内自上而下安顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
b.流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
2.浮动模型
如果想让两个块状元素并排显示，设置元素浮动，如div、p、table、img等元素都可以被定义为浮动
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div> 3.层模型
层模型就像是PS中的图层编辑，没个图层嫩巩固精确定位操作，适合在网页局部使用。层模型有三种形式：
a.绝对定位（position:absolute）
b.相对定位（position:relative）
c.固定定位（position:fixed）
——绝对定位，需要设置position:absolute，这条语句将元素从文档流中拖出来，然后用left、right、top、bottom属性相对于其最近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如下面的带啊名实现div元素相对于浏览器窗口向右移动100px，向下移动50px
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div> 效果如下
——相对定位：position:relative相对于以前的位置移动。相对定位完成的过程是首先按照static（float）方式生成一个元素，然后相对于以前的位置移动，偏移前的位置保持不动。
理解起来就是 之前的位置跟普通网页一样，照常使用
——固定定位：position:fixed； 与absolute定位类型相似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。除非在屏幕中移动浏览器窗口的屏幕位置，或者改变浏览器窗口的显示大小，否则固定定位的元素始终会位于浏览器窗口视图内的某个位置，不会受文档流动的影响，拖动滚动条时位置固定不变。
个人感觉，就比如QQ最上面的导航栏
——relative与absolute组合使用：相对于其他元素进行定位 position:absolute
注意：
a.参照定位的元素必须是相对定位元素的前辈元素
b.参照定位的元素必须加入position:relative;
c.定位元素加入position:absolute 便可以使用top、bottom、left、right来进行偏移定位了
单位和值
1.颜色值
a.英文命令颜色
p{color:red;} b.RGB颜色
p{color:rgb(133,45,200);} or
p{color:rgb(20%,33%,25%);} c.十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法
p{color:#00ffff;}
2.长度值
a.像素：指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于像素作为单位。
b.em：就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px。
c.百分比
水平居中总结
1.不定宽块状元素
a.加入table标签
第一步：加入table标签
第二步：为这个table左右margin居中
html代码：
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>
b.设置display:inline方法，然后用text-align:center实现居中
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>
c.设置position:relative 和 left:50%
给父元素设置float，然后给父元素设置position:relative和left:50% 子元素设置position：relative和left:-50% 来实现居中
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
垂直居中总结
1.父元素高度确定的单行文本：通过设置父元素的height和line-height高度一致来实现
<div class="container">
hi,imooc!
</div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style> 2.父元素高度确定的多行文本
a.使用插入table标签，同时设置vertical-align：middle 说白了就是把文本内容放到表格里，再设置表格居中
css中用于数值居中的属性vertical-align，但这个样式只有在父元素为td或者th时，才会生效。所以需要插入table标签。
html代码：
<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body>
css代码：
table td{height:500px;background:#ccc} b.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式
同上
ml代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style> c.隐形改变display类型。
当元素设置以下2个句之一：
- position : absolute
- float : left 或 float:right
元素会自动变为以display:inline-block的方式显示
inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
