WEB技术之CSS

最新推荐文章于 2021-04-01 10:24:32 发布

CHAPA

最新推荐文章于 2021-04-01 10:24:32 发布

阅读量310

点赞数

分类专栏：作业文章标签： html css html5 web

本文链接：https://blog.youkuaiyun.com/CHAPA/article/details/106434613

版权

作业专栏收录该内容

10 篇文章

订阅专栏

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 背景重复