CSS(一)

小鱿鱼G

已于 2022-01-20 19:16:37 修改

阅读量811

点赞数

分类专栏： Web前端开发文章标签： css

于 2021-04-15 17:39:24 首次发布

本文链接：https://blog.csdn.net/weixin_53280964/article/details/115644934

版权

Web前端开发专栏收录该内容

6 篇文章 2 订阅

订阅专栏

一.css简介

●使用场景：美化网页，布局页面

1.HTML的局限性

只关注内容的语义

2.CSS——网页的美容师

层叠样式表（css样式表）

3.最大的价值

由HTML专注去做结构呈现，样式交给css，即结构（HTML)与样式（css)相分离

4.css的语法规范

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

<style>
    /*选择器 {样式} */
     /*给谁改样式 {改什么样式} */
     p {
           color: red;
           font-size: 12px;
            /*修改了文字的样式为12像素 */
     }
</style>

●选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

●属性和属性值之间用英文:分割，每一个结束一定要加分号。

●属性与属性值以“键值对”的形式出现

●属性是对指定的对象设置的样式属性

●必须写在<head></head>标签中

5.CSS代码风格

✟样式格式书写

☝紧凑格式

h3 { color: deeppink;font-size: 20px;}

☝展开格式

h3 { 
    color: deeppink;
    font-size: 20px;
}

✟样式大小写风格:一般使用小写

✟样式空格风格

●属性值前面，冒号后面，保留一个空格

●选择器（标签）和大括号中间保留空格

二.CSS基础选择器

1.CSS选择器的作用

选择标签使用的

2.选择器分类

☝基础选择器

●基础选择器是由单个选择器组成的

●基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器

★标签选择器(元素选择器)：是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名 {
   属性1：属性值1；
   属性2：属性值2；
   属性3：属性值3；
   ...
}

可以把某一类标签全部选择出来，统一设置样式，但不能差异化设置

★类选择器：单独选一个或者某几个标签

...
<head>
      ...
     <style>
        .red {
            color: red;
         }
     </style>
</head>
<body>
     <ul>
        <li class="red">冰雨</li>
        <li>来生缘</li>
        <li>生僻字</li>
     </ul>
</body>

■ 类选择器口诀:样式点定义，结构类（class）调用，一个或多个，开发最常用

■类选择器-多类名

☛多类名使用方式

♀在标签class属性中写多个类名

♀多个类名中间必须用空格分开

<div class="red font20">亚瑟</div>

☛多类名开发使用场景

<div class="pink" fontWeight font20">亚瑟</div>
<div chass="font20">刘备</div>
<div chass="font14 pink">安其拉</div>
<div chass="font14">貂蝉</div>

♀各个类名中间用空格隔开

♀简单理解：给某个标签添加了多个类，或者这个标签有多个名字

♀这个标签可以分别具有这些类名的样式

★id选择器：为持有特定id的HTML元素指定特定的样式

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

#id名 {
    属性1： 属性值1；
    ...
}

id选择器口诀:样式#定义，结构id调用，只能调用一次，别人切勿使用

id选择器和类选择器的区别

①类选择器( class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用
②id选择器好比人的身份证号码,全中国是唯一的,不得重复
③id选择器和类选择器最大的不同在于使用次数上
④类选择器在修改样式中用的最多，id选择器般用于页面唯一性的元素上经常和 JavaScript搭配使用

★通配符选择器：使用"*"定义，表示选取页面中所有元素（标签）

* {
   
   属性1： 属性值1；
   ...
}

☛不需要配用，自动就给所有的元素使用样式

☝复合选择器

三.CSS字体属性

用于定义字体系列，大小，粗细和文字样式（斜体）

3.1字体系列

css使用font-family属性定义文本的字体系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体系列</title>
    <style>
     h2 {
         font-family: '微软雅黑';
     }
     p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
        font-family: 'Times New Roman', Times, serif;
     }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

3.1.1注意事项

1.各种字体之间必须使用英文状态下的逗号隔开
2.一般情况下，如果有空格隔开的多个单词组成的字体，加引号
3.尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
4.最常见的几个字体:body{font-family:'Microsoft YaHei', tahoma, arial,' Hiragino Sans GB';}

