CSS层叠样式表

客官°小女子只卖身不卖艺 2023-06-22 06:23 130阅读 0赞

CSS层叠样式表

回顾

  1. 1、HTML概述
  2.     Hyper Text Markup Language 超文本标记语言
  3.     作用:创建网页文档，包含文字、图片、链接、音频、视频等。
  4. 2、HTML的常用基本标签
  5.     结构标签: html   head  title  meta  body
  6.     排版标签: <br/> <p></p> <hr/>  注释<!-- -->
  7.     标题:h1--h6
  8.     容器标签: div 块级元素   span 行级标签
  9.     列表：ul 无序列表  ol 有序列表  dl定义列表
  10.     图片：img 属性 src  width   height  border  alt 替换文字 title 标题
  11.     链接: a 属性 href链接的地址 target:打开窗口的位置 _blank 新窗口 _self 自身窗口 _parent 父窗口 _top顶部窗口  _search 打开窗口的名称 自定义名称
  12.         页面间跳转
  13.         锚链接   <a name="mark">
  14.     表格：
  15.         table 表格
  16.             tr 行
  17.             td 单元格 th
  18.     格式化标签: b 加粗
  19.               em 斜体
  20.               i  斜体
  21.               strong  加粗
  22.               sup 上标
  23.               sub 下标
  24.               ins  插入
  25.               del 删除
  26. 3、HTML的表单标签
  27.       form 表单  属性   action 提交服务器地址  method  get  post  enctype 控制编码类型
  28.           表单元素：
  29.           input标签：
  30.               type: text 文本框
  31.                     password 密码框
  32.                     radio  单选按钮
  33.                     checkbox 复选框  
  34.                     submit 提交按钮
  35.                     reset 重置按钮
  36.                     imgage 图片按钮
  37.                     button 普通按钮
  38.                     file  文件
  39.                     hidden 隐藏
  40.               name 属性
  41.              value 属性
  42.              checked 属性
  43.          select 下拉框    
  44.              option 选择项
  45.          textarea 文本域    
  47. 4 框架标签
  48.     frameset 框架集 
  49.         rows 行分割
  50.         cols 列分割
  51.         frame 框架
  53. 5、HTML的特殊字符
  54.     <
  55.     >
  56.     ©
  57.     ®
  58.     ¥
  59.     ™

今日内容

  1. 1、CSS简介
  2. 2、CSS使用方式
  3. 3、CSS选择器
  4. 4、CSS属性
  5. 5、CSS盒子模型
  6. 6、CSS扩展属性

教学目标

  1. 1、了解CSS简介
  2. 2、掌握CSS使用方式
  3. 3、掌握CSS选择器
  4. 4、掌握CSS属性
  5. 5、掌握CSS盒子模型
  6. 6、熟悉CSS扩展属性

第一节 CSS简介

1.1 CSS概念
  1. CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  2. 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。

CSS作用：

  1. 1. 修饰美化html网页。
  2. 2. 外部样式表可以提高代码复用性从而提高工作效率。
  3. 3. html内容与样式表现分离，便于后期维护。
1.2 CSS特点
  1. 1 丰富的样式定义
  2.     CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
  4. 2 易于使用和修改
  5.     CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
  6. 另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
  8. 3 多页面应用
  9.     CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
  11. 4 层叠
  12.     简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
  14. 5 页面压缩
  15.     在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
1.3 CSS语法规则

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

  1. 选择器通常是您需要改变样式的 HTML 元素。

  2. 每条声明由一个属性和一个值组成。

基础语法：选择器｛属性：值;属性:值…… ｝

示例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQqtEUoM-1576315275494)(pic/c1.gif)]

提示：请使用花括号来包围声明。

  1. 2.注意事项：
  2.         a.如果值为若干单词，则要给值加引号；font-family: "黑体","华文彩云","微软雅黑","arial";
  3.         b.多个声明之间使用分号;分开；
  4.         c.css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

第二节 CSS使用方式

2.1 内联方式
  1. 把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：
  2.        <div style="color:blue;font-size:50px">This is my HTML page. </div>
  3.  好处:可以单独什么某个元素样式，缺点：不利于样式重用
