day-04 CSS听课笔记

1.1快速生成HTML结构语法

1.生成标签 直接输入标签名 按tab键即可 比如 div 然后按tab键 就可以生成<~div> </~div>
2.如果想要生成多个相同标签 加上就可以了 比如 div3 就可以快速生成3个div
3.如果有父子级关系的标签，可以用> 比如ul >li 就可以了

<ul>
        <li></li>
</ul>

4.如果有兄弟关系的标签，用+就可以了 比如 div+p

 <div></div>
 <p></p>

5.如果生成带有类或者id名字的，直接写.demo或者#two tab键就可以了

 <div class="nav"></div>
    <div id="banner"></div>
    <div id="banner"></div>
    <p class="one"></p>
    <p id="gjh"></p>
    <h1 class="djei"></h1>

6.如果生成的div类名是有顺序的，可以用 自增符号 $

写了点的肯定是类 写#号肯定是ID

    <!-- div.nav -->
    <div class="nav"></div>
    <!-- div#banner   -->
    <div id="banner"></div>       

		<!-- .demo$*5 -->  没写div默认是div
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

    <!-- div.demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

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

1.2快速生成CSS样式

$自增符号 {}大括号里写想要写的东西

 <!-- div{pink老师不是gay} -->
    <div>pink老师不是gay</div>

    <!-- div{我不喜欢男人} -->
    <div>我不喜欢男人</div>
    
    <!-- div{我不喜欢男人}*5 --> 在大括号里可以写想写的内容
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    
    <!-- div{$}*5 -->   
    <div>&</div>
    <div>&</div>
    <div>&</div>
    <div>&</div>
    <div>&</div>

1.3 快速生成CSS样式语法

采用简写模式

					/* tac */
            text-align: center;
            /* w */
            width: ;
            /* h  */
            height: ;
            /* w100 */
            width: 100px;
            /* h200 */
            height: 200px;
            /* tdn */
            text-decoration: none;
        

1.4快速格式化样式

shift+alt+f
勾选设置：保存时自动调整好格式

2.1.css的复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
1.分和选择器可以更准确、更搞笑的选择目标元素（标签）
2.复合选择器私有两个或多个基础选择器，通过不同的方式组合而成的
3.常用的符合选择器包括：后代选择器、子选择器、并集选择器、伪装=类选择器

2.2后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
alt+shift+箭头 向下复制一行

语法：元素1 元素2 {样式声明}
上述样式表示选择元素1里面的所有元素2（后代元素）
例如：

ol li {
            color: pink;
        }

<style>
        /* 我想要把ol里面的小li选出来改为pink */
        ol li {
            color: pink;
        }

        /* 中国 山东 济南 蓝翔  一层层查找 */
        ol li a {
            color: red;
        }

        /* 类是要加.的 */
        .nav li a {
            color: yellow;
        }
    </style>
 <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>

    <!-- 两组一样的 -->
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>

    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
       
    </ul>

2.3子元素选择器）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法：元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代（子元素）元素2
例如：1.用>号隔开；2.元素1是父级，元素2是亲儿子

 .nav>a {
            color: red;
        }

<style>
        .nav>a {
            color: red;
        }
/style>

 <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

2.3 课堂练习

css的复合选择器
1.请将下面的连接文字修改为红色

<div class="nav1">
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
        </ul>
    </div>

答案：

 .nav1 ul li a {
            color: red;
        }

2.请将下面的大肘子文字修改为红色

<div class="bot">
        <a href="#">大肘子</a>
        <ul>
            <li><a href="#">猪头</a></li>
            <li><a href="#">猪尾巴</a></li>
        </ul>
    </div>

答案：

.bot>a {
            color: red;

        }

2.4并集选择器（重要）—逗号隔开

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是个选择器通过引文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分

	<div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>

/* 要求一：元素1与元素2之间用并集选择器分开 */
        div,
        p {
            color: pink;
        }

        /* 要求二：请把熊大和熊二改为粉色 还有小猪一家改为粉色 */
    </style>
    <style>
        div,
        p,
        .pig li {
            color: pink;
        }

2.5伪类选择器

为类选择器用于向某些选择器添加特殊的效果，必须给链接添加特殊效果，或选择第一个，第n个元素
伪类选择器书写最大的特点是用冒号：表示，比如：hover、first-child
因为为类选择器很多，必须有链接伪类、结构伪类等所以这里先介绍常用的链接伪类选择器。

2.6 链接伪类选择器

a:link      选择
a:visited
a:hover
a:active


/*1.未访问的链接：a:link  把没有点击过的（访问过的）链接选出来*/
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2.a:visited  选择点击过的（访问过的）链接；点过一次之后变成的橙色的 */
        a:visited {
            color: orange;
        }

        /* 3.a:hover选择鼠标经过的那个链接 ；鼠标经过时的链接 */
        a:hover {
            color: skyblue;
        }

        /* 4.选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 ；鼠标按下没有弹起时的颜色*/
        a:active {
            color: green;
        }

书写时：
1.为了确保生效，一般按照四个顺序来书写：link,visited,hover,active
2.记忆法：love hate 或者lv 包包hao
3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

一般两个样式：

 a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }

1.7 ：focus伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也主要是针对于表单元素来说。

 <style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

1.8复合选择器总结

后代选择器 .nav a
子代选择器 .nav>p
并集选择器 .nav, .header 有逗号分隔开
链接伪类选择器 a{}和a:hover
：focus选择器 input:focus 记住这个写法

2.CSS的元素显示模式

2.1什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为 块元素 和 行内元素 两种类型。

2.2块元素

常见的块元素有<h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
1.比较霸道，自己独占一行
2.高度、宽度、外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素

注意：

