CSS（基础篇）

1. CSS概念及编写规范

概念：层叠样式表
作用：在网页制作时可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
优势
- 功能上：可以完成HTML不能完成的美化工作；
- 耦合性：降低了代码的耦合度，将结构与美化分离（HTML：负责网页的结构，CSS:负责网页的美化）
编写规范
- CSS写在大括号内部
- 格式为：样式名:样式值;
- 注释：/* */

2. CSS的使用位置

2.1 行内样式

在html元素内部直接使用style属性进行编写。只对该标签起作用

格式，如：

<div style="样式名1:样式值1;样式名2:样式值2;...">xxx</div>

缺点：
1. 耦合度高，html代码和css代码混合使用；
2. 复用性极差。

2.2 内部样式

在head标签内部添加style标签，在内部编写css样式

格式，如：

<style type="text/css">
  div{
      color:blue;
      font-size:20px;
  }
</style>

缺点：复用性不足，当前css样式不能被其他页面使用

2.3 外部样式

引入外部的css文件
步骤：1、编写css文件；2、引入css文件

css引入方法有两种

方式一：使用import语句。url里写css文件地址

<style type= "text/css">
  @import url("demo.css");
</style>

方式二：使用link标签

<link href="demo.css" type="text/css" rel="stylesheet"/>
<!--rel：指定引入文件与当前文件的关系，stylesheet表示引入文件是样式的脚本代码

推荐使用link引入

3. 基本选择器

对html元素样式化前，先要找到该元素，此时需要用到css选择器
基本格式：
```
选择器{
样式名：样式值；
}
```

3.1 基本选择器类型

3.1.1 标签选择器

通过标签名选中元素
语法：
```
标签名{
}
```
特点：html元素中所有相同标签名的元素都会被选中

3.1.2 类选择器

通过类名选中元素
前提：对标签进行分类，使用class属性进行分类
命名：类名不能以数字开头
语法：
```
.类名{
}
```
特点：html元素中所有指定class属性的元素都会被选中

3.1.3 ID选择器

通过ID属性值选中元素
前提：给元素指定一个id属性
唯一：同一个网页中的id值应该要唯一
语法：
```
#标签名{

}
```
特点：html元素中指定id属性的元素都会被选中

3.1.4 通用选择器

网页中所有的元素都被选中
语法：
```
*{
}
```
特点：html元素中所有相同标签名的元素都会被选中

3.2基本选择器的优先级

ID选择器>类选择器>标签选择器>通用选择器

越靠前优先级越高，相同元素会根据高优先级的选择器执行

3.3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style type="text/css">
        /*标签选择器*/
        h3 {
            color: red;
        }

        /*类选择器*/
        .demo {
            color: green;
        }

        /*id选择器*/
        #one {
            color: deepskyblue;
            font-size: large;
        }

        /*通用选择器*/
        * {
            color: orange;
            font-size: 20px;
        }
    </style>
</head>
<body>
<h3>选择题</h3>

<p class="demo">IE</p>
<div class="demo" id="one">safari</div>
<span>chrome</span>

</body>
</html>

4. 扩展选择器

由基本选择器组合，更加灵活

4.1 层级选择器

选择某个元素下所有的子元素和孙元素
格式：
```
父选择器 子孙选择器{
}
```

4.2 属性选择器

选择具有某个指定属性名的所有标签/选择具有某个指定属性名=属性值的所有标签

格式：

标签名[属性名] {}
<!--或者-->
标签名[属性名="属性值"]{}

4.3 伪类选择器

在某个元素操作过程中，针对不同的状态下的元素进行样式化
可分为锚伪类，first-child伪类，lang伪类等

以锚伪类为例，其中，连接的不同状态可以用不同的方式显示，包括活动状态，已被访问状态，未被访问状态，和鼠标悬停状态

标签名:link { }      /* 未访问的链接 */
标签名:visited { }   /* 已访问的链接 */
标签名:hover { } /* 鼠标移动到链接上 */
标签名:active { }    /* 选定的链接 */

注意：

在 CSS 定义中，标签名:active 必须被置于 标签名:hover 之后，才是有效的；标签名:hover 必须被置于 标签名:link 和 标签名:visited 之后，才是有效的。

