CSS

第一章 CSS简介

1.1 CSS介绍

CSS使用场景：

** **美化网页，布局页面

HTML的局限性：

** **只关注语义，丑；可做简单样式，但是繁琐

CSS: 层叠样式表简称，又称CSS样式表或级联表

**作用:**用于设置文字样式，图片外形，版面布局，外观显示

**价值:**结构样式相分离

1.2 CSS语法规范

**1.组成：**选择器+一条或多条声明

** **

选择器：要改样式的标签

花括号：里面是样式

** 属性与属性之间以键值对的形式出现**

2.语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验CSS语法规范</title>
    
    
    <style>
        p {
            /* 颜色为红色 */
            color: red;  
            /*   修改文字样式为12px */
            font-size: 12px;
        }
    </style>
    
</head>

<body>
    <p>有点意思</p>
</body>
</html>

第二章 CSS基础选择器

2.1 CSS选择器的作用

选择标签用的

**CSS:**1.选择器：选对人 2.属性：做对事

2.2 选择器的分类

**基础选择器：**由单个选择器组成

** **包括标签选择器，类选择器，id选择器，通配符选择器

** **1.标签选择器

** **是指用HTML标签名称作为选择器

** **语法

标签名 {
    属性: 属性值；
}

** ****作用：**可把某一类标签全部选择出来

** **2.类选择器

** **单选一个或几个标签

** **类选择器口诀：

** **样式点定义

** **结构类（class)调用

** ** 一个或多个

** **开发最常用

** **语法

.类名 {
    属性: 属性值；
}
...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>基础选择器之类选择器</title>
    
    <style>
        .red {
            color: red;
        }
    </style>
    
</head>

<body>
    <ul>
        <li class="red">冰雨</li>     //很重要
        <li>来生缘</li>
        <li>李香兰</li>
        <li>江南style</li>
    </ul>
</body>

</html>

** **注意！！！

** **1.类选择器使用“.”(英文点号)进行标识，后面紧跟类名（自定义）。

** **2.长名称或词组可以使用横线为选择器命名。

** **3.用英文，拼音表示

** **案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>

</html>

类选择器-多类名

** **一个标签可以有多类名

** **使用：

<style>
        .red {
            color: red;
        }

        .font35 {
            font-size: 35px;
        }
    </style>
<div class="red font35">刘德华</div>

** **注意！！！

** ** ** **1.类名空格隔开

** **2.公共的写一个，不一样的分开写

** **规则：

规则1 – 类名或CSS选择器应只包含字母数字字符和一些特殊字符，如连字符（-）和下划线（_）。
规则2 – 类名****不能以数字开头。例如，“12sd”类名无效。
规则3 – 类名和CSS选择器可以包含特殊字符，例如’@’、’~’、’:’等，但在****使用类名时需要进行转义。
规则4 – 类名和CSS选择器对大小写不敏感。因此，’.TEST’和’.test’是相同的，但’.TEST’会覆盖’.test’类。
规则5 – 类名不包含空格。
规则6 – 类名不能只包含一个连字符（-）。此外，类名不能以连字符开头，后跟数字。例如，’-123’作为类名不起作用。

3.id选择器

** **样式#定义，结构id使用，只能调用一次，别人请勿使用！！

** **可以为标有特定id的HTML元素指定特定的样式

** **HTML元素以id属性来设置id选择器，CSS中id选择器以”#“来定义。

** **语法

#id名 {
    属性1: 属性值；
}

 #pink {
            color: pink;
        }
 <div id="pink">迈克</div>

** **id和类选择器区别在于使用次数，id只能用一次

4.通配符选择器

** **使用”*“定义，表示选取所有元素

 * {
            color: red;
        }
   <div>wdwdwdwddwdwd</div>

总结！

第三章 CSS字体属性

** **给字体做样式

3.1 字体系列

** **

<style>
        h2 {
            font-family: '宋体';
        }
    </style>
 <h2>pink的秘密</h2>

注意！！！

** **1.各个字体之间使用英文逗号隔开。

** **2.如果有多个空格隔开的多个单词的字体加引号。

** **3.使用常见字体。

3.2 字体大小

注意！！！

** **1.标题标签比较特殊，需要单独写

** **2.单位别忘记！！！

3.3 字体粗细

