本文深入讲解CSS的基础概念、使用方法及各种选择器的应用技巧。涵盖了层叠样式表的基本语法、文本样式化、定位方法等内容。
##CSS：指层叠样式表（Cascading Style Sheets）
-样式定义如何显示HTML元素 CSS就是给HTML化妆的
-样式通常存储在样式表中
##如何使用样式（CSS）、CSS的用法：属性与属性值之间用:连接，多对属性之间用;隔开（多对样式声明之间用;隔开）
HTML 页面有三种使用 CSS 样式表的方式：
-内联样式：
-当特殊的样式需要应用到个别元素时，就可以使用内联样式。
-使用内联样式的方法是在相关的标签中使用样式属性即style属性 。
-内部样式表：
-当单个文件需要特别样式时，就可以使用内部样式表。
-在<head></head>部分通过<style> </style>标签定义样式规则
-外部样式表
-当样式需要应用到很多页面的时候，就可以使用外部样式表。
-创建样式文件（.css文件） 文件中只能包含样式规则
-在<head></head>中引用样式文件：<link rel="stylesheet" href="文件名.css"/>
##CSS的语法规范
-CSS由多个样式规则组成，每个样式规则有两部分：选择器和样式声明
##CSS规则特性：
-继承性：父元素的CSS声明可以被子元素继承，如字体、颜色等
-层叠性：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加。
-优先级：同一个元素若存在多个CSS规则，对于冲突的的声明以优先级高者为准
##如何理解 CSS 样式表的层叠性。
答:CSS使用层叠（Cascade）的原则来考虑继承、层叠次序和优先级等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。
继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承。
层叠性是指，当一个Web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。
优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS 样式的优先级如下所示（其中数字3拥有最高的优先权）：
1、浏览器缺省设置；
2、外部样式表（.css 文件）或者内部样式表（位于<head>元素内部）；
3、内联样式（作为某个元素的style属性的值）。
同等优先级下，以最后定义的样式为准。
##CSS选择器：
-元素选择器 通过元素名来选择CSS作用的目标
-如果页面中有多个相同的元素需要重用同样的效果，建议使用元素选择器
如：p {样式声明}
-类选择器 在元素中定义class属性如<p class="page"></p> ；.page {样式声明}
-如果页面中有多个不同的元素需要重用同样的效果，建议使用类选择器
-类选择器可以结合元素选择器来使用：
<h1 class="important"></h1>
<p class="important"></p>
p.important {color:red;} --->class属性值为important的所有段落 h1元素不是段落元素而是标题元素
-id选择器 id是元素的唯一标识，根据id选择唯一的元素
#id {color:blue;}
-选择器组 写出多个选择器，浏览器会选中每个选择器所对应目标的并集
.important,#id,p {color:yellow;}
-派生选择器
-分为：后代选择器（子孙）和子元素选择器（子）
<p id="p1">
北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎</b>大厦B8
</p>
#p1 b {color:red} -->后代选择器：北三环 和 中鼎 将变成红色字体
#p1>b {color:red} -->子元素选择器：中鼎 将变成红色字体 （北三环是孙子辈了）
-伪类选择器 用于设置同一个元素在不同状态下的样式
-visited 向已被访问的超链接添加样式
-link 向未被访问的超链接添加样式
<a href="">链接</a>
a:link {}
a:visited {}
-active 向被激活（正在点击）的元素添加样式
<input type="button" id="b1">按钮</input>
#b1:active {color:red;} 点击按钮时，按钮会变红
-focus 当元素获取焦点时（光标在闪烁），向该元素添加样式
<input type="text" class="b">按钮</input> .b:focus {color:yellow;} 输入的时候，文本框会变黄
-hover 当鼠标悬停至元素上方时，向该元素添加样式 例： <img src=""/> img:hover {width:300px;height:400px;}
####CSS声明
-border属性：用来设置元素的边框
-单边设置 border-left:宽度 形状 颜色 （border-right、border-top、border-bottom）
border-left:10px solid red; dashed-->虚线 solid-->实线
-四边设置 border:宽度 形状 颜色
-当内容溢出元素框时如何处理：
-overflow:
-visible
-hidden
-auto 只有上下滚动条
-scroll 有上下、左右滚动条 与auto之间基本没什么区别
-box
-框模型（Box model）定义了元素框处理元素内容、内边距、边框与外边距的方式
-width/height指内容区域的宽度和高度
-增加内边距padding、边框border、外边距margin不会影响内容区域的尺寸，但会增加元素框的总尺寸
-内边距、外边距的设置方式：
-四边设置相同的边距：
padding:20px;
margin:50px;
-四边设置不同的边距：(上右下左的顺序设置)
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px;
-单边设置边距
padding-left:30px;
margin-top:40px;
-对边设置边距：（上下 左右）
padding:20px 40px;
margin:40px 20px;
-对边设置的特殊用法：当使用这种方式设置margin时，若左右的值为auto，则该元素会水平居中。
-背景
background-color：用于为元素设置背景色
background-image: 用于设置背景图片
background-image:url(背景图片路径) 可以使相对路径和绝对路径
background-repeat：控制背景图片的平铺效果
background-repeat:no-repeat 仅显示一次
repeat-x 仅在水平方向重复显示
repeat-y 仅在垂直方向重复显示
repeat 在垂直和水平方向重复
background-position：用于改变背景图片在元素中的位置
background-position:left 在页面或者包含元素的左边显示
right 在页面或者包含元素的右边显示
top 在页面或者包含元素的顶部边显示
bottom 在页面或者包含元素的底部显示
center 在页面或者包含元素的中间显示
X Y 相对于左上角 左上角为0 0
X% Y% 同理
background-attachment：设置背景图片是否随着页面的滚动而移动 默认状态时随着页面的滚动而移动
background-attachment:scroll 默认状态，随着页面的滚动而移动
fixed 背景图片固定，并不会随着页面的其余部分滚动
简化的方式设置背景：
background:颜色 图片 平铺 位置
上述四个值可以酌情省略，但至少要保留颜色或图片中的任意一个值。
****选择器有优先级，其中派生选择器优先级最高，其次是ID选择器。
派生选择器的优先级要高于id选择器
##文本格式化
-控制文本
-指定字体:font-family:value1,value2,...;例子：font-family:"微软雅黑","文泉驿正黑","黑体";
-字体大小:font-size:**px;字体一般去14-16px
-字体加粗:font-weight:normal/bold;
-控制文本格式
-文本颜色color:value;
-文本排列text-align:left/right/center;
-文本修饰text-decoration:none/underline;
-行高line-height:value;一般去字体大小的1.6倍，即1.6em
-首行文本缩进text-indent:value;一般缩进两个字体，即2em
前提：
-元素的高度会自适应，其高度是流（队伍）中元素高度的总和
-无论如何，浏览器都会将文本显示出来不会被遮挡
##流(队伍)定位：
-元素默认布局方式
-块级元素从上向下排列：div p h ol ul table 等
-行内元素从左向右排列: span a img input 等
##浮动定位：（参考day04 demo1.html）
-可以让块左右排列
-浮动定位分2种：左浮动 右浮动
-浮动的目标将脱离流（队伍）
# 浮动的步骤：
-目标离队
-弟弟跟上
-浮动到对应的位置
#右浮动：让块按照倒序左右排列
#左浮动：让块按照正序左右排列
#消除浮动影响：
-消除对叔叔的影响：clear:left/right/both
-消除对父亲的影响：
-在父元素中加一个空块
-在这个块上设置消除浮动影响
结论：由于新块消除影响后出现在浮动块的下方，而它还处于流中，撑开了父亲的高度
##相对定位：相对于自己产生偏移
-以自己原始的位置为目标
-不脱离队伍（流）
position:relative;
left:2px;
top:-2px;
##绝对定位：相对于父亲产生偏移
-以带有position的父辈为目标
若都没有position，则以body为目标
-脱离队伍（流）
##固定定位：相对于窗口设置偏移（例子：页面中的广告）
-以窗口为目标设置偏移
-目标脱离队伍（流）
-元素会固定在窗口上，不会随着滚动条滚动而滚动
position:fixed
#相对、绝对、固定定位：
-他们都可以以某目标为准，设置偏移
-目标是不同的
-设置偏移的方式相同
##元素的显示方式
-块元素
-有宽高、独立成行（垂直排列）
-hn p div ol ul table
-行内元素
-没有宽高、不独立成行（横向排列）
-span b strong i em u del a
-行内块
-有宽高、不独立成行（横向排列）
-img input textarea select
##堆叠顺序
-一旦修改了元素的定位方式，元素可能会发生重叠
-可以使用z-index属性来控制元素框重叠的顺序
-z-index:value; value为数值，值越大表示堆叠顺序更高，离用户更近。可以为负值，表示离用户更远
##列表样式
-list-style-type:value; 该属性用于控制列表中列表项标志的样式
-ol有序列表取值：默认decimal(数字)、none（无标记）、upper-roman(大写的罗马数字)、lower-roman（小写的罗马数字）等
-ul无序列表取值:默认disc(实心圆)、none（无标记）、circle(空心圆)、square(实心方块)
-list-style-image:url(); 该属性使用图像来替换列表项（有序或无序均可）的标记
##修改显示方式
-display:block;块
-display:inline;行内
-display:inline-block;行内块
-display:none;隐藏此元素，释放其占有的位置
-常用的是：行内改为块、行内改为行内块
-样式定义如何显示HTML元素 CSS就是给HTML化妆的
-样式通常存储在样式表中
##如何使用样式（CSS）、CSS的用法：属性与属性值之间用:连接，多对属性之间用;隔开（多对样式声明之间用;隔开）
HTML 页面有三种使用 CSS 样式表的方式：
-内联样式：
-当特殊的样式需要应用到个别元素时，就可以使用内联样式。
-使用内联样式的方法是在相关的标签中使用样式属性即style属性 。
-内部样式表：
-当单个文件需要特别样式时，就可以使用内部样式表。
-在<head></head>部分通过<style> </style>标签定义样式规则
-外部样式表
-当样式需要应用到很多页面的时候，就可以使用外部样式表。
-创建样式文件（.css文件） 文件中只能包含样式规则
-在<head></head>中引用样式文件：<link rel="stylesheet" href="文件名.css"/>
##CSS的语法规范
-CSS由多个样式规则组成，每个样式规则有两部分：选择器和样式声明
##CSS规则特性：
-继承性：父元素的CSS声明可以被子元素继承，如字体、颜色等
-层叠性：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加。
-优先级：同一个元素若存在多个CSS规则，对于冲突的的声明以优先级高者为准
##如何理解 CSS 样式表的层叠性。
答:CSS使用层叠（Cascade）的原则来考虑继承、层叠次序和优先级等重要特征，从而判断相互冲突的规则中哪个规则应该起作用。
继承性是指，许多CSS的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承。
层叠性是指，当一个Web页面使用多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。
优先级是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。CSS 样式的优先级如下所示（其中数字3拥有最高的优先权）：
1、浏览器缺省设置；
2、外部样式表（.css 文件）或者内部样式表（位于<head>元素内部）；
3、内联样式（作为某个元素的style属性的值）。
同等优先级下，以最后定义的样式为准。
##CSS选择器：
-元素选择器 通过元素名来选择CSS作用的目标
-如果页面中有多个相同的元素需要重用同样的效果，建议使用元素选择器
如：p {样式声明}
-类选择器 在元素中定义class属性如<p class="page"></p> ；.page {样式声明}
-如果页面中有多个不同的元素需要重用同样的效果，建议使用类选择器
-类选择器可以结合元素选择器来使用：
<h1 class="important"></h1>
<p class="important"></p>
p.important {color:red;} --->class属性值为important的所有段落 h1元素不是段落元素而是标题元素
-id选择器 id是元素的唯一标识，根据id选择唯一的元素
#id {color:blue;}
-选择器组 写出多个选择器，浏览器会选中每个选择器所对应目标的并集
.important,#id,p {color:yellow;}
-派生选择器
-分为：后代选择器（子孙）和子元素选择器（子）
<p id="p1">
北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎</b>大厦B8
</p>
#p1 b {color:red} -->后代选择器：北三环 和 中鼎 将变成红色字体
#p1>b {color:red} -->子元素选择器：中鼎 将变成红色字体 （北三环是孙子辈了）
-伪类选择器 用于设置同一个元素在不同状态下的样式
-visited 向已被访问的超链接添加样式
-link 向未被访问的超链接添加样式
<a href="">链接</a>
a:link {}
a:visited {}
-active 向被激活（正在点击）的元素添加样式
<input type="button" id="b1">按钮</input>
#b1:active {color:red;} 点击按钮时，按钮会变红
-focus 当元素获取焦点时（光标在闪烁），向该元素添加样式
<input type="text" class="b">按钮</input> .b:focus {color:yellow;} 输入的时候，文本框会变黄
-hover 当鼠标悬停至元素上方时，向该元素添加样式 例： <img src=""/> img:hover {width:300px;height:400px;}
####CSS声明
-border属性：用来设置元素的边框
-单边设置 border-left:宽度 形状 颜色 （border-right、border-top、border-bottom）
border-left:10px solid red; dashed-->虚线 solid-->实线
-四边设置 border:宽度 形状 颜色
-当内容溢出元素框时如何处理：
-overflow:
-visible
-hidden
-auto 只有上下滚动条
-scroll 有上下、左右滚动条 与auto之间基本没什么区别
-box
-框模型（Box model）定义了元素框处理元素内容、内边距、边框与外边距的方式
-width/height指内容区域的宽度和高度
-增加内边距padding、边框border、外边距margin不会影响内容区域的尺寸，但会增加元素框的总尺寸
-内边距、外边距的设置方式：
-四边设置相同的边距：
padding:20px;
margin:50px;
-四边设置不同的边距：(上右下左的顺序设置)
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px;
-单边设置边距
padding-left:30px;
margin-top:40px;
-对边设置边距：（上下 左右）
padding:20px 40px;
margin:40px 20px;
-对边设置的特殊用法：当使用这种方式设置margin时，若左右的值为auto，则该元素会水平居中。
-背景
background-color：用于为元素设置背景色
background-image: 用于设置背景图片
background-image:url(背景图片路径) 可以使相对路径和绝对路径
background-repeat：控制背景图片的平铺效果
background-repeat:no-repeat 仅显示一次
repeat-x 仅在水平方向重复显示
repeat-y 仅在垂直方向重复显示
repeat 在垂直和水平方向重复
background-position：用于改变背景图片在元素中的位置
background-position:left 在页面或者包含元素的左边显示
right 在页面或者包含元素的右边显示
top 在页面或者包含元素的顶部边显示
bottom 在页面或者包含元素的底部显示
center 在页面或者包含元素的中间显示
X Y 相对于左上角 左上角为0 0
X% Y% 同理
background-attachment：设置背景图片是否随着页面的滚动而移动 默认状态时随着页面的滚动而移动
background-attachment:scroll 默认状态，随着页面的滚动而移动
fixed 背景图片固定，并不会随着页面的其余部分滚动
简化的方式设置背景：
background:颜色 图片 平铺 位置
上述四个值可以酌情省略，但至少要保留颜色或图片中的任意一个值。
****选择器有优先级，其中派生选择器优先级最高，其次是ID选择器。
派生选择器的优先级要高于id选择器
##文本格式化
-控制文本
-指定字体:font-family:value1,value2,...;例子：font-family:"微软雅黑","文泉驿正黑","黑体";
-字体大小:font-size:**px;字体一般去14-16px
-字体加粗:font-weight:normal/bold;
-控制文本格式
-文本颜色color:value;
-文本排列text-align:left/right/center;
-文本修饰text-decoration:none/underline;
-行高line-height:value;一般去字体大小的1.6倍，即1.6em
-首行文本缩进text-indent:value;一般缩进两个字体，即2em
前提：
-元素的高度会自适应，其高度是流（队伍）中元素高度的总和
-无论如何，浏览器都会将文本显示出来不会被遮挡
##流(队伍)定位：
-元素默认布局方式
-块级元素从上向下排列：div p h ol ul table 等
-行内元素从左向右排列: span a img input 等
##浮动定位：（参考day04 demo1.html）
-可以让块左右排列
-浮动定位分2种：左浮动 右浮动
-浮动的目标将脱离流（队伍）
# 浮动的步骤：
-目标离队
-弟弟跟上
-浮动到对应的位置
#右浮动：让块按照倒序左右排列
#左浮动：让块按照正序左右排列
#消除浮动影响：
-消除对叔叔的影响：clear:left/right/both
-消除对父亲的影响：
-在父元素中加一个空块
-在这个块上设置消除浮动影响
结论：由于新块消除影响后出现在浮动块的下方，而它还处于流中，撑开了父亲的高度
##相对定位：相对于自己产生偏移
-以自己原始的位置为目标
-不脱离队伍（流）
position:relative;
left:2px;
top:-2px;
##绝对定位：相对于父亲产生偏移
-以带有position的父辈为目标
若都没有position，则以body为目标
-脱离队伍（流）
##固定定位：相对于窗口设置偏移（例子：页面中的广告）
-以窗口为目标设置偏移
-目标脱离队伍（流）
-元素会固定在窗口上，不会随着滚动条滚动而滚动
position:fixed
#相对、绝对、固定定位：
-他们都可以以某目标为准，设置偏移
-目标是不同的
-设置偏移的方式相同
##元素的显示方式
-块元素
-有宽高、独立成行（垂直排列）
-hn p div ol ul table
-行内元素
-没有宽高、不独立成行（横向排列）
-span b strong i em u del a
-行内块
-有宽高、不独立成行（横向排列）
-img input textarea select
##堆叠顺序
-一旦修改了元素的定位方式，元素可能会发生重叠
-可以使用z-index属性来控制元素框重叠的顺序
-z-index:value; value为数值，值越大表示堆叠顺序更高，离用户更近。可以为负值，表示离用户更远
##列表样式
-list-style-type:value; 该属性用于控制列表中列表项标志的样式
-ol有序列表取值：默认decimal(数字)、none（无标记）、upper-roman(大写的罗马数字)、lower-roman（小写的罗马数字）等
-ul无序列表取值:默认disc(实心圆)、none（无标记）、circle(空心圆)、square(实心方块)
-list-style-image:url(); 该属性使用图像来替换列表项（有序或无序均可）的标记
##修改显示方式
-display:block;块
-display:inline;行内
-display:inline-block;行内块
-display:none;隐藏此元素，释放其占有的位置
-常用的是：行内改为块、行内改为行内块
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