2.2 内部方式
  1. 在head标签中使用style标签引入css,示例如下:
  2.        <style type=“text/css”> //告诉浏览器使用css解析器去解析
  3.             div{color:red;font-size:50px}
  4.        </style>
  5. 好处：可以控制页面中多个元素样式，缺点：只能一个页面使用
2.3 外部方式
  1. 将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。
  2.  示例如下：
  3.        单独文件div.css:  内容示例：div{color:green;font-size:50px}
  4.        引用语句写在head标签内部，
  6.  链接式：      
  7. <link rel="stylesheet" type="text/css" href=“div.css"></link>
  8.       rel:代表当前页面与href所指定文档的关系
  9.       type:文件类型，告诉浏览器使用css解析器去解析
  10.       href:css文件地址
  12.  导入式：
  14.   <style type="text/css">
  15.        @import url("div.css")
  16.   </style>
  17.  该内容放在head标签中
  19.  备注:link和@import区别：
  20.            1.link所有浏览器都支持，@import某些版本低的IE不支持
  21.            2.@import是等待html加载完成才加载，link解析到这个语句，就加载
  22.            3.@import不支持js动态修改

优先级：内联样式>内部样式>外部样式，就近原则。注意：内部样式和外部样式的位置

  1. <link href="mycss.css" rel="stylesheets" type="text/css">
  2. <style type="text/css">
  4. </style>
  7. <body>
  9. </body>

第三节 CSS选择器

主要用于选择需要添加样式的html元素

3.1 基本选择器
3.1.1 标签选择器

在head中使用style标签引入在其中声明标签选择器:

html标签{属性:属性值}，

具体示例如下:

  1. <style type="text/css">
  2.          span{
  3.     color: red;font-size: 100px}
  4.   </style>
3.1.2 id选择器

给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}

  1. 具体示例如下:
  2.     创建id选择器：
  3.         <div id="s1">hello,everyone!</div>
  4.         <div id="s2">hello,everyone!</div>
  5.          <div id="s3">hello,everyone!</div>
  6.          根据id选择器进行html文件修饰 
  7.         <style type="text/css">
  8.               #s1{
  9.     color: red;font-size: 100px}
  10.               #s2{
  11.     color: green;font-size: 100px}
  12.               #s3{
  13.     color: blue;font-size: 100px}
  14.         </style>
3.1.3 class选择器

给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}，具体示例如下:

  1. 创建class选择器：
  2.            <div class="s1">hello,everyone!</div>
  3.            <div class="s2">hello,everyone!</div>
  4.            <div class="s3">hello,everyone!</div>
  5. 根据id选择器进行html文件修饰 
  6. <style type="text/css">
  7.           .s1{
  8.     color: purple;font-size: 100px}
  9.           .s2{
  10.     color: pink;font-size: 100px}
  11.           .s3{
  12.     color: yellow;font-size: 100px}
  13. </style>

备注:以上基本选择器的优先级从高到低:id ,class ,元素

3.2 属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明,

  1. 格式为:html标签[属性='属性值']{
  2.     css属性:css属性值;}
  3.     或者html标签[属性]{
  4.     css属性:css属性值;}， 
  5. 具体示例如下:
  6. body内容：
  7.      <form name="login" action="#" method="get">
  8.         <font size="3">用户名：<font> 
  9.          <input type=“text" name="username" value="zhangsan" /> </br>
  10.       密码： <input type="password" name="password" value="123456" /> </br>
  11.             <input   type="submit" value="登录"></input>
  12.     </form>
  14.  head中书写：
  15. <style type="text/css">
  16.         input[type='text'] {
  18.             background-color: pink
  19.         }
  20.         input[type='password'] {
  22.             background-color: yellow
  23.         }
  24.         font[size] {
  26.             color: green
  27.         }
  28.         a[href] {
  30.             color: blue;
  31.         }
  32. </style>
3.3 伪元素选择器