normal:默认字体 400

bold:粗细 700

后面无单位！！

类选择器
.bold {
            font-weight: bold;
        } 
<p class="bold">布拉布拉</p>

数字更简单
.bold {
            /* font-weight: bold; */
            font-weight: 700;
        }
<p class="bold">布拉布拉</p>

3.4 文字样式

3.5 复合样式

<style>
        div {
            /* font: font-style font-weight font-size/line -height font-family; */
            font: italic 700 16px 'Microsoft yahei';
        }
    </style>
 <div>申卓岩</div>

注意！！！

** **1.顺序不能调换。

** **2.属性之间空格隔开。

** **3.不设置的属性可以省略，font-size font-family必须写，否则font属性不起作用

第四章 CSS文本属性

** 文本样式的外观，文本颜色，对齐文本，装饰文本，文本缩进，行间距等**

4.1 文字颜色

** **color

/*十六进制*/
p {
            color: #ff0000;
        }

/*RGB,红绿蓝缩写*/
p {
            color: rgb(248, 226, 24);
        }

！！十六进制最多用

4.2 对齐文本

text-align 水平对齐模式

语法：

div{
    text-align: right;
}

注意！！！

** **默认是左边

文字垂直居中

** **让文本高度等于盒子高度

4.3 装饰文本

text-decroation文本装饰下划线，删除线，上划线等

p {
    text-decoration: underline;
   }

链接一般有下划线

a {
   text-decoration: none;
   }
 <a href="#">AAAABJKBGYIG</a>

4.4 文本缩进

text-indent 段落首行缩进

p {
  text-indent: 70px;
  }

注意！！1

** **1em 为缩进当前元素1个文字大小的距离

4.5 行间距

line-height 行间距离，可控制文字行与行之间的距离

总结

第五章 CSS引入方式

5.1 CSS三种样式表

1.行内样式表（行内式）

2.内部样式表（嵌入式）

3.外部样式表（链接式）

5.2 内部样式表

CSS放入 标签内部

注意！！！

** 1.理论上任意地方，实际**中

** **2.操作整个页面

** **3.实现分离

5.3 行内样式表

在这行内修改，在里面写

<p style="color: red;">
    申卓岩
</p>

注意！！！

** **1.style本身就是一个标签属性

** **2.color等要写入双引号

5.4 外部样式表

**实际开发用的较多，**可控制多个页面

**核心：**样式单独写到文件中，之后把CSS文件引入使用

两步：

** **1.新建后缀名为.css的样式文件，把所有CSS代码都放入此文件中,不用写标签哦

** **2.使用link标签引入这个文件

<link rel="stylesheet" href="css文件路径">

 <link rel="stylesheet" href="style.css">

5.5 实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="案例1.css">
</head>

<body>
    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div>2019-07-03 16:31:47 来源:<a href="#">中国天气网</a>
        <input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button>
    </div>
    <hr />
    <p>中国天气网讯
        今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
    </p>
    <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
    </p>
    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
    </p>
    <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。
        明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
    <p class="a">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>

</html>

第六章 Chrome调试工具

6.1 打开方法

** **1.F12键

** **2.右击空白处-->检查

6.2 使用调试工具

** **1. Ctrl+滚轮放大开发者工具代码大小

** **2. 左边HTML 右边CSS样式

** **3. 右边CSS可以改动数值和查看颜色

** **4. Ctrl+0复原浏览器大小

** **5. 点击元素发现右侧没有样式引入，有可能是类名或样式引用错误。

** **6. 如果有样式，但样式前面有黄色叹号提示，则是样式属性书写错误。

第七章 emmet语法

7.1 快速生成HTML语法

** **1. 比如说 ！输出所有

** **2. 生成多个标签 div*10 按Tab键

** **3. 父子关系 ul>li

** **4. 兄弟关系 div+p

** **5. 写 <div class="nav"><div> 可以写 .nav

** **class是用 . id是用#

** **同理写 <p class="one"></p> 可以写 **p.one**

** **6.

.demo$5

** **$自增符号，且是有顺序的

** **7. 如想在生成的标签内部写内容可以用{}表示

div{确诊阿尼亚}

** **8.

div{$}*5

7.2 快速生成CSS样式语法

基本采取简写简写形式即可

** ** tac == text-align: center;

