CSS

W3C标准

  • 结构化标准语言（HTML、XML）

  • 表现标准语言（CSS）

  • 行为标准语言（DOM、ECMAScript ）

HTML（结构）+ CSS（表现）+ JavaScript（交互）

什么是CSS

如何学习

  1. CSS是什么

  2. CSS怎么用（快速入门）

  3. CSS选择器（重点 + 难点）

  4. 美化网页（文字、阴影、超链接、列表、渐变..）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 动画（特效效果）

一、CSS是什么

Cascading Style Sheet 层叠级联样式表 （美化网页）

二、发展史

CSS1.0

CSS2.0 [DIV(块)+CSS：提供了HTML和CSS结构分离的思想，使网页变得简单，有利于SEO]

CSS2.1 [浮动、定位]

CSS3.0 [圆角、阴影、动画..]

三、快速入门

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>我的第一个css程序</title>
 ​
         <!--
             规范：style标签可以编写css代码，每一个声明用分号隔开
             选择器 {
                 声明1;
                 声明2;
                 声明3;
             }
          -->
         <!-- <style> -->
         <!--     h1 { -->
         <!--         color: red; -->
         <!--     } -->
         <!-- </style> -->
 ​
         <link rel="stylesheet" href="css/style.css">
 ​
     </head>
     <body>
         <h1>标题</h1>
     </body>
 </html>

建议使用HTML和CSS分离的规范

 

CSS的优势： 1、内容和表现分离 2、网页结构表现统一，可以实现复用 3、样式丰富 4、利于SEO

四、CSS的四种导入方式

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>导入方式</title>
 ​
         <!-- 内部样式 -->
         <style>
             h1 {
                 color: green;
             }
         </style>
 ​
         <!-- 外部样式（链接式：属于html） -->
         <link rel="stylesheet" href="css/style.css">
 ​
         <!-- 外部样式（导入式：属于css） -->
         <!-- <style> -->
         <!--     @import "css/style.css"; -->
         <!-- </style> -->
     </head>
     <body>
         <!-- 样式优先级：就近原则 -->
         <!-- 1.行内样式 -->
         <h1>标题</h1>
     </body>
 </html>

选择器

作用：选择页面上的某一个或者某一类元素

一、基本选择器

  1. 标签选择器：选择一类标签，格式：标签{}

     <!DOCTYPE html>
     <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>标签选择器</title>
     ​
             <style>
                 /*标签选择器会选择页面上所有这个标签的元素*/
                 h1 {
                     color: #f7ff75;
                     background: red;
                     border-radius: 8px;
                 }
                 p {
                     font-size: 60px;
                 }
             </style>
         </head>
         <body>
             <h1>YLF</h1>
             <h1>BQ</h1>
             <p>羊羊羊</p>
         </body>
     </html>

     

  2. 类选择器：选择类名一致的所有标签，格式：.类名{}

     <!DOCTYPE html>
     <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>类选择器</title>
     ​
             <style>
                 /*类选择器可以复用*/
                 .class1 {
                     color: #f7ff75;
                 }
                 .class2 {
                     color: #f7f;
                 }
             </style>
         </head>
         <body>
             <h1 class="class1">标题1</h1>
             <h1 class="class2">标题2</h1>
             <h1 class="class1">标题3</h1>
     ​
             <p class="class1">段落</p>
         </body>
     </html>

     

  3. id选择器：选择id名唯一对应的标签，格式：#id名{}

     <!DOCTYPE html>
     <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>id选择器</title>
     ​
             <style>
                 /*
                 id选择器全局唯一
                 优先级：id选择器 > 类选择器 > 标签选择器
                 */
                 #title1 {
                     color: #f7ff75;
                 }
                 .class1 {
                     color: #ff77ff;
                 }
                 h1 {
                     color: red;
                 }
             </style>
         </head>
         <body>
             <h1 id="title1" class="class1">标题1</h1>
             <h1 class="class1">标题2</h1>
             <h1 class="class1">标题3</h1>
             <h1>标题4</h1>
             <h1>标题5</h1>
         </body>
     </html>