主要是针对a标签

  1. 语法：
  2.               静止状态 a:link{
  3.     css属性}
  4.               悬浮状态 a:hover{
  5.     css属性}
  6.               触发状态 a:active{
  7.     css属性}
  8.               完成状态  a:visited{
  9.     css属性}
  10. 具体示例如下：
  11.    <a href="https://hao.360.cn/">点我吧</a>
  12.         <style type="text/css">
  13.             <!--静止状态 -->
  14.             a:link {
  15.     color: red;}
  16.             <!--悬浮状态 -->’
  17.             a:hover {
  18.     color: green;}
  19.             <!--触发状态 -->
  20.             a:active {
  21.     color: yellow;}
  22.             <!--完成状态 -->
  23.             a:visited {
  24.     color: blue;}
  25.         </style>
3.4 层级选择器

父级选择器，子级选择器….,具体示例如下：

后代选择器

div p{…} 表示div中的p标签，所有的p,后代

div span{…} 表示div中的span标签，包括所有的span，后代

子代选择器

div>span{…} 表示 div中有一个span， span是子代

相邻兄弟 +

通用兄弟 ~

  1. <div id="div1">
  2.             <div class="div11">
  3.                 <span>span1-1</span>
  4.             </div>
  5.             <div class="div12">
  6.                 <span>span1-2</span>
  7.             </div>
  8.  </div>
  9.         <div class="div2">
  10.             <div id="div22">
  11.                 <span>span2-1</span>
  12.             </div>
  13.             <div id="div23">
  14.                 <span>span2-2</span>
  15.             </div>
  16.         </div>
  18.         <style type="text/css">
  19.             #div1 .div11{
  20.      color:red;}
  21.             #div1 .div12{
  22.      color:purple;}
  23.             .div2 #div22{
  24.      color:green;}
  25.             .div2 #div23{
  26.      color:blue;}
  27.         </style>

第四节 CSS属性

4.1 文字和文本属性

文字属性

  1. 1>.font-size:设置字体大小
  2. 2>.font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等
  3. 3>.font-style:规定斜体字,常见的值：
  4.                                normal - 文本正常显示
  5.                                 italic - 文本斜体显示 字体斜体
  6.                                 oblique - 文本倾斜显示 变形斜体
  7. 4>.font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。
  8.                                 100 对应最细的字体变形，900 对应最粗的字体变形。
  9.                                 数字 400 等价于 normal，而 700 等价于 bold。
  10.       备注：
  11.       斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。
  12.       倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
  13. 通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样
  15. 简写： 
  16. font: italic  bold  30px "幼圆","黑体"; /*style  weight  size family  swsf*/

文本属性

  1. 1>.color:设置文本颜色
  2. 2>.text-indent:缩进元素中文本的首行,取值类型如下：
  3.              1》text-indent:5em;表示此段落第一行缩进5个字符的宽度
  4.              2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
  5. 3>.text-decoration:
  6.              none:会关闭原本应用到一个元素上的所有装饰
  7.                underline: 添加下划线
  8.              overline:在文本的顶端画一个上划线
  9.             line-through:在文本中间画一个贯穿线
  10.                blink:让文本闪烁(无效果)
  11. 4>.text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)
  12. 5>.word-spacing: 字符之间的间隔
  13. 6>.letter-spacing: 单词或者字母之间的间隔
  14. 7>.line-height:设置行高 line-height:25px;
4.2 背景属性
  1. 1>.background-color：设置背景颜色，默认透明
  2. 2>.background-image:url("图片路径"):设置背景图片
  3. 3>.background-repeat:repeat-y:只在垂直方向都平铺
  4.                  repeat-x:只在水平方向都平铺
  5.                  repeat:在水平垂直方向都平铺
  6.                  no-repeat:任何方向都不平铺
  7. 4>.background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center 
  9. /*简写 没有顺序*/
  10. background: red  center no-repeat url(img/003.jpg);
4.3 列表属性
  1. list-style-type:decimal;改变列表的标志类型
  2. list-style-image: url("images/dog.gif");用图像表示标志
  3. list-style-position: inside;确定标志出现在列表项内容之外还是内容内部 
  5. 简写
  6. list-style: decimal url(img/001.png) inside;
  7. 去掉样式:
  8. list-style:none;
  9. list-style-type:none;
4.4 尺寸显示轮廓属性
  1. width:设置元素的宽度
  2. height:设置元素的高度
  3. 显示属性(display)
  4. display: none 不显示
  5.         block:块级显示
  6.         inline:行级显示
  7.         inline-block:行级块
  8. 轮廓（outline）
  9.     绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性：
  10. outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);设置轮廓的样outline-color:red;设置轮廓的颜色
  11. outline-width:10px设置轮廓的宽度
