WEB技术之CSS

WEB技术之CSS

今日内容：

• CSS介绍
• 两个常用容器
• CSS语法
• CSS的三种引入方式
• CSS选择器

CSS介绍

• 
• CSS指层叠样式表
• 样式定义如何显示HTML元素
• 样式通常存储在样式表中
• 把样式添加到CSS文件中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在CSS文件中
• 多个样式定义可层叠一个

CSS的常用容器

• 容器：可以盛放其他元素的元素
  • div容器：用来盛放HTML内容,主要用来存放其他标签（<div></div>）
    • div:块级标签
  • span容器：主要用来存放文字<span></span>
    • 行级标签

CSS语法

• 

CSS三种引入方式

• 

• 行间引入：

  • style属性
  • style=“属性名：属性值；”属性名：属性值；“

• 内部样式：

  • 写在head中

  • 通过style标签来写

  • 严格遵守css语法

  • <style type="text/css">

    选择器{

    ​ 属性名：属性值；

    ​ 属性名：属性值；

    ​ }

    </style>

• 外部样式

  • 一般放在css文件夹下

  • 将样式保存在css文件中

  • 在原文件中使用link进行引入

  • <link rel="stylesheet" type="text/css" href="引入文件所在位置"/>

常用的CSS选择器

• 

• 标签选择器

  • 标签名{css声明}

• ID选择器

  • 操作的前提：操作内容必须有id属性
  • id的名称必须是唯一的
  • 写法：#id名称{css声明}
  • 使用场景：对于多个相同的标签，操作其中某一个

• 类选择器

  • class=“类名”
  • .+类名{css声明}
  • 操作前提：操作的内容必须要要class属性
  • 可以为多个内容设置class属性
  • 使用场景：可以同时为多个内容设置css样式

• 后代选择器

  • 使用空格进行分割
  • 找出指定的标签所有符合条件的后代标签，包括儿子级，孙子级，重孙子级等等
  • 标签名 后代标签名

• 子代选择器

  • 使用>进行分割
  • 找出指定的标签所有符合条件的子代标签
  • 标签名>子代标签

• 后代与子代的区别

  • 子代只找一级，后代找出所有
  • 

• 属性选择器

  • [属性=“值”]{css声明}
  • [属性]{css声明}

• 通配符选择器

  • *{css声明}
  • 用途一：基本设置
  • 用途二：清除浏览器默认样式

样式优先级

• 

• 一般来说：行内样式>内部样式>外部样式

  

• 

CSS常用标签样式详解

• 文本：
  • color：颜色
  • direction：文本方向
  • letter-spacing：字符间距
  • line-height：行高
  • text-align：字体对齐方式
  • text-decoration：字符修饰
• 字体：
  • font-family：字体系列
  • font-style：字体样式
  • font-size：字体大小
• 链接：
  • a：link：未访问链接
  • a：visited ：已访问链接
  • a：hover：鼠标移动到链接上
  • a：active：鼠标点击时
  • text-decoration：下划线修饰
    • none：空 没有
    • underline：下划线
    • line-through：穿越线，删除线
• 列表
  • 不同的列表项标选
    • ul.a {list-style-type: circle;}：空心圆
    • ul.b {list-style-type: square;} 方形
    • ol.c {list-style-type: upper-roman;} 大写罗马字体
    • ​ lower-roman：小写罗马字体
    • ol.d {list-style-type: lower-alpha;}小写英文
    • ​ upper-alpha：大写字母表
    • none 取消列表项
  • 作为列表项标记的图像
    • ul { list-style-image: url(‘图片地址’); }
• 表格
  • 表格边框
    • table, th, td { border: 1px solid black; }
  • 表格的宽度和高度：
    • Width和height属性定义表格的宽度和高度。
    • 下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
      • table { width:100%; } th { height:50px; }
  • 表格中的文本对齐和垂直对齐属性。
    • text-align属性设置水平对齐方式，向左，右，或中心：
    • td { text-align:right; }
• 边框
  • border-style：边框样式
    • solid：实线
    • dashed：虚线
    • dotted：点
    • double：双线
    • none：取消边框
• 背景
  • background
    • background-color 背景颜色
    • background-image 背景图片
    • background-repeat 背景重复

盒子模型

• 
• 

块级元素、行级元素

• 块级标签：独占一行
  • p div h1-h6 ul ol li dl dt dd
• 行内元素：一行内多个显示
  • span a i b
  • 行内块级
    • img input select

盒子类型转换

• display：inline-block 行内块级元素
• display：inline 行内元素
• display：block 块级元素
• display：none 隐藏元素
• 

CSS浮动

• 

CSS定位