二、层次选择器

  1. 后代选择器

     /*后代选择器*/
     body h1 {
     color: green;
     }

     

  2. 子选择器

     /*子选择器*/
     body>h1 {
     color: red;
     }

     

  3. 相邻兄弟选择器

     /*相邻兄弟选择器 向下相邻且同层同标签*/
     .class1 + h1 {
     color: aqua;
     }

     

  4. 通用兄弟选择器

     /*通用兄弟选择器 向下同层同标签*/
     .class1 ~ h1 {
     color: blue;
     }

 

三、结构伪类选择器

限制条件的选择器

 /*选择ul的第一个子元素*/
 ul li:first-child {
     color: #ff77ff;
 }
 /*选择ul的最后一个子元素*/
 ul li:last-child {
     color: #f7ff75;
 }
 a:hover {
     background: blue;
 }

 

四、属性选择器（常用）

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>属性选择器</title>
 ​
         <style>
             .class1 a {
                 display: block;
                 float: left;
                 color: gray;
                 background: #0654dc;
                 height: 50px;
                 width: 50px;
                 margin-right: 5px;
                 border-radius: 6px;
                 text-align: center;
                 text-decoration: none;
                 font: bold 20px/50px Arial;
             }
 ​
             /*选择有id属性的元素*/
             /*a[id] {*/
             /*    background: #ff77ff;*/
             /*}*/
 ​
             /*选择id为id1的元素*/
             /*a[id=id1] {*/
             /*    background: #c50f61;*/
             /*}*/
 ​
             /*
             选择class中包含links的元素
             =绝对等于
             *=包含等于
             */
             /*a[class*="links"] {*/
             /*    background: #ff33d3;*/
             /*}*/
 ​
             /*
             选择href以https开头的元素
             ^=
             */
             /*a[href^=https] {*/
             /*    background: #ff77ff;*/
             /*}*/
 ​
             /*
             选择href以pdf结尾的元素
             $=
             */
             a[href$=pdf] {
                 background: #ff77ff;
             }
         </style>
     </head>
     <body>
         <p class="class1">
             <a href="https:www.baidu.com" class="links item first" id="id1">1</a>
             <a href="" class="links item active" target="_blank" title="title2">2</a>
             <a href="image/123.html" class="links item" id="id3">3</a>
             <a href="image/123.png" class="links item">4</a>
             <a href="image/123.jpg" class="links item">5</a>
             <a href="abc" class="links item">6</a>
             <a href="/a.pdf" class="links item">7</a>
             <a href="/adc.pdf" class="links item">8</a>
             <a href="abc.doc" class="links item">9</a>
             <a href="a.doc" class="link item last">10</a>
         </p>
     </body>
 </html>

 

美化网页

一、为什么美化网页

  1. 有效传递页面信息

  2. 吸引用户

  3. 凸显主题

  4. 提高用户体验

span标签：重点突出的字，使用span套起来

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>span标签</title>
 ​
         <style>
             #index {
                 color: #ff77ff;
             }
         </style>
     </head>
     <body>
         欢迎来到<span id="index">首页</span>
     </body>
 </html>

 

二、字体样式

 /*
 font-family: 字体系列
 font-size: 字体大小
 font-weight: 字体粗细
 color: 字体颜色
 */
 ​
 body {
     font-family: "Bookman Old Style", 楷体;
 }
 ​
 h1 {
     font-size: 50px;
 }
 ​
 #id1 {
     font-weight: bold;
 }
 ​
 /*
 font: oblique bold   20px    宋体;
 字体格式 字体粗细 字体大小 字体系列
 */
 .class1 {
     font: oblique bold 20px 宋体;
 }

 