4.5 浮动属性

浮动(float)的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在标准文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-17RxkkFF-1576315275495)(pic/c2.gif)]

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5wIgTjYg-1576315275496)(pic/c3.gif)]

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

clear 属性

规定元素的哪一侧不允许其他浮动元素。

可能的值






























值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
4.6 定位属性
4.6.1 静态定位（默认定位方式）static
4.6.2 相对定位(relative)

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

示例代码：

  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             h2.pos_left {
  6.                 position: relative;
  7.                 left: -20px
  8.             }
  10.             h2.pos_right {
  12.                 position: relative;
  13.                 left: 20px
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <h2>这是位于正常位置的标题</h2>
  19.         <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
  20.         <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
  21.         <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
  22.         <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
  23.         <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
  24.     </body>
  25. </html>
4.6.3 绝对定位(absolute)

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框.

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <style type="text/css">
  5.             h2.pos_abs {
  7.                 position: absolute;
  8.                 left: 100px;
  9.                 top: 150px
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <h2 class="pos_abs">这是带有绝对定位的标题</h2>
  15.         <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
  16.     </body>
  17. </html>
4.6.4 固定定位(fixed)

元素框的表现类似于将 position 设置为 fixed，不过其包含块是视窗本身。

示例如下(网站左下角和右下角广告)：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             #left {
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: red;
  12.                 position: fixed;
  13.                 left: 0;
  14.                 bottom: 0;
  15.             }
  17.             #right {
  19.                 width: 200px;
  20.                 height: 200px;
  21.                 background-color: green;
  22.                 position: fixed;
  23.                 right: 0;
  24.                 bottom: 0;
  25.             }
  26.             #middle{
  28.                 width: 200px;
  29.                 height: 200px;
  30.                 background-color: blue;
  31.                 position: fixed;
  32.                 left: 0;
  33.                 bottom: 50%;
  34.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <div id="left">
  40.         </div>
  41.         <div id="right">
  42.         </div>
  43.         <div id="middle">
  44.         </div>
  45.     </body>
  46. </html>

第五节 CSS盒子模型

在这里插入图片描述

5.1 边框属性
  1. border-style:边框样式，值有以下情况：
  2.                 solid:实线
  3.                 double:空心线
  4.                 dashed:虚线组成的边框
  5.                 dotted:圆点组成的边框
  6. border-color:边框颜色
  7. border-width:边框宽度
  8. 简写
  9. border: 1px solid red;
5.2 外边距属性
  1. margin:外间距,边框和边框外层的元素的距离
  2. margin:四个方向的距离(top right bottom left)
  3. margin-top:
  4. margin-bottom:
  5. margin-left:
  6. margin-right:
5.3 内边距属性
  1. padding:内间距,元素内容和边框之间的距离((top right bottom left)) 
  2. padding-left:
  3. padding-right:
  4. padding-top:
  5. padding-bottom:

第六节 CSS3扩展属性

6.1 border-radius

圆角属性

示例： border-radius: 25px;

6.2 box-shadow

用于向方框添加阴影

示例：box-shadow: 10px 10px 5px #888888;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3J61VEb1-1576315275498)(pic/c7.png)]

6.3 background-size

属性规定背景图片的尺寸

  1. <body style="text-align: center;
  2.         background:url(img/1.png);
  3.         background-size: 200px 300px;
  4.         background-repeat: no-repeat;">
  5.     </body>
6.4 background-image

为指定元素使用多个背景图像

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSjPOIMt-1576315275499)(pic/c9.png)]

6.5 text-shadow

可向文本应用阴影。

示例：text-shadow: 5px 5px 5px #ffff00;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mW4emyB4-1576315275499)(pic/c8.png)]

第七节 HTML结合CSS完成淘宝分类页

7.1 案例效果图

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS层叠样式表的入门

    目录：点击可快速跳转 什么是css？ css的格式： css样式可以写在什么地方？ CSS的选择器有哪些？ 4）复合选择器： 5）属性选择器： 6）伪类选择器：

    水深无声水深无声/ 0 赞/ 609 阅读