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:平铺方式

属性值：默认横向纵向平铺
1. repeat:横向纵向平铺
2. no-repeat:不平铺
3. repeat-y：纵向
4. 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)影响父元素不能正常显示

css基础（精英版）