4.4 并集选择器

选中的元素时两个或者多个选择器之和
格式：
```
选择器1,选择器2{}
```

4.5 补充知识点：文本框获得焦点

可以对文本框获得焦点的状态样式化
格式：文本框：focus{}
```
input[type="text"]:focus{
}
```

4.6 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style type="text/css">
        /*拓展选择器*/
        /*层级选择器: 找到div下面的p标签*/
        div p{
            color:blue;
        }

        /*属性选择器   找到input标签，而且input标签必须包含type属性，type的属性值必须为text*/
        input[type="text"]{
            color: red;
        }

        /*  伪类选择器： 针对元素处于不同的状态进行样式化*/
        /*没有被访问过*/
        a:link{
            color: brown;
        }
        /*被访问过*/
        a:visited{
            color: purple;
        }
        /*鼠标经过*/
        a:hover{
            color: green;
            font-size: 20px;
        }
        /*激活状态*/
        a:active{
            color: yellow;
        }
        /*获取焦点*/
        input[type="text"]:focus{
            font-size: 20px;
        }

        /*并集选择器*/
        h3,p{
            color: orange;
        }
    </style>
</head>
<body>

<h3>扩展选择器1</h3>

<div>
    <h2>
        <p>扩展选择器2</p>
    </h2>
</div>

<p>扩展选择器3</p>

文本框：
<input type="text" value="user" class="user"/><br/>
<input type="button" value="submit"/>

<hr/>
<a href="#1">buttom</a><br/>
<a href="#2">buttom</a><br/>
<a href="#3">buttom</a><br/>

</body>
</html>

5. 常见CSS样式

5.1 背景样式

可使用标签选择器对body的背景进行样式化

功能	属性名	属性取值
背景色	background-color	颜色常量，如：red 使用十六进制，如：#123
背景图片	background-image	格式：url(图片文件)
平铺方式	background-repeat	repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。
背景位置	background-position	左边和顶部的坐标
背景大小	background-size	宽度和高度

5.2 文本样本

功能	属性名	属性取值
颜色	color	颜色常量，如：red 使用十六进制，如：#123
设置行高	line-height	单位是像素
文字修饰	text-decoration	underline 下划线 overline 上划线 line-through 删除线
文本缩进	text-indent	用于缩进文本，可以使用em单位，表示缩进2个字符，无论字符的大小。
文本对齐	text-align	left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。

5.3 字体样式

功能	属性名	作用
字体名	font-family	设置字体，本机必须要有这种字体
设置大小	font-size	单位：像素
设置样式	font-style	字体设置为斜体 italic 浏览器会显示一个斜体的字体样式。 normal 默认值。浏览器显示一个标准的字体样式。
设置粗细	font-weight	bolder加粗

5.1~5.3 示例代码

需求：对一段文字进行样式化：

1. 诗放在div的层中，宽400px。标题放在h1中。每段文字放在p中
2. body全文字体大小14px; 颜色：#333
3. 标题文字大小18px，颜色#06F，居中对齐
4. 每段文字缩进2em（em是一个相对度量单位，相当于缩进2个字）
5. 段中的行高是22px
6. "胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色
7. 最后一段，颜色#390; 下划线，鼠标移上去指针变化。
8. 美字加粗，颜色color:#F36，大小18px;
9. 文席慕容，三个字，12px，颜色#999，不加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body {
            /*设置背景颜色*/
            background-color: orange;
            /*设置背景图片*/
            background-image: url(img/1514278184.jpg);
            /*设置背景图片的平铺方式*/
            background-repeat: repeat;
            /*设置背景图的位置*/
            background-position: 20px 20px;
            /*设置背景大小*/
            /*background-size: 150%;*//*如果用%，只需要设置一个值，如果设置两个会显示有问题*/
            background-size: 200px 300px;

            /*设置文字大小和颜色*/
            font-size: 14px;
            color: #333;
        }

        div {
            width: 400px;
        }

        h1 {
            /*设置标题字体大小、颜色和文本对齐方式*/
            font-size: 18px;
            color: #06F;
            text-align: center;
        }

        p {
            /*设置文字缩进*/
            text-indent: 2em;
            /*设置行高*/
            line-height: 22px;
        }

        /*美字加粗，颜色color:#F36，大小18px;*/
        #mei {
            font-weight: bolder;
            color: #F36;
            font-size: 18px;
        }

        /*"胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/
        #two {
            font-weight: bold;
            font-style: italic;
            color: blue;
        }

        /*最后一段，颜色#390; 下划线，鼠标移上去指针变化*/
        .last{
            color: #390;
            text-decoration: underline;
            /*鼠标移上去指针变化*/
            cursor: pointer;
        }

        /*文席慕容，12px，颜色#999，不加粗*/
        /*使用层级选择器进一步筛选*/
        h1 span{
            font-size: 12px;
            color: #999;
            font-style: normal;
        }

    </style>
