- css介绍
- css是什么
- css作用
- css书写规则
- 基本语法
- 导入css
- 内联样式表
- 内部样式表
- 外部样式表
- import导入
- css选择器
- id选择器
- 类选择器
- 元素选择器
- 伪类
- 2文本属性
- 3背景属性
- 注意
- CSS 背景属性
- 列表属性
- 尺寸属性
- 表格属性
- 鼠标属性cursor
- 显示属性
- 轮廓
- 盒子模型
- 边框
- 外边距
- 内边距
- 定位
- 浮动属性
css介绍
1. css是什么
CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
2.css作用
- 样式表解决了html的内容与表现分离
- 使用样式表极大的提高了工作效率。
3.css书写规则
基本语法 ###
Css规则主要由两部分组成
1.选择器
2.一条或多条声明
选择器作用：是为了确定需要改变样式的HTML元素
声明：每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开 
值的单位
颜色
书写注意事项
1. 如果值为若干单词，则要给值加引号
2. 多个声明之间使用分号(;)分开
3. css对大小写不敏感,如果涉及到与html文档一起使用时，class与id名称对大小写敏感
导入css
我们介绍以下几种导入css方式:
内联样式表
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性
例如:
<div style=”border:1px solid black”>这是一个DIV</div> 注意:慎用这种方式，它将内容与显示混合在一起，损失了样式表的优势。一般情况下，这种方式只有在一个标签上只应用一次样式时才会使用
内部样式表
我们可以使用<style>标签在html文档的<head>中来定义样式表。
<html>
<head>
<style type="text/css">
hr{color:red}
</style>
</head>
<body>
<hr/>
<div style="border:1px solid black">这是一个div</div>
</html>这种方式，样式只适合应用于一个页面
外部样式表
如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。
我们可以在html页面上使用<link>标签来导入外部样式表。
例如:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<hr/>
<div>这是一个div</div>
</html>浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。
外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。
下面是mystyle.css文件的内容:
hr{color:red}
div{border:1px solid black}@import导入
这种方式也是外部导入。
使用方式如下：
<html>
<head>
<link type="text/css" @import "mystyle.css">
</head>
<body>
<hr/>
<div style="border:1px solid black">这是一个div</div>
</html>关于@import与引用外部样式表的区别:
1.@import这种方式只有firefox支持，而ie不支持。
2.@import这种方式导入的css，会在整个页面加载后，才会加载样式。如果网络不好情况下，会先看到无样式修饰的页面，闪烁一下后，才会看到有样式修饰的页面。
而使用外部样式表，会先装载样式表，这样看到的就是有样式修饰的页面。
3.@import不支持通过javascript修改样式，而link支持。
优先级问题
内联样式表>内部样式表>外部样式表
css选择器
css选择器主要是用于选择需要添加样式的html元素。
对于css来说，它的选择器有很多，我们主要介绍以下几种:
id选择器
Id选择器使用#引入，它引用的是id属性中的值。
首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则：
*#intro {font-weight:bold;}与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}/** 这个选择器的效果将是一样的。第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子：
<p id="intro">This is a paragraph of introduction.</p>类选择器
类选择器使用时,需要在类名前加一个点号(.)
该选择器可以单独使用，也可以与其他元素结合使用。
提示：
只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
元素选择器
这是最常见的选择器，简单说，文档中的元素就是选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
属性选择器
如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
* a[href] {color:red;}*
例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
例子 4
可以采用一些创造性的方法使用这个特性。
例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
提示：
上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。
例子 5：为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：
planet[moons] {color:red;}
这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>
伪类
css伪类用于向某些选择器添加特殊效果。
下面我们介绍一下锚伪类。
在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。
伪类的语法：
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式。 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
| :link | 向未被访问的链接添加样式。 |
| :visited | 向已被访问的链接添加样式。 |
| :first-child | 向元素的第一个子元素添加样式。 |
2、文本属性
- color:颜色
- line-height：行高
- text-decoration ：文本装饰
属性值
- none
- underline 会对元素加下划线
- overline
- line-through
- blink
属性值：none underline
- text-align:对齐方式
属性值：left center right
<div>hello css!!!</div>
<a href="#">click me!!!</a>
<style type="text/css">
div{color:red;text-decoration: underline;text-align: right }
a{text-decoration: none;}
</style>- text-indent：文本缩进
所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
3、背景属性
- background:简写属性
属性值： 颜色 url 平铺方式 移动位置（left top）
- background-color:背景颜色
- background-image:背景图片
属性值：url(“图片地址”);
- background-repeat:平铺方式
属性值：默认横向纵向平铺
- repeat:横向纵向平铺
- no-repeat:不平铺
- repeat-y：纵向
- repeat-x：横向
body{
background-color: black;
background-image: url(“images/dog.gif”);
background-repeat: repeat-y;
}
注意：
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }
CSS 背景属性
属性 描述
- background 简写属性，作用是将背景属性设置在一个声明中。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
- background-color 设置元素的背景颜色。
- background-image 把图像设置为背景。
- background-position 设置背景图像的起始位置。
- background-repeat 设置背景图像是否及如何重复。
列表属性
- list-style-type:列表项前的小标志
属性值：太多了
无序列表时：
none： 无标记
disc：实心圆，为默认的
circle：空心圆
square：实心方块
有序列表时
none： 无标记
decimal：数字（1,2,3）默认lower-roman：小写罗马数字
upper-roman：大写罗马数字
- list-style-image:列表项前的小图片
属性值：url(“图片地址”);
<ul>
<li>程序员</li>
<li>程序员</li>
<li>程序员</li>
<li>程序员</li>
</ul>
<style type="text/css">
/* ul{list-style-type: decimal-leading-zero;} */
ul{list-style-image: url("images/forward.gif");}
</style>尺寸属性
- width:宽度
- height:高度
表格属性
- border-collapse ：折叠边框
属性设置是否将表格边框折叠为单一边框
- text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
CSS Table 属性
| 属性 | 描述 |
|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 |
| border-spacing | 设置分隔单元格边框的距离。 |
| caption-side | 设置表格标题的位置。 |
| empty-cells | 设置是否显示表格中的空单元格。 |
| table-layout | 设置显示单元、行和列的算法。 |
鼠标属性（cursor）
cursor属性定义了鼠标指针的放在一个元素边界范围内时所用的光标形状
属性值
- default
- pointer
- crosshair
- text
- wait
- help等
显示属性
- display:
属性值：
- none:隐藏
- block:块级显示
- inline：行级显示
<form action="">
name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
<br>
pass:<input id="pass" type="password" />
<br>
<input id="btn" type="button" value="button" />
</form>
<style type="text/css">
span{color:red;display: none}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性:
- outline:在一个声明中设置所有的轮廓属性
- outline-color:定义轮廓的颜色
- outline-style:定义轮廓的样式
- outline-width:定义轮廓的宽度
盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
常用属性:
- border:简写属性，用于把针对于四个边的属性设置在一个声明。
- border-color:简写属性，定义元素边框中可见部分的颜色，或为四个边分别设置颜色。
- border-style:用于定义所有边框的样式，或者单独为各边设置边框样式。
- border-width:简写属性，用于为元素的所有边框设置宽度，或则单独地为各边边框设置宽度
- border-top:简写属性，用于把上边框的所有属性设置到一个声明中
- border-right:简写属性，用于把右边框所有属性设置到一个声明中
- border-bottom:简写属性，用于把下边框的所有属性设置到一个声明中
- border-left:简写属性，用于把左边框的所有属性设置到一个声明中。
外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
常用属性:
- margin:简写属性，在一个声明中设置所有外边距属性
- margin-top:定义元素的上外边距
- margin-right:定义元素的右外边距
- margin-bottom:定义元素的下外边距
- margin-left定义元素的左外边距
注意:在使用margin来定义所有外边距时，可以使用值复制。- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
常用属性:
- padding:简写属性，作用是在一个声明中设置元素的所有内边距属性
- padding-top:定义元素的上内边距
- padding-right:定义元素的右内边距
- padding-bottom:定义元素的下内边距
- padding-left:定义元素的左内边距。
定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
常用属性:
- position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
- top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
- right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
- left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
- bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
浮动属性
float:
属性值：
- left
- right
- clear:清除浮动 left right both
缺点 ：
- (1)影响相邻元素不能正常显示
- (2)影响父元素不能正常显示