CSS

#### 第一章 CSS简介

##### 1.1 什么是CSS
1. CSS :全称：Cascading Style Sheets  层叠样式表,定义如何显示HTML元素
2. 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的
   应用优先级高的，不冲突的共同作用

##### 1.2 CSS能干什么
1. 修饰美化html网页。
2. 外部样式表可以提高代码复用性从而提高工作效率。
3. html内容与样式表现分离，便于后期维护。

##### 1.3 CSS书写规范

​        CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明.

​               a. 选择器通常是您需要改变样式的 HTML 元素。

​               b. 每条声明由一个属性和一个值组成。

​     **基础语法：选择器｛属性：值;属性:值….. ｝**

​        p{color:red}

​          **提示：请使用花括号来包围声明。**
 2.注意事项：
        a.如果值为若干单词，则要给值加引号；
        b.多个声明之间使用分号;分开；
        c.css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

#### 第二章 CSS导入方式

##### 2.1 内嵌方式(内联方式)
 把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：
       <div style="color:blue;font-size:50px">This is my HTML page. </div>

##### 2.2 内部方式
在head标签中使用style标签引入css,示例如下:
       <style type=“text/css”> //告诉浏览器使用css解析器去解析
            div{color:red;font-size:50px}
       </style>

##### 2.3 外部方式
  将css样式抽成一个单独文件，谁用谁就引用，示例如下：
       单独文件div.css:  内容示例：div{color:green;font-size:50px}
       引用语句写在head标签内部，
<link rel="stylesheet" type="text/css" href=“div.css"></link>
      rel:代表当前页面与href所指定文档的关系
      type:文件类型，告诉浏览器使用css解析器去解析
      href:css文件地址

##### 2.4 @import方式
  <style type="text/css">
       @import url("div.css")
  </style>
 该内容放在head标签中
 备注:link和@import区别：
           1.link所有浏览器都支持，@import某些版本低的IE不支持
           2.@import是等待html加载完成才加载
           3.@import不支持js动态修改

#### 第三章 CSS选择器

 主要用于选择需要添加样式的html元素

##### 3.1 基本选择器

######         3.1.1 元素选择器

​                  在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}，

 具体示例如下: 
  <style type="text/css">
         span{color: red;font-size: 100px}
  </style>    对span标签进行样式修改

######       3.1.2 id选择器

​                给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}
具体示例如下:
    创建id选择器：
        <div id="s1">hello,everyone!</div>
        <div id="s2">hello,everyone!</div>
         <div id="s3">hello,everyone!</div>
         根据id选择器进行html文件修饰 
        <style type="text/css">
              #s1{color: red;font-size: 100px}
              #s2{color: green;font-size: 100px}
              #s3{color: blue;font-size: 100px}
        </style>
```

######        3.1.3 class选择器

​                      给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器:  .class名{属性:属性值}，具体示例如下:
创建class选择器：
           <div class="s1">hello,everyone!</div>
           <div class="s2">hello,everyone!</div>
           <div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 
<style type="text/css">
          .s1{color: purple;font-size: 100px}
          .s2{color: pink;font-size: 100px}
          .s3{color: yellow;font-size: 100px}
</style>
```

​    **备注:以上基本选择器的优先级从高到低:id ,class ,元素**

