CSS

一、CSS简介

1.1 什么是CSS

CSS全称：Cascading Style Sheet 层叠样式表，定义如何显示HTML元素
多个样式可以层层叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，样式无冲突的共同作用

1.2 CSS能干什么

修饰美化html网页
外部样式表可以提高代码复用性从而提高效率
html内容与样式表现分离，便于后期维护

1.3 CSS书写规范

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

选择器通常是我们需要改变的html元素
每条声明由一个属性和一个值组成

1.4 基础语法

选择器{属性:值; 属性:值;......}

h1{color:red; font-size:14px;}

注意事项：

使用花括号来包围声明
如果值为若干单词，则要给值加引号
多个声明之间使用分号来分开
css对大小写不敏感，但如果涉及到与html文档一起使用时，class与id名称对大小写敏感

二、CSS导入方式

2.1 内嵌方式

把CSS样式嵌入到html标签当中，类似属性的用法

<div style="color:red;font-size:14px">~示例文本~~~~~</div>

2.2 内部方式

在head标签中使用style引入CSS样式

<head>
    <!-- 告诉浏览器使用css解析器去解析 -->
    <style type="text/css">
        div{color:red;front-size:14px}
    </style>  
</head>
<body>
    <!-- 上面在head中定义了一个元素选择器, 给所有的div元素加上上面定义好的CSS样式 -->
    <div> aaaa </div>
</body>

2.3 外部方式

将CSS样式抽成一个单独的文件，使用者直接引用

Step1：创建单独的css文件div.css

div{color:red;front-size:14px}

Step2：在html中引入div.css文件

<head>
    <link rel="stylesheet" type="text/css" href="div.css"></link>
    <!-- rel: 表示当前页面与href所指定文档的关系
         type: 文件类型, 告诉浏览器使用css解析器去解析
         href: css文件地址 -->
</head>
<body>
    <!-- 在div.css中中定义了一个元素选择器, 给所有的div元素加上上面定义好的CSS样式 -->
    <div> aaaa </div>
</body>

2.4 @import方式

在页面中引入一个独立的单独文件

<head>
    <!-- 引入div.css文件 -->
    <style type="text/css">
        @import url("div.css") 
    </style>
</head>
<body>
    <!-- 在div.css中中定义了一个元素选择器, 给所有的div元素加上上面定义好的CSS样式 -->
    <div> aaaa </div>
</body>

三、CSS选择器

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

3.1 基本选择器

3.1.1 元素选择器

给所有定义了选择器的html元素添加样式

html标签1, html标签2{属性:属性值; ......}

3.1.2 id选择器

给需要修改样式的html元素加上id属性标识，根据id的来选择元素

<head>
    <!-- 定义了一个样式, 该样式只会被加到id="d1"的html元素 -->
    <style type="text/css">
        #d1{color:red;front-size:14px}
    </style>  
</head>
<body>
    <!-- 给该div定义了id -->
    <div id="d1"> aaaa </div>
</body>

3.1.3 class选择器

给需要修改样式的html元素加上class属性标识，根据class的值来选择元素

<head>
    <!-- 定义了一个样式, 该样式只会被加到class="d1"的html元素 -->
    <style type="text/css">
        .d1{color:red;front-size:14px}
    </style>  
</head>
<body>
    <!-- 给该div定义了class -->
    <div class="d1"> aaaa </div>
</body>

与id选择器的区别：class属性可以重复定义，而id不行

<head>
    <style type="text/css">
        .d1{color:red;front-size:14px}
        #d2{color:red;front-size:14px}
    </style>  
</head>
<body>
    <!-- 给该div定义了class -->
    <div class="d1"> aaaa </div>
    <!-- 给该div定义了class -->
    <div class="d1"> bbbb </div>
    
    <!-- 给该div定义了id -->
    <div id="d2"> aaaa2 </div>
    <!-- 错误: 因为id="d2"已经被使用了, 这里不能再用id="d2"来定义该div -->
    <div id="d2"> bbbb2 </div>
</body>

3.2 属性选择器

根据元素的属性及属性值来选择元素

<head>
    <!-- 定义了一个样式, 该样式只会被加到带有href属性且属性值为"www.baidu.com"的html元素
         如果不写属性值, 样式就会被加到所有带有href属性的html元素 -->
    <style type="text/css">
        [href="www.baidu.com"]{color:red;front-size:14px}
    </style>  
</head>
<body>
    <a href="www.baidu.com"> aaaa </a>
    <a href="www.qq.com"> bbbb </a>
</body>

3.3 伪元素选择器

也叫冒号选择器，主要是针对< a>标签

语法：html元素:行为{css属性}

静止状态：没有鼠标碰到的状态。a:link{css属性}
悬浮状态：鼠标停留在链接时的状态。a:hover{css属性}
触发状态：鼠标点击链接时，点击按下还没抬起的状态。a:active{css属性}
完成状态：鼠标点击链接后的状态。a:visited{css属性}

<head>
    <style type="text/css">
        <!-- 静止状态 -->
        a:link{color:blue;}
        <!-- 悬浮状态 -->
        a:hover{color:red;}
        <!-- 触发状态 -->
        a:active{color:green;}
        <!-- 完成状态 -->
        a:visited{color:yellow;}
    </style>  