1.文字类的元素内不能使用块级元素
2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
3.同理：<h1> ~ <h6>等都是文字类块标签，里面也不能放其他块级元素

2.2行内元素

常见的行内元素有<a><strong><b><em>,<i><del><s><ins><u><span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素```

行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个；
2.高，宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其它行内元素

注意：
1.链接里面不能再放链接；
`常见的行内元素有`
2.特殊情况链接<a>里面可以放块内元素，但是给<a>转换一下块级模式最安全
## 2.3行内块元素
在行内元素中有几个特殊的标签——<img/>、<input/>、<td>,他们同时具有快内元素和行内元素的特点，有些资料称他们为行内块元素
行内块元素的特点：
1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙。一行可以显示多个（行内元素特点）
2.默认宽度就是他们本身内容的宽度（行内元素特点）
3.高度，行高、外边距以及内边距都可以控制块级元素特点（）
## 2.5元素显示，模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性；
比如想要增加链接<a>的触发范围；

1.转换成块元素：display:block
2.转换为行内元素：display:inline
3.转换为行内块：display:inline-block
## 2.6一个小工具的使用 snipaste
Snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上
常用的快捷方式：
1.F1可以截图，同时测量大小,设置箭头，书写文字等
2.F3在桌面置顶显示
3.点击图片，alt可以取色（按下shift可以切换取色模式）
4.按下esc取消图片显示

## 案例：简洁版小米侧边栏
案例的核心思路分为两步：
1.把链接a转换为块级元素，这样连接就可以单独占一行，并且有宽度和高度
2.鼠标经过a给链接设置背景颜色

## 2.7一个小技巧 单行文字垂直居中
## 2.8单行文字垂直居中的原理
行高：   

```css
height: 40px;
line-height: 40px;

3.CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置等、背景图像固定等。

3.1背景颜色

background-color:定义背景颜色
background-color:transparent

3.2背景图片

background-image: 常见logo，小装饰图片，便于控制位置
background-image：none/url
none:无背景图（默认的）
url:使用绝对或相对地址指定背景图像

3.3背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

background-repeat:repeat|no-repeat|repeat-x|repeat-y;

repeat:背景图像在总想和横向上平铺（默认的）

no--repeat:背景图像不平铺；

repeat-x:背景图像在横向上平铺；

repeat-y:背景图像在纵向上平铺；

<style>
div{
​      width:300px;
​      height:500px;
​      background-color: pink;
​      background-image: url(下箭头.jpg);
​      /* 1.背景照片不平铺 ，盒子里只有一个*/
​        background-repeat:no-repeat; 

​      /* 2.默认情况下，背景照片是平铺的 盒子里铺满为止*/
​       background-repeat;repeat;  

​      /* 3.沿着x轴平铺 ，一个半*/
​       background-repeat;repeat-x; 

​       /* 4.沿着y轴平铺 ，一个半 */
​        background-repeat;repeat-y;

/*页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色*/
​    }
  </style>
</head>
<body>
    <div></div>
</body>

3.4背景图片位置

利用 background-position属性可以改变图片在背景中的位置。

background-position:x y

参数代表的意思是：x坐标和y坐标。可 以使用方位名词或者精确单位

length: 百分数|由浮点数字和单位标识符组成的长度值
position: top|center|bottom|left|center|right 方位名词

注意：

一、参数是方位名词
1.若指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
2.如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐

 div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/上箭头.jpg);
            background-repeat: no-repeat;
            /* center top 和 top center效果是等价的 */
            /* background-position: center top; */
            /* 显示x轴，然后是y轴 */
            /* background-position: top center; */
            background-position: top;

        }

二.参数是精确单位
1.如果参数值是精确单位，你们第一个肯定是x坐标，第二个一定是y坐标
2.如果至指定一个数值，那该数值一定是x坐标，另一个默认垂直居中

三、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/上箭头.jpg);
            background-repeat: no-repeat;
            /*20px center 一定是x为20 y是center */
            background-position: 20px center;
            /* 水平是居中显示  垂直是20像素 */
            background-position: center 20px;

3.5背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment :视差滚动
background-attachment ：scroll | fixed

scroll : 背景图像是随对象内容滚动（默认效果）
fixed : 背景图像固定

3.6背景复合写法

为了简化被交警属性的代码，我们可以将这些属性合并写在同一个属性background中。从而节约代码量。
当时用简写属性时，没有特定的书写顺序。一般习惯约定顺序为：
background:背景颜色 背景图片地址 背景平铺 背景图形滚动 背景图片位置

background: black url(images/上箭头.jpg) no-repeat fixed center top;

这是实际开发中，更常用的写法。

3.7背景颜色半透明

css为我们提供了背景颜色半透明的效果
background:rgba （ 0 , 0，0，0.3）
alpha是a的简写，取值在0到1之间，可以写成.3的形式，背景半透明，盒子里面内容不受影响，CSS新增属性，是IE9+版本浏览器才支持的（一般现在不必关注兼容性，都可以）

3.8背景总结

属性 作用 值
background-color 背景颜色 预定义的颜色值
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
backgrpund-position 背景位置 length/position/ 分别是x和y坐标
background-attachment 背景附着 scroll（背景滚动)/fixed背景固定
背景简写 书写更简单 背景颜色 背景图片地址
背景色半透明 背景颜色半透明 background：rgba(0,0,0,0.3)后面必须是4个值

背景图片：实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，有点事非常便于控制位置（精灵图也是一种运用场景）

4综合案例

五彩导航

练习价值：
1.链接属于行内元素，但是此时需要宽度高度，因此需要模式转换
2.里面文字属于水平居中和垂直居中，因此需要单行文字垂直居中的代码
3.链接开面需要设置背景图片，因此需要用到背景的相关属性设置
4.鼠标经过变化背景图片，因此需要用到链接伪类选择器