CSS美化页面

CSS美化页面

什么是CSS

CSS的概念

• Cascading Style Sheet 级联样式表
• 表现HTML或XHTML文件样式的计算机语言
  • 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的基本语法

选择器{声明1：
    声明2：
    ......}
h1{
    font-size:12px;
    color:#F00;
}

HTML中引入CSS样式

• 行内样式
  • 使用style属性引入CSS样式

  <h1 style="color:red;">style属性的应用</h1>
  <p style="font-size=14px;color:green;">直接在HTML标签中设置的样式</p>
  

• 内部样式表
  • CSS代码写在< head >的< style >标签中

  <style>
      h1{color:green;}
  </style>
  

• 外部样式表
  • CSS代码保存在拓展名为.css的样式表中
    • 链接式<link href="style.css" rel="stylesheet" type="text/css"
    • 导入式@import url("style.css");

CSS样式优先级

• 行内样式>内部样式表>外部样式表
• 就近原则

CSS基本选择器3-1

• 标签选择器

  • HTML标签作为标签选择器的名称
    • <h1>...<h6>、<p>、<img/>
      p{font-size:16px}
      标签选择器{属性：值}

• 类选择器
  .class{font-size:16px}
  类选择器 类名{属性：值}

• ID选择器
  #id{font-size:16px}
  ID选择器 ID名称{属性：值}

  基本选择器的优先级

  • ID选择器>类选择器>标签选择器
  • 标签选择器不遵循“就近原则”

CSS的高级选择器

• 层次选择器
  

• 属性选择器
  

CSS美化网页元素

• 使用CSS设置字体样式和文本样式
• 使用CSS设置超链接样式
• 使用CSS设置列表样式
• 使用CSS设置背景样式

< span >标签

• < span >标签 的作用

  • 能让某几个文字或者某个词语凸显出来

  <p>课工场<span id="dream">每时每刻给你新机会</span></p>
  <p class="bird">选择<span>课工场</span>,成就你的梦想</p>
  

  字体样式

  

  

  文本样式

##### 文本样式
- color颜色
    - RGB
        - 十六进制方法表示颜色:前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
        - rgb(r,g,b):正整数0~255
    - RGBA
        - 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1
- color属性

排版文本段落

• 水平对齐方式

  • text-alin属性
    

• 首行缩进

  • text-infet:em 或 px

• 行高

  • line-height: px

• 文本修饰和垂直对齐

  • 文本装饰

    • text-decoration属性
      

  • 垂直对齐方式

    • vertical-align属性:middle、top、bottom
      

  超链接伪类

  伪类样式

  

  使用CSS设置超链接

  

  列表样式

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style
    

  网页背景

  

什么是盒模型

边框

• 边框颜色:border-color
• 边框粗细:border-width
• 边框样式:border-style
• border简写
  • border:边框粗细 边框样式 边框颜色
    

外边距

• margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin
    

外边距的妙用

网页居中对齐

• 网页居中对齐的必要条件
  • 块元素
  • 固定宽度

内边距

• padding
  • padding-left
    = padding-right
  • padding-top
  • padding-bottom
  • padding
    

常见的网页布局

• 上下结构
• 上中下结构
• 上中下结构：1-2-1结构
• 上左中右下结构：1-3-1结构

浮动——float属性

设置左浮动

• 依次设置三个图片所在< div >左浮动
  

设置右浮动

• 依次设置layer01和layer02右浮动
  

边框塌陷

• layer04设置宽度和右浮动后，为什么边框塌陷了?怎么解决?
  • 浮动元素脱离标准文档流
  • 清除浮动

清除浮动

clear属性

清除左右浮动

清除两侧浮动

position属性

relative属性值

浮动元素设置相对定位

绝对定位 absolute属性值

绝对定位不设置偏移量

固定定位2-1

fixed属性值

• 偏移设置:left、right、top、bottom
• 类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

固定定位2-2

定位小结3-1

• 相对定位的特性
  • 相对于自己的初始位置来定位
  • 元素位置发生偏移后，它原来的位置会被保留下来
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
• 相对定位的使用场景
  • 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

定位小结3-2

• 绝对定位的特性
  • 绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
  • 元素位置发生偏移后，原来的位置不会被保留
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
  • 设置绝对定位的元素脱离文档流
• 绝对定位的使用场景
  • 一般情况下。绝对定位用在下拉菜单、焦点图轮播、弹出数字泡、特别花边等场景
    

定位小结3-3

• 固定定位的特性
  • 相对浏览器窗口来定位
  • 偏移量不会随滚动条的移动而移动
• 固定定位的使用场景
  • 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
    

j-1691830874838)]
[外链图片转存中…(img-Pt3hKyFt-1691830874838)]

定位小结3-3

• 固定定位的特性
  • 相对浏览器窗口来定位
  • 偏移量不会随滚动条的移动而移动
• 固定定位的使用场景
  • 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
    [外链图片转存中…(img-gJdEMEfy-1691830874839)]