</head>
<body>
<div>
    <h1> 初相遇 <span>文/席慕容</span></h1>
    <p><span id="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时
        刻里出现。</p>
    <p> 我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的
        时光竟然都能重回时的狂喜与感激。
        <span id="two">胸怀中满溢着幸福，只因你就在我眼前，</span>对我微笑，一如当年。
    </p>
    <p class="last">我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初
        相遇。
    </p>
</div>
</body>
</html>

5.4 盒子模型

5.4.1 概念

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)，可称为盒子模型。

5.4.2 属性

![1535636424112](E:\Java study\每日笔记\Java笔记汇总\notesPic\盒子模型.png)

width：宽度
height：高度
margin：外边距
padding：内边距
border：边框，三个值（粗细、线型、颜色）

5.4.3 盒子模型分类

分为标准盒模型、怪异盒模型

5.4.3.1 标准盒模型content-box

box-sizing属性值为content-box，宽和高会被内边距、边框的尺寸撑大（随盒子的内容增加而变宽）

![1535681037244](E:\Java study\每日笔记\Java笔记汇总\notesPic\标准盒模型.png)

则实际高宽为：

实际宽度 = width+ border(左、右) + padding(左、右)

实际高度 = height+ border(上、下) + padding(上、下)

5.4.3.2 怪异盒模型border-box

box-sizing属性值为border-box，宽和高是设置的值，内容的尺寸会被压缩（盒子尺寸固定，不跟随内容变化）

![1535681128007](E:\Java study\每日笔记\Java笔记汇总\notesPic\怪异盒模型.png)

则实际高宽为：

实际宽度 = width

实际高度 = height

5.4.4 边框属性

属性	边框样式	取值
border-style	边框线型	dotted：定义点状边框。在大多数浏览器中呈现为实线。 dashed：定义虚线。在大多数浏览器中呈现为实线。 solid：定义实线。 double：定义双线。双线的宽度等于 border-width 的值。
border-width	边框宽度	length：允许您自定义边框的宽度。
border-color	边框颜色	常量：规定颜色值为颜色名称的边框颜色（比如 red）。十六进制：十六进制值的边框颜色（比如 #ff0000）。
border-radius	边框圆角	指定圆角的半径

5.4.4.1 边框属性写法

外边距写法

外边距的写法	含义
margin-top:10px;	上外边距
margin-left:10px;	左外边距
margin-bottom: 10px;	下外边距
margin-right:10px;	右外边距

- 内边距写法

内边距的写法	含义
padding-top:10px;	上内边距
padding-left:10px;	左内边距
padding-bottom: 10px;	下内边距
padding-right:10px;	右内边距

- 块级模块的居中

margin: auto;

5.4.5 display属性

作用：控制元素的显示和隐藏

取值	作用
inline	设置元素为内联元素
block	设置元素为块级元素
none	设置元素不可见

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        div {
            background-color: aqua;
            /*修改成内联元素*/
            display: inline;
        }
        span {
            background-color: violet;
            /*修改成块级元素*/
            display: block;
        }
        h2 {
            /*元素隐藏*/
            display: none;
        }
    </style>
</head>
<body>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<div>这是一个块级元素</div>
<span>这是一个内联元素</span>
<span>这是一个内联元素</span>
<span>这是一个内联元素</span>
<h2>隐藏元素</h2>
</body>
</html>