3.2字体大小

css使用font-size属性定义字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

3.2.1注意事项

1.px(像素)大小是我们网页的最常用的单位
2.谷歌浏览器默认的文字大小为16px
3.不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
4.可以body指定整个页面文字的大小

5.标题标签比较特殊，需要单独指定文字大小

3.3字体粗细

css使用font-weight属性设置字体的粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之字体大小</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

3.4文字样式

CSS 使用 font-style 属性设置文本风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之文字样式(风格)</title>
    <style>
      p {
          font-style: italic;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: normal;
      }
    </style>
</head>
<body>
    <p>同学,上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

注意：平常很少给字体加斜体，而是给斜体标签（em,i）给位不倾斜字体。

3.5 字体复合属性写法

将各种字体属性写在同一选择器下，节约代码。

规则

严格遵守顺序，且 font-size 和 font-family 必须有。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

3.6总结

四.CSS文本属性

CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。

4.1文本颜色

color 属性定义文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观属性之颜色</title>
    <style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>
</head>
<body>
   <div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>

4.2对齐文本

text-align 属性用于设置元素文本内容的水平对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

4.3装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之装饰文本</title>
    <style>
       div {
           /* 下划线 */
           /* text-decoration: underline;   */
         /* 删除线 */
           text-decoration: line-through;
           /* 上划线 */
           text-decoration: overline;

       }
       a {
           /* 取消a默认的下划线 */
           text-decoration: none;
           color: #333;
       }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

4.4文本缩进

text-indent定义段落首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
</head>
<body>
        <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

em 是一个相对单位，1em 就是一个字符所占大小。当 text-indent=2em，则恰好缩进两个文字。

4.5行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS文本外观之行间距</title>
    <style>
       div {
           line-height: 26px;
       }
       p {
           line-height: 25px;
       }
    </style>
</head>
<body>
    <div>中国人</div>
       <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

       <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
        
       <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

4.6文本属性总结

5.CSS的引入方式

5.1CSS的三种样式表

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

5.2内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表</title>
    <style>
            div {
                color: pink;
            }
     </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
   
</body>
</html>

注意：

<style> 标签理论上可以放在HTML文档的任何一个地方，但一般会放在文档的<head>标签中
通过此种方式，可以方便控制当前整个页面的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设置CSS，通常也被称为嵌入式引用

5.3行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式表</title>
</head>
<body>
        <p>夏天夏天悄悄过去留下小秘密</p>

        <p>压心底压心底不能告诉你</p>
        
        <p> 晚风吹过温暖我心底我又想起你</p>
        
        <p> 多甜蜜多甜蜜怎能忘记</p>
        
        <p>不能忘记你把你写在日记里</p>
        
        <p>不能忘记你心里想的还是你</p>
        
        <p>浪漫的夏季还有浪漫的一个你</p>
        
        <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>
</html>

注意：

style其实就是标签的属性
在双引号中间，写法要符合CSS规范
可以控制当前的标签设置样式
通常也被称为行内式

5.4外部样式表

实际开发中都是外部样式表，适用于样式比较多的情况。
核心：样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中。
引入外部样式表的步骤：

新建一个后缀名为.css的样式标签，把所有的CSS代码都放在此文件中
在HTML页面中，使用<link>标签引入这个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>

F12打开调试工具

六.Emmet语法

1.快速生成HTML结构语法

1.生成标签，直接输入标签名按tab即可。比如div,然后tab键,就可以生成<div></div>
2.如果想要生成多个相同的标签加上*就可以了,比如 div*3可以快速生成3个div
3.如果父子关系的标签,可以用>比如 ul>li就可以了
4.如果兄弟关系的标签,用+就可以了比如div+p
5.如果生成带有类名或者id名字的,直接写.demo或者 #two tab键就可以了
6.如果生成的div类名是有序的,可以用自增符号 $

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>emmet语法快速生成html标签和样式</title>
</head>
<body>
    <div></div>
    <table></table>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <div><span></span></div>

    <div></div>
    <p></p>
    <div class="nav"></div>
    <div class="nav"></div>
    <div id="banner"></div>
    <p class="one"></p>
    <span class="gray"></span>
    <ul>
        <li id="two"></li>
    </ul>
    <div class="demo"></div>
     <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 我们想生成的标签里面默认显示几个文字  div{文字}-->
    <div>pink老师不是gay</div>     
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>   
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>
</html>