第八章复合选择器

建立在基础选择器之上，对基础选择器的组合

种类： 后代选择器，子选择器，并集选择器，伪类选择器等

8.1 后代选择器 ⭐️

** 又称为包含选择器，可选择某父元素的所有子元素**

 <style>
        ol li {
            color: pink;
        }
</style>
<body>
    <ol>  //ol是有序列表
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
    </ol>
    <ul>  //ul是无序列表
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
</body>

语法：

注意：

** **1. 元素1是元素2的父元素

** **2. 最后改变的是子元素

** **3. 孩子可是儿子，孙子等等后代

** **4.倘若如下情况：

 <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>

要把第二个ul里面的li变成红色，就不可以直接ul li {}

**需加一个class **

.nav li {
            color: red;
}
<ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>

8.2 子选择器⭐️

选择亲儿子元素（孙子等没用）

语法：

元素一>a { }

注意

** **1.用大于号隔开

** **2.只管亲儿子

8.3 并集选择器⭐️

可选择多组标签，定义相同样式

语法：

div,p{
    color: red;
}

注意：

** **1.由逗号隔开

** **2.就是和的意思

** **3.并集选择器喜欢竖着写

div,
p,
.pig li{
    color: red;
}

** **4.最后一个不需要逗号

8.4 伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个第n个元素

**特点：**用冒号表示

例如： 链接伪类选择器

 <style>
        /* 把没有点过的链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
            /* 下划线去掉 */
        }

        /* 点过的链接会变色 */
        a:visited {
            color: yellow;
        }

        /* 鼠标经过谁选出谁 */
        a:hover {
            color: red;
        }
        /* 鼠标按着不松开时 */
        a:active {
            color: green;
        }
    </style>

注意：

** **1.必须是冒号！！！

** **2.按照LVHA的顺序写 love hate

实际开发写法：** **

fous 伪类选择器

谁有光标选谁且修改样式

语法

input:focus {
    background-color: yellow;
}

8.5 总结

第九章元素显示模式

9.1 什么是元素显示模式

**根据标签的不同特点布局网页，**这个标签以什么方式显示

类型：块元素和行内元素

9.1.1 块元素男

** 常见块元素：

CSS

第一章 CSS简介

1.1 CSS介绍

1.2 CSS语法规范

第二章 CSS基础选择器

2.1 CSS选择器的作用

2.2 选择器的分类

第三章 CSS字体属性

3.1 字体系列

3.2 字体大小

3.3 字体粗细

3.4 文字样式

3.5 复合样式

第四章 CSS文本属性

4.1 文字颜色

4.2 对齐文本

4.3 装饰文本

4.4 文本缩进

4.5 行间距

总结

第五章 CSS引入方式

5.1 CSS三种样式表

5.2 内部样式表

5.3 行内样式表

5.4 外部样式表

5.5 实例

第六章 Chrome调试工具

6.1 打开方法

6.2 使用调试工具

第七章 emmet语法

7.1 快速生成HTML语法

7.2 快速生成CSS样式语法

第八章 复合选择器

8.1 后代选择器 ⭐️

8.2 子选择器**⭐️**

8.3 并集选择器**⭐️**

8.4 伪类选择器

8.5 总结

第九章 元素显示模式

9.1 什么是元素显示模式

9.1.1 块元素 男

9.1.2 行内元素(内联元素) 女

9.1.3 行内块元素 人妖

9.1.4 总结

9.2 元素显示模式切换

9.3 CSS背景

9.3.1 背景颜色

9.3.2 背景图

9.3.3 背景平铺

9.3.4 背景图片位置

9.3.5 背景图像固定

9.3.6 背景色半透明

9.3.7 背景总结

第十章 CSS三大特性

10.1 层叠性

10.2 继承性

10.3 优先级

10.4 练习

第十一章 盒子模型

11.1 盒子模型

11.1.1 边框

11.1.2 表格的细线边框

11.1.3 内边距

11.1.4 外边距

11.1.5 清除内外边距

11.2 PS基本操作

11.3 综合案例

JavaWeb之Servlet

盒子模型

szy

第八章复合选择器

8.2 子选择器⭐️

8.3 并集选择器⭐️

第九章元素显示模式

9.1.1 块元素男

9.1.3 行内块元素人妖

第十一章盒子模型