##### 3.2 属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明, 
格式为:htm标签[属性=‘属性值']{css属性:css属性值;}
    或者html标签[属性]{css属性:css属性值;}， 
具体示例如下:
body内容：
     <form name="login" action="#" method="get">
        <font size="3">用户名：<font> 
         <input type=“text" name="username" value="zhangsan"></input> </br>
      密码： <input type="password" name="password" value="123456"></input> </br>
            <input   type="submit" value="登录"></input>
    </form>

 head中书写：
<style type="text/css">
        input[type='text'] {
            background-color: pink
        }
        input[type='password'] {
            background-color: yellow
        }
        font[size] {
            color: green
        }
        a[href] {
            color: blue;
        }
</style>
```

##### 3.3 伪元素选择器

 主要是针对a标签
语法：
              静止状态 a:link{css属性}
              悬浮状态 a:hover{css属性}
              触发状态 a:active{css属性}
              完成状态  a:visited{css属性}
具体示例如下：
   <a href="https://hao.360.cn/">点我吧</a>
        <style type="text/css">
            <!--静止状态 -->
            a:link {color: red;}
            <!--悬浮状态 -->’
            a:hover {color: green;}
            <!--触发状态 -->
            a:active {color: yellow;}
            <!--完成状态 -->
            a:visited {color: blue;}
        </style>

##### 3.4 层级选择器

 父级选择器，子级选择器….,具体示例如下：

html
  <div id="div1">
            <div class="div11">
                <span>span1-1</span>
            </div>
            <div class="div12">
                <span>span1-2</span>
            </div>
        </div>
        <div class="div2">
            <div id="div22">
                <span>span2-1</span>
            </div>
            <div id="div23">
                <span>span2-2</span>
            </div>
        </div>

        <style type="text/css">
            #div1 .div11{color:red;}
            #div1 .div12{color:purple;}
            .div2 #div22{color:green;}
            .div2 #div23{color:blue;}
        </style>
```

#### 第四章 CSS属性

##### 4.1 文字属性
1>.font-size:设置字体大小
2>.font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等
3>.font-style:规定斜体字,常见的值：
                                normal - 文本正常显示
                                italic - 文本斜体显示
                                oblique - 文本倾斜显示
4>font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。
                                100 对应最细的字体变形，900 对应最粗的字体变形。
                                数字 400 等价于 normal，而 700 等价于 bold。
      备注：
      斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。
      倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样

##### 4.2 文本属性
1>.color:设置文本颜色
2>.text-indent:缩进元素中文本的首行,取值类型如下：
             1》text-indent:5em;表示此段落第一行缩进5个字符的宽度
             2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
3>.text-decoration:
             none:会关闭原本应用到一个元素上的所有装饰
       underline: 添加下划线
             overline:在文本的顶端画一个上划线
        line-through:在文本中间画一个贯穿线
        blink:让文本闪烁
4>.text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)
5>.word-spacing: 字符之间的间隔
6>.letter-spacing: 单词或者字母之间的间隔
7>.line-height:25px-32px

##### 4.3 背景属性
1>.background-color：设置背景颜色，默认透明
2>.background-image:url("图片路径"):设置背景图片
3>.background-repeat:repeat-y:只在垂直方向都平铺
                             repeat-x:只在水平方向都平铺
                             repeat:在水平垂直方向都平铺
                             no-repeat:任何方向都不平铺
4>. background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center 

##### 4.4 列表属性
list-style-type:decimal;改变列表的标志类型
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部 

##### 4.5 尺寸属性
width:设置元素的宽度
height:设置元素的高度

##### 4.6 显示属性
显示属性display :none:不显示
block:块级显示
inline:行级显示

##### 4.7 轮廓属性
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：
         outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);设置轮廓的样式
         outline-color:red;设置轮廓的颜色
         outline-width:10px设置轮廓的宽度

##### 4.8 浮动属性float

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：


再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。


如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：


**clear 属性**

规定元素的哪一侧不允许其他浮动元素。

**可能的值**

| 值       | 描述                     |
| ------- | ---------------------- |
| left    | 在左侧不允许浮动元素。            |
| right   | 在右侧不允许浮动元素。            |
| both    | 在左右两侧均不允许浮动元素。         |
| none    | 默认值。允许浮动元素出现在两侧。       |
| inherit | 规定应该从父元素继承 clear 属性的值。 |

##### 4.9 定位属性

###### 4.9.1 相对定位(relative)

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

示例代码：

```html
<html>
    <head>
        <style type="text/css">
            h2.pos_left {
                position: relative;
                left: -20px
            }
            
            h2.pos_right {
                position: relative;
                left: 20px
            }
        </style>
    </head>
    <body>
        <h2>这是位于正常位置的标题</h2>
        <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
        <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
        <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
        <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
        <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
    </body>
</html>