2.快速生成CSS样式语法

CSS基本采取简写形式即可

比如w200 按tab 可以生成 width: 200px;
比如Ih26 按tab 可以生成 line-height-26px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>emmet语法快速生成html标签和样式</title>
    <style>
      .one {
          text-align: center;
          /* text-align: center; */
          text-indent: 2em;
          width: 100px;
          height: 200px;
          text-indent: 2em;
          line-height: 26px;
          text-decoration: none;
      }
    </style>
</head>

3.快速格式化代码

单击右键→文件格式化
快速格式化代码：shift+alt+f
自动格式化代码

文件------->【首选项】-------------【设置】
搜索emmet.include;
在settings.json下的【用户】中添加以下语句

☝"editor.formatOnType":ture,

☝"editor.formatOnSave":ture,

(只需要设置一次即可)

七.复合选择器

1.什么是复合选择器

复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的
1.1复合选择器可以更准确、更高效的选择目标元素(标签)
1.2复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
1.3常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

2.后代选择器

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之后代选择器</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink */

        ol li {
            color: pink;
        }

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

        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <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>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>

</body>

</html>

1.语法:

元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2(后代元素)。

2.例如

ul li { 样式声明}     /*选择ul里面所有的li标签元素*/

3.元素1和元素2中间用空格隔开。

4.元素1是父级，元素2是子级，最终选择的是元素2。

5.元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。

6.元素1和元素2可以是任意基础选择器。

3.子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之子元素选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

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

</html>

1.语法

元素1>元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。

2.例如

div > p { 样式声明 } /*选择div 里面所有最近一级p标签元素*/

3.元素1和元素2中间用大于号隔开。

4.元素1是父级，元素2是子级，最终选择的是元素2。

5.元素2必须是亲儿子，其孙子、重孙之类都不归他管。

4.并集选择器

1、并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。

2、并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

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

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

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

</html>

3、语法:

元素1,元素2 { 样式声明 }

上述语法表示选择元素1和元素2。

4、例如︰

ul, div { 样式声明 }     /*选择ul和div标签元素*/

5、元素1和元素2中间用逗号隔开

6、逗号可以理解为和的意思

7、并集选择器通常用于集体声明

5.伪类选择器

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

2、伪类选择器书写最大的特点是用冒号(∶)表示，比如 :hover 、 :first-child。

3、链接伪类选择器

1）a : link /*选择所有未被访问的链接*/

2）a : visited / *选择所有己被访问的链接*/

3）a : hover /*选择鼠标指针位于其上的链接*/

4）a : active /*选择活动链接（鼠标按下未弹起的链接)*/

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 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 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

4、链接伪类选择器注意事项

1）为了确保生效，请按照LVHA的顺序声明:link、:visited、:hover、:active。

2）因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

5、链接伪类选择器实际工作开发中的写法:

/* a是标签选择器所有的链接*/

a {
color: gray;

}

/ * : hover是链接伪类选择器鼠标经过*/

a : hover {
color: red; /*鼠标经过的时候，字体由灰色变成了红色*/

background-color: #fff;/*鼠标经过的时候，字体背景由灰色变成了红色*/

}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        body {
            color: red;

        }

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

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

6.focus伪类选择器

1）:focus伪类选择器用于选取获得焦点的表单元素。

2）焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

3）语法：

input : focus {
    background-color: yellow ;

}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

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

</html>

八.元素显示模式

1.什么是元素显示模式

1.1作用

网页标签非常多，在不同地方会用到不同类型的标签

1.2概述

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行一行可以放多个<span>。

1.3分类

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

2.块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等。其中<div>标签是最典型的块元素

2.1特点

比较霸道，自己独占一行
高度，宽度，外边距以及内边距都可以控制
宽度默认是容器（父级高度）的百分之百
是一个容器即盒子，里面可以放行内或块级元素

