1 CSS入门
1.1定义
CSS（Cascading Style Sheet 层叠样式表） 简称，样式。
主要负责网页的美观。
1.2css的使用方式
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
|
<a href="xxxx" style="font-size:24px;">超链接</a> |
2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
|
<style type="text/css"> a{ font-size:24px; color:#0F0; } </style> |
3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
|
<!-- 导入外部css文件 href : 表示外部css文件的位置 rel: 表示关联的是样式表 --> <link href="01.css" rel="stylesheet"/> |
2 CSS语法
|
a{ font-size:24px; color:#F00; } |
选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....
CSS值（value）：添加样式的具体值。12px , 红色，背景图片....
2.1 选择器
标签选择器
作用： 选择同名的标签
|
div{ font-size:24px; color:#F00; } |
注意：
1）选择到所有同名的标签
类选择器
作用： 选择同类的标签
|
/*类选择器*/ .c1{ font-size:24px; color:#F00; } |
注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！
id选择器
作用： 选择一个标签
|
#d1{ font-size:24px; color:#0F0; } |
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
3）id选择器的优先级最高！
并集选择器
|
/*并集选择器*/ .c1,#d1{ font-size:24px; color:#0F0; } |
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。
交集选择器
|
/*交集选择器 div里面的span标签 */ .c1 span{ font-size:24px; color:#0F0; } |
作用： 选择某个选择器中的子标签。
通用选择器
|
/*通用选择器*/ *{ font-size:24px; color:#0F0; } |
作用； 选择所有的标签
伪类选择器
作用：控制标签在不同状态下的样式。
标签有四种状态：
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活（按下但没有松开）的状态
visited: 已经被访问过的状态（鼠标点下且松开）
|
<style type="text/css"> /*使用link伪类控制--没有访问过的状态*/ a:link{ font-size:24px; color:#F00; } /*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/ a:visited{ font-size:24px; color:#CCC; text-decoration:none; } /*使用hover伪类控制-鼠标经过的状态*/ a:hover{ font-size:24px; color:#00F; text-decoration:none; } /*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/ a:active{ font-size:24px; color:#0F0; text-decoration:underline; } /*注意： 1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有 效的。 正确顺序： link visited hover active */ </style> </head> <body> <a href="01.css入门.html">超链接</a> </body> </html> |
2.2 常用的CSS属性和值
CSS文本
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css文本</title> <style type="text/css"> body{ /*color：颜色*/ color:#F00; /*字符间距*/ letter-spacing:10px; /*对齐方式*/ text-align:center; /*文本修饰 下划线-underline， 中划线(line-through) 上划线-overline 没有:none*/ text-decoration:line-through; /*单词间距*/ word-spacing:30px; } </style> </head> <body> 今天 天气 不错！ </body> </html> |
CSS字体
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css字体</title> <style type="text/css"> body{ /*字体类型 注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。 */ /* font-family:"宋体"; */ /*字体大小*/ /* font-size:24px; */ /*字体样式: 正(normal默认) 斜(italic)*/ /* font-style:italic; */ /*字体粗细 bold 加粗*/ /* font-weight:bold; */ /* font: 简写属性 必须包括大小与字体属性 不然无法显示*/ font:italic bold 36px "黑体"; } </style> </head> <body> 百度云盘 </body> </html> |
CSS背景
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css背景</title> <style type="text/css"> body{ /*背景颜色*/ /* */ /*背景图片*/ /* background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg); */ /*设置背景图片是否重复，或如何重复 not-repeat: 不重复 repeat-x: x轴重复 repeat-y: y轴重复 repeat: x和y轴重复(默认) */ /* background-repeat:no-repeat; */ /*设置背景的起始位置*/ /* background-position:top center; */ /*简写属性*/ background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center; } </style> </head> <body> </body> </html> |
CSS列表
|
ul{ /*列表符号类型*/ list-style-type:none; /*设置列表符号的图片*/ list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg); } |
CSS表格
|
table{ /*合并表格的边框*/ border-collapse:collapse; } |
CSS边框
|
div{ /*边框颜色*/ /*简写属性 1) 默认设置方向属性： 上 右 下 左 2）如果当前方向没有设置颜色，那么取对面的颜色 */ /* border-color:#F00; */ /* border-left-color:#F00; border-right-color:#0F0; border-top-color:#00F; border-bottom-color:#C90; */ /*边框宽度*/ /*简写属性 */ /* border-10px; */ /* border-left-10px; border-right-20px; border-top-30px; border-bottom-40px; */ /*边框样式(注意： 边框只有加了border-style才会显示出来) solid: 单实线 dashed:虚线 dotted: 点 double: 双实线 */ /*简写属性*/ /* border-style:solid; */ /* border-left-style:solid; border-right-style:dashed; border-top-style:dotted; border-bottom-style:double; */ /*所有边框属性的简写属性*/ border:2px solid #F00; } |
3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离
4 CSS定位
5 DIV块元素
div 标签是用来为HTML文档内大块内容提供结构和背景的元素.div 可定义文档中的分区或节(division/section)。div标签可以把文档分割为独立的、不同的部分。
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的实现效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
简单理解:div+css
div 是存放内容(文字,图片,元素)的容器.
Css是用于指定存放在div中的内容如何显示的样式。
行内元素
• span
块元素
• div
布局
• table
• div