三、文本样式

  1. 颜色

  2. 文本对齐方式

  3. 首行缩进

  4. 行高

  5. 装饰

  6. 文本图片水平对齐

  7. 文本阴影

 /*
 color(颜色)：
     1.单词
     2.RGB(红绿蓝) 0~F
       RGBA(红绿蓝+透明度[百分比])
 text-align(文本对齐方式)
 text-indent(文本缩进)
 */
 h1 {
     color: rgba(0, 255, 255, 0.9);
     text-align: center;
 }
 .indent {
     text-indent: 2em;
 }
 /*
 当行高等于块高时，单行文本上下居中
 line-height(行高)：单行文本的高度
 height(块高)：元素的高度
 */
 .center {
     background: #ff77ff;
     height: 100px;
     line-height: 100px;
 }
 #overline {
     text-decoration-line: overline;
 }
 #line-through {
     text-decoration-line: line-through;
 }
 #underline {
     text-decoration-line: underline;
 }
 ​
 /*文本图片水平对齐（需要参照物）*/
 img, span {
     vertical-align: middle;
 }
 ​
  /*text-shadow(文本阴影)*/
 #shadow {
     height: 50px;
     text-shadow: 10px 10px 5px #4f034f;
 }

 

四、超链接伪类

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>超链接伪类</title>
 ​
         <style>
             /*默认*/
             a {
                 color: #000000;
             }
 ​
             /*未访问的链接*/
             a:link {
                 color: red;
             }
 ​
             /*已访问的链接*/
             a:visited {
                 color: #e809e8;
             }
 ​
             /*
             当鼠标悬停在链接上
             a:hover 必须位于 a:link 和 a:visited 之后
             */
             a:hover {
                 color: orange;
             }
 ​
             /*
             被选择的链接
             a:active 必须位于 a:hover 之后
             */
             a:active {
                 color: blue;
             }
         </style>
     </head>
     <body>
         <!-- 链接地址为空时默认已访问 -->
         <!--
             1.访问链接后浏览器会有历史记录，清除浏览链接历史记录即可恢复
             2.访问同一链接地址，访问后会一起被标记为已访问 -->
         <p><a href="../3、文本样式/image/太空人头像.jpg">超链接1</a></p>
         <p><a href="../3、文本样式/image/太空人头像.jpg">超链接2</a></p>
         <p><a href="">超链接3</a></p>
     </body>
 </html>

五、列表样式

 /*
 list-style(列表样式):
     none - 不显示项目标记
     disc - 一个实心圆圈（默认值）
     circle - 一个空心圆
     square - 一个填充的正方形
     decimal - 十进制数，从 1 开始
 */
 list-style: none;

六、背景样式

 /*背景图片*/
 div {
     border: 1px solid red;
     width: 1000px;
     height: 700px;
     /*默认全部平铺*/
     background-image: url("image/太空人头像.jpg");
 }
 #div1 {
     background-repeat: no-repeat;
 }
 #div2 {
     background-repeat: repeat-x;
 }
 #div3 {
     background-repeat: repeat-y;
 }
 /*渐变*/
 background-color: #4158D0;
 background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

 

盒子模型

一、盒子是什么

 

margin: 外边距 border: 边框 padding:内边距

二、边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

 #login {
     border: 2px solid red;
     width: 300px;
 }

三、内外边距

四、圆角边框

 /*
 border-radius:
 顺时针旋转(左上开始)
 您可以设置一个半径来制作圆角，或设置两个半径来制作椭圆角。
 */
 div {
     width: 200px;
     height: 200px;
     border: 20px solid red;
     border-radius: 50px 10px 100px;
 }

五、盒子阴影

 div {
     width: 200px;
     height: 200px;
     border: 20px solid red;
     box-shadow: 10px 10px 10px yellow;
 }

 

浮动

一、标准文档流

CSS标准文档流 - 简书 (jianshu.com)

二、display

 /*
 block：块元素
 inline: 行内元素
 inline-block：块元素，可以内联
 */
 div {
     width: 100px;
     height: 100px;
     border: 2px solid red;
     display: inline-block;
     vertical-align: top;
 }
 ​
 span {
     width: 100px;
     height: 100px;
     border: 2px solid red;
     display: inline-block;
 }

这是一种实现行内元素排列的方式，但是我们很多情况都使用float

三、float

左右浮动

 .layer01 {
     border: 2px #F00 dashed;
     display: inline-block;
     float: right;
 }

四、父级边框塌陷的问题