</head>
<body>
    <a href="www.baidu.com"> 点我吧 </a>
</body>

3.4 层级选择器

语法：父级选择器子级选择器{css属性}

<head>
    <style type="text/css">
        #div1 .div11{color:blue;}
    </style>  
</head>
<body>
    <div id="div1">
        <!-- 上面定义了父级为id="div1" 子级为class="div11"的一个层级选择器
             这样就只会改变id="div1"下的class="div11"下的样式, 而不会改变其他div的样式-->
        <div class="div11"></div>
        <div class="div12"></div>
    </div>
</body>

四、CSS属性

4.1 文字属性

属性名	取值	描述
font-size	像素值	设置字体大小
font-family	宋体、黑体等	设置字体样式
font-style	normal表示正常、italic表示斜体	设置斜体样式
font-weight	100-900数值或者bold表示粗体	粗体样式

4.2 文本属性

属性名	取值	描述
color	十六进制或代表颜色的英文单词	设置文本颜色
text-indent	像素或百分比。5px缩进5像素或20%缩进父容器宽度的百分之20	设置元素中文本的首行缩进
text-decoration	none、underline、overline、blink	文本的装饰线
word-spacing	normal或像素值	单词间的水平间隔（只对英文有效）
letter-spacing	normal或像素值	中文文字间的水平间隔
text-align	left、right、center	文本水平对齐方式
line-height	normal或像素值	设置文本的行间距
text-shadow	四个取值依次是：阴影水平偏移阴影垂直偏移阴影模糊程度阴影颜色	设置阴影级模糊效果

4.3 背景属性

属性名	取值	描述
background-color	十六进制或代表颜色的英文单词	设置元素的背景色
background-image	url('图片路径')	设置元素的背景图片
backgroud-repeat	repeat-y、repeat-x、repeat、no-repeat	设置背景图片的平铺方向
backgroud-size	宽度和高度属性或者只设置宽度	改变图像在背景中的大小

4.4 列表属性

属性名	取值	描述
list-style-type	disc等	改变列表的标识类型
list-style-image	url('图片路径')	用图像表示标识
list-style-position	inside;outside	标识出现在列表项内容之外还是内部

4.5 尺寸属性

属性名	取值	描述
width	像素值	设置元素的宽度
height	像素值	设置元素的高度

4.6 显示属性

属性名	取值	描述
display	none：不显示、block：块级显示（独立一行）、inline：行级显示（在同一行）	设置元素是否显示以及显示方式

4.7 轮廓属性

属性名	取值	描述
outline-style	solid、dotted、dashed等	设置轮廓的样式
outline-color	十六进制或代表颜色的英文单词	设置轮廓的颜色
outline-width	像素值	设置轮廓的宽度

4.8 浮动属性

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

float属性：规定元素向什么方向移动

框1向右浮动，直到碰到包含框才停下来，框2和框3顺势上移

框1向左浮动，碰到框2时不会停下来，直到碰到包含框才停下来，此时看到的现象是框1覆盖掉了框2

如果框1、框2都是浮动框，框1碰到包含框停下来，而框2碰到框1就会停下来，不会覆盖掉框1

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

clear属性：规定元素的哪一侧不允许其他浮动元素

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

4.9 定位属性

相对定位（relative）：元素框偏移某个距离，元素仍保持其未定位前的状态，它原本所占的空间保留

<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>

绝对定位（absolute）：元素框从文档流完全删除，并相对于其包含框进行定位。包含框可能是文档中的另一个元素，或者是初始包含框。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样，元素定位后生成一个新的框

<head>
    <style type="text/css">
        h2.pos_abs {
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>

<body>
    <h2 class="pos_abs">这是带有绝对定位的标题</h2>
    <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部150px</p>
</body>

固定定位（fixed）：元素狂的表现类似于将position设置为absolute，不过其包含框是视窗本身

<head>
    <style type="text/css">
        #left {
            width: 200px;
            height:200px;
            backgroud-color: red;
            position: fixed;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div id="left"></div>
    <!-- 增加很多的换行, 目的是为了创造网页的滚动条 -->
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <p>通过固定定位，无论页面如何滚动，上面定义的div框永远保持在视窗的上边距100px左边距100px的位置</p>
</body>

五、CSS盒子模型

5.1 边框相关属性

属性名	取值	描述
border-style	solid、double、dashed、dotted等	设置边框样式
boder-color	十六进制或用于表示颜色的英文	设置边框颜色
boder-width	像素值	设置边框粗细

5.2 外边距相关属性

margin：外边距。边框和边框外层元素的距离

属性名	取值	描述
margin	top、right、bottom、left	四个方向的距离
margin-top	像素值	上边距
margin-bottom	像素值	下边距
margin-left	像素值	左边距
margin-right	像素值	右边距

5.3 内边距相关属性

padding：内边距。元素内容和边框之间的距离

属性名	取值	描述
padding	top、right、bottom、left	四个方向的距离
padding-top	像素值	上边距
padding-bottom	像素值	下边距
padding-left	像素值	左边距
padding-right	像素值	右边距

CSS

CSS