CSS详解
本文共 10616 字，大约阅读时间需要 35 分钟。
一、初识CSS
（一）什么是CSS
CSS概念：Cascading Style Sheet 层叠样式表
- 表现HTML文件样式的语言
- 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
（二）CSS的发展史
- 1996年 CSS1.0诞生
- 1998年 CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离。
- 2004年 CSS2.1 融入了更多高级的用法，如浮动，定位等。
- 2010年 CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展， 又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性， 但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势。
（三）CSS的优势
- 内容与表现分离
- 网页的表现统一 ， 容易修改
- 丰富的样式 ， 使得页面布局更加灵活
- 减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽
- 运用独立于页面的CSS ， 有利于网页被搜索引擎收录
- …
（四）CSS的基础语法
选择器{ 属性1：属性值;//声明1 属性2：属性值;//声明2 ...} 注意：CSS的最后一条声明后的";“可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束都要写上”;"。
（五）Style标签
Style 标签在HTML文档中的位置 ， 在<head> 和 </head> 之间
Title 我的标题一
我的标题二
运行：
（六）引入CSS的方式
（1）行内样式
使用style属性引入CSS样式
案例：
Title Hello,css
Hello,css
运行：
（2）内部样式表
CSS代码写在<head>的<style>标签中
案例：
Title Hello,world!
运行：
（3）外部样式表
准备工作：首先需要创建一个resources目录，在resources下创建css目录，在css目录下创建stylesheet样式表文件
1 、链接式
css文件：
/*.css文件声明选择器的样式*/div{ color: chocolate; font-size: 100px;} Title Hello,CSS!
运行：
2、导入式
Title Hello,CSS!
链接式与导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1- 使用
<link/>链接的CSS文件先加载到网页当中，再进行编译显示 - 使用
@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
CSS样式优先级（就近原则）
行内样式 > 内部样式表 > 外部样式表
案例： Style.css文件:div{ color: yellow; font-size: 100px;} Title Hello,CSS!
运行：
结论： 从结果我们可以发现根据就近原则，最后显示的颜色样式是用的行内声明的颜色样式，但是多的属性可以互相补充，例如Style.css中的font-size属性是其他两个样式没有的，但是仍能最终显示出来。 （七）CSS基础选择器
（1）标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>等等
格式：
选择器{ 属性1：属性值;//声明1 属性2：属性值;//声明2 ...} （2）类选择器
格式：
.class{属性：属性值；} <标签名 class="类名称"> 标签内容 案例：
Title 你好啊 初次见面
请多多指教好好学习,天天向上加油
运行：
（3）ID选择器
格式：
#id名字{属性：属性值；...} <标签名 class="类名称"> 标签内容 Title 哈哈
呵呵嘻嘻嗯嗯
运行：
小结： - 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
基本选择器的优先级
- ID选择器>类选择器>标签选择器
- 基本选择器不遵循 “ 就近原则 ”
案例：
Title 好好学习，天天向上
运行：
（八）CSS高级选择器
（1）层次选择器
假设有这样一个层次结构的网页：
a. 后代选择器
格式：E F{声明；}
body p{ background: red; } 
b. 子选择器
格式：E>F{声明；}
body>p{ background: pink; } 
c.相邻兄弟选择器
格式：E+F{声明；}
.active+p { background: green; } 
d.通用兄弟选择器
格式：E~F{声明；}
.active~p{ background: yellow; } 
案例： Title 1
2
3
-
4
-
5
-
5.1
-
5.2
-
5.3
-
-
6
-
7
8
9
10
11
12
运行：
通过结果我们看到body下的第一层p元素都是紫色，ul下所有p元素都是绿色，标记为a的第8行的p元素相邻兄弟（只向下）为黄色，标记为b的第10行的p元素的所有兄弟（只向下）都为红色。 （2）结构伪类选择器
- E:first-child 作为父元素的第一个子元素的元素E
- E:last-child 作为父元素的最后一个子元素的元素E
- E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
- E:first-of-type 选择父元素内具有指定类型的第一个E元素
- E:last-of-type 选择父元素内具有指定类型的最后一个E元素
- E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
例如：
ul li:first-child{ background: red;} ul li:last-child{ background: green;}p:nth-child(1){ background: yellow;} p:nth-of-type(2){ background: blue;} 
Title 标题
1
2
3
- li1
- li2
- li3
运行：
（3）属性选择器
- E[attr] 选择匹配具有属性attr的E元素
- E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小 写）
- E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，并且其属性值是以val开头的任意字符串
- E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，并且其属性值是以val结尾的任意字符串
- E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，并且其属性值包含了val，换句话说，字符串val与属性值中的任意位置相匹配
案例：
Title
运行：
二、CSS美化网页元素
（一）span和div标签
- span标签的作用
- 能让某几个文字或者某个词语凸显出来
- 行内元素
- div标签
- 块级元素
案例：
span标签 一寸 光阴一寸 金
寸金 难买寸光阴
运行：
（二）字体样式
| 属性名 | 含义 | 举例 |
|---|---|---|
| font-family | 设置字体类型 | font-family:“隶书”; |
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px “宋体”; |
（三）文本样式
| 属性 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00C; |
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置首行文本的缩进 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
| vertical-align | 设置文本对齐 | vertical-align ： middle |
（四）文本阴影
#a{ font-family: 楷体;}#b{ font-style: italic;}/* text-indent文本首行缩进 */.sj{ text-indent: 2em;}/* text-shadow文本阴影 */h1{ text-shadow: green -1px 1px 10px;} Title CSS（层叠样式表）
摘自： 百度百科
概念：层叠样式表(英文全称：Cascading Style Sheets)
是一种用来表现HTML（标准通用标记语言的一个应用） 或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地 对网页各元素进行格式化
运行：
（五）超链接伪类
| 伪类名称 | 含义 | 示例 |
|---|---|---|
| a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
| a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
| a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
设置伪类的顺序：a:link->a:visited->a:hover->a:active
案例：Title 点击进入...
运行：
鼠标悬停： 
（六）列表样式
- list-style-type
- list-style-image
- list-style-position
- list-style
案例：
Title
- 可乐
- 雪碧
- 康师傅
- 芬达
- 百岁山
运行：
（七）网页背景
- 背景颜色
- background-color
- 背景图片
- background-image
- 背景定位
- background-position属性
- 背景重复方式
- background-repeat
- 简写
- background 例如：
background:#C00 url(../image/kuangshen.jpg) 205px 10px no-repeat;
-
背景尺寸 ： background-size
- auto 默认值，使用背景图片保持原样
- percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
- cover 整个背景图片放大填充了整个元素
- contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
（八）CSS渲染渐变
- 线性渐变
- 颜色沿着一条直线过渡 ： 从左到右、从右到左、从上到下等
- 径向渐变
- 圆形或椭圆形渐变 ， 颜色不再沿着一条直线变化， 而是从一个起点朝所有方向混合
- 浏览器兼容性
| 属 性 名 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| Gradient | 10+ | 19.0+ | 26.0+ | 12.1+ | 5.1+ |
- IE浏览器是Trident内核，加前缀：-ms-
- Chrome浏览器是Webkit内核，加前缀：-webkit-
- Safari浏览器是Webkit内核，加前缀：-webkit-
- Opera浏览器是Blink内核，加前缀：-o-
- Firefox浏览器是Mozilla内核，加前缀：-moz-
语法：
兼容Webkit内核的浏览器 -webkit-linear-gradient ( position, color1, color2,…)
Title
三、盒子模型
（一）什么是盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
（二）边框
（1）边框颜色
| 属性 | 说明 | 示例 |
|---|---|---|
| border-top-color | 上边框颜色 | border-top-color:#369; |
| border-right-color | 右边框颜色 | border-right-color:#369; |
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
| border-left-color | 左边框颜色 | border-left-color:#efcd56; |
| border-color | 四个边框为同一颜色 | border-color:#eeff34; |
| boder-color | 上、下边框颜色：#369 左、右边框颜色：#000 | border-color:#369 #000; |
| border-color | 上边框颜色：#369左、右边框颜色：#000下边框颜色：#f00 | border-color:#369 #000 #f00; |
| border-color | 上、右、下、左边框颜色：#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
（2）边框粗细
border-width：边框粗细
- thin
- medium
- thick
- 像素值
（3）边框样式
border-style：边框样式
- none：默认无边框
- dotted：定义一个点线边框
- dashed：定义一个虚线边框
- solid：定义实线边框
- double：定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove：定义3D沟槽边框。效果取决于边框的颜色值
- ridge：定义3D脊边框。效果取决于边框的颜色值
- inset：定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset：定义一个3D突出边框。 效果取决于边框的颜色值
边框简写
- 同时设置边框的颜色 ， 粗细和样式 border:1px solid #3a6587; border: 1px dashed red; 等等
（4）外边距
- margin
- margin-top设置顶端外边距
- margin-right设置右端外边距
- margin-bottom设置底部外边距
- margin-left设置左端外边距
- margin
外边距妙用
-
网页居中对齐
margin:0px auto;
-
网页居中对齐的必要元素
- 块元素
- 固定宽度
（5）内边距
padding
- padding-left
- padding-right
- padding-top
- padding-bottom
- padding
（6）圆角边框
border-radius: 20px 10px 50px 30px;（四个属性值按顺时针排列）
border-radius：20px；（四个角属性值都为20px） （7）盒子阴影
（8）盒子总结演示
Title 边框演示
这是实线红色边框
这是实线绿色边框
细边框
中等宽度边框
粗边框
无边框
点线边框
虚线边框
实线边框
双边框
沟槽边框
脊边框
嵌入边框
突出边框
隐藏边框
圆角边框演示
盒子模型演示
这是内间距为30px，外间距为25px和35px的绿蓝色边框的盒子。盒子阴影演示
四、浮动
（一）标准文档流
标准文档流的组成
- 块级元素（block）
- h1~h6 、p 、 div 、列表
- 内联元素（inline）
- span 、 a 、 img 、 strong
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
（二）display属性
| 值 | 说明 |
|---|---|
| block | 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符 |
| inline | 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符 |
| inline-block | 行内块元素，元素既具有内联元素的特性，也具有块元素的特性 |
| none | 设置元素不会被显示 |
-
块级元素与行级元素的转变（block、inline）
-
控制块元素排到一行 （inline-block）
-
控制元素的显示和隐藏（none）
（三）块元素排在一行的方法
-
可以使用什么属性使块元素排在一行？
- inline-block 属性
- float属性
（四）浮动（float）
float属性
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 默认值。元素不浮动，并会显示在其文本中出现的位置 |
Title 哈哈哈哈哈哈哈啊哈
（五）边框塌陷
- 浮动元素脱离标准文档流
- 清除浮动
- clear属性
| 值 | 说明 |
|---|---|
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
（六）溢出处理
Overflow属性
| 属性值 | 说明 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在盒子之外 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
案例：
Title overflow 属性
hidden:
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。scroll:
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。auto:
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。visible (默认):
1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
运行：
（七）解决父级边框塌陷的方法
- 浮动元素后面加空div
- 简单，空div会造成HTML代码冗余
- 设置父元素的高度
- 简单，元素固定高会降低扩展性
- 父级添加overflow属性
- 简单，下拉列表框的场景不能用
- 父级添加伪类after
- 写法比上面稍微复杂一点，但是没有副作用，推荐使用
（八）inline-block和float的区别
- display:inline-block
- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
- 位置方向不可控制，会解析空格
- IE 6、IE 7上不支持
- float
- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
- float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父 级上添加清除浮动的样式
五、定位网页元素
（一）定位
position属性
- static ： 默认值，没有定位
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
（二）相对定位
-
相对定位的特性
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，它原来的位置会被保留下来
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
-
相对定位的使用场景
- 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
Title 正常位置
向左移动
向右移动
（三）绝对定位
- 绝对定位的特性
- 绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级， 则相对浏览器窗口来定位
- 元素位置发生偏移后，原来的位置不会被保留
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
- 设置绝对定位的元素脱离文档流
- 绝对定位的使用场景
- 一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别 花边等场景
案例：
Title 我的标题
用绝对定位,一个元素可以放在页面上的任何位置。 这个标题距离左边的页面100px和距离页面的顶部150px。
运行：
（四）固定定位
- 固定定位的特性
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
- 固定定位的使用场景
- 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶 导航栏等
Title 哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
（五）z-index属性
用于调整元素定位时重叠层的上下位置
- z-index属性值：整数，默认值为0
- 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
- z-index值大的层位于其值小的层上方
（六）网页元素透明度
| 属性 | 说明 | 举例 |
|---|---|---|
| opacity:x | x值为0~1，值越小越透明 | opacity:0.4; |
| filter:alpha(opacity=x) | x值为0~100，值越小越透明 | filter:alpha(opacity=40); |
转载地址：http://akwm.baihongyu.com/
你可能感兴趣的文章