clear

 .layer04 {
     border: 2px #666 dashed;
     font-size: 16px;
     line-height: 30px;
     display: inline-block;
     float: right;
     clear: both;
 }

  1. 增加父级元素高度

     #container {
         border: 2px #000000 solid;
         height: 800px;
     }

  2. 增加一个空的div标签，清除浮动

     <div id="clear"></div>
     #clear {
         clear: both;
         margin: 0;
         padding: 0;
     }

  3. overflow

     #container {
         border: 2px #000000 solid;
         overflow: hidden;
     }

  4. 父类添加一个伪类：after

     #container:after {
         content: "";
         display: block;
         clear: both;
     }

小结：

  1. 增加父级元素高度 简单，元素有固定高度会被限制

  2. 浮动元素后面增加空div 简单，代码中尽量避免空div

  3. overflow 简单，尽量避免使用下拉

  4. 父类添加一个伪类：after（推荐） 没有副作用

五、对比

  • display 方向不可以控制

  • float 浮动起来的会脱离标准文档流，要解决父级边框塌陷问题

定位

一、相对定位

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>相对定位</title>
 ​
         <style>
             div {
                 margin: 10px;
                 padding: 5px;
                 font-size: 16px;
                 line-height: 30px;
             }
 ​
             #container {
                 border: 2px solid #ff77ff;
                 padding: 0;
             }
 ​
             #first {
                 border: 2px dashed #0654dc;
                 position: relative; /*相对定位*/
                 top: -20px;
                 left: -20px;
             }
 ​
             #second {
                 border: 2px dashed #00FF00;
             }
 ​
             #third {
                 border: 2px dashed #4f034f;
                 position: relative;
                 bottom: -50px;
                 right: 20px;
             }
         </style>
     </head>
     <body>
         <div id="container">
             <div id="first">第一个盒子</div>
             <div id="second">第二个盒子</div>
             <div id="third">第三个盒子</div>
         </div>
     </body>
 </html>

相对于原来的位置，进行指定的偏移，元素任然在标准文档流中，原来的位置会被保留

二、绝对定位

  1. 父级元素没有定位的前提下，相对于浏览器定位

  2. 父级元素存在定位的前提下，我们通常会相对于父级元素进行偏移

 div {
     margin: 10px;
     padding: 5px;
     font-size: 16px;
     line-height: 30px;
 }
 ​
 #container {
     border: 2px solid #ff77ff;
     padding: 0;
     position: relative;
 }
 ​
 #first {
     border: 2px dashed #0654dc;
 }
 ​
 #second {
     border: 2px dashed #00FF00;
     position: absolute;
     right: 30px;
     top: -20px;
 }
 ​
 #third {
     border: 2px dashed #4f034f;
 }

相对于最近有定位的祖先元素的位置，进行指定的偏移，元素任然在标准文档流中，原来的位置不会被保留

三、固定定位

 div {
     margin: 10px;
     padding: 5px;
     font-size: 16px;
     line-height: 30px;
 }
 ​
 #container {
     border: 2px solid #ff77ff;
     padding: 0;
     height: 1000px;
 }
 ​
 #first {
     border: 2px dashed #0654dc;
 }
 ​
 /*绝对定位*/
 #second {
     border: 2px dashed #00FF00;
     height: 200px;
     position: absolute;
     left: 0;
     bottom: 0;
 }
 ​
 #third {
     border: 2px dashed #4f034f;
     width: 50%;
     height: 100px;
     position: fixed;
     left: 0;
     bottom: 0;
 }

四、z-index

图层（z-index）:默认为0，最高无限（同级图层时，后面编写的在表面）

 #container {
     width: 360px;
     height: 308px;
     border: 2px solid red;
     position: relative;
 }
 ​
 #barrage, #background {
     width: 360px;
     height: 30px;
     line-height: 30px;
     position: absolute;
     top: 200px;
 }
 ​
 #background {
     background: #7272f3;
     z-index: 0;
     opacity: 0.5; /*背景透明度*/
 }
 ​
 #barrage {
     z-index: 1;
 }

动画

 

posted @ 2022-02-22 19:44  不不不巧  阅读(192)  评论(0)    收藏  举报