2.2注意

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之块级元素</title>
    <style>
        div {
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>比较霸道,自己独占一行</div> 瑟瑟发抖
    <p>
        <div>这里有问题</div>
    </p>
</body>

</html>

3.行内元素

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

3.1.特点

相邻行内元素在一行上，一行可以显示多个
高，宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

3.2注意

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内元素</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <span>pink老师你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
    <span>pink老师</span> <strong>品如的衣服</strong>

    <a href="http://www.baidu.com">
        <a href=""></a>
    </a>
</body>

</html>

4.行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>,它们同时具有块元素和行内元素的特点,有些资料称它们为行内块元素

4.1特点

①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)
②默认宽度就是它本身内容的宽度(行内元素特点)
③高度,行高、外边距以及内边距都可以控制(块级元素特点)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示模式之行内块元素(特殊情况)</title>
    <style>
        input {
            width: 249px;
            height: 35px;
        }
    </style>
</head>

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

</html>

5.元素显示模式的转换

特殊情况下,我们需要元素模式的转换,简单理解：一个模式的元素需要另一种模式的特性。比如想要增加链接<a>的触发范围

转换为块元素：dispiay:block;
转换为行内元素：dispiay:inline;
转换为行内块元素：dispiay:inline-block;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

6.一个小工具的使用 snipaste

Snipaste是一个简单但强大的截图工具,也可以让你将截图贴回屏幕上

常快捷方式

F1可以截图同时测量大小，设置箭头，书写文字等
f3在桌面置顶显示
点击图片，alt可以取色 (按下shift可以切换取色模式)
按下esc取消图片显示

7.单行文字垂直居中的代码

让文字的行高等于盒子的高度

九.CSS的背景

给页面元素添加背景样式

背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等

9.1 背景颜色

background-color属性定义了元素的背景颜色

background-color:颜色值;

一般情况下元素背景颜色的默认值是transparent（透明），我们也可以手动指定背景颜色为透明色

9.2背景图片

background-image属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置

background-image : none | url (url)

none: 无背景图（默认的）
url: 使用绝对或相对地址指定背景图像

9.3背景平铺

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

background-repeat： repeat  | no-repeat |   repeat-x | repeat-y

repeat : 默认的情况下，背景图片是平铺的
no- repeat :背景图片不平铺
repeat-x : 沿x轴平铺
repeat-y :沿y轴平铺

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景图片平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            /* 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>

</html>

9.4背景图片的位置

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

background-position： x  y;

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

length :
position : top | center | bottom | left | center |right 方位名词

☝参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关。比如：left top和 top left 效果一致

如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>

☝参数是精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中

 <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;

        }
    </style>

☝参数是混合单位

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

 <title>背景位置-混合单位</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
            /* background-position: 20px center; */
            /* 水平是居中对齐  垂直是 20 */
            background-position: center 20px;

        }
    </style>

9.5背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment ： scroll  | fixed

scroll :背景图像是随对象内容滚动
fixed :背景图像固定

9.6背景复合写法

一般习惯约定顺序

background：颜色，背景图片地址，背景平铺，背景图片滚动，背景图片位置

 <style>
        body {
            /* background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            background-position: center top; */
            /* 把背景图片固定住 */
            /* background-attachment: fixed;
            background-color: black; */
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>

9.7背景色半透明

background: rgba(0, 0, 0, 0.3)

  <style>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            /* background: rgba(0, 0, 0, 0.3); */
            background: rgba(0, 0, 0, .3);
        }
    </style>

最后一个参数是alpha透明度，取值范围在0-1之间
盒子里面的内容不受影响

小鱿鱼G

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS(一)

一.css简介●使用场景：美化网页，布局页面1.HTML的局限性只关注内容的语义2.CSS——网页的美容师层叠样式表（css样式表）3.最大的价值由HTML专注去做结构呈现，样式交给css，即结构（HTML)与样式（css)相分离4.css的语法规范css规则由两个主要的部分构成：选择器以及一条或多条声明<style> /*选择器 {样式} */ /*给谁改样式 {改什么样式} */ p { color:
复制链接

扫一扫