CSS

HTML基础回顾

HTML: 超文本标记语言
常用标签:
- p: 段落;
- br: 简单换行;
- h#: 标题;
- hr: 分割线
- font: 字体:
  - color: 颜色;
  - size: 大小.
- b: 加粗;
- i: 倾斜;
- strong: 带语义的加粗;
- em: 带语义的倾斜;
- img: 图片:
  - src: 相对路径;
  - width: 宽度;
  - height: 高度;
  - alt: 加载失败时的提示.
- 相对路径:
  - ./: 当前路径;
  - ../: 上一级路径;
  - ../../: 上上级路径.
- ul: 无序列表;
- ol: 有序列表;
  - li: 列表项.
- a: 超链接:
  - target: 打开方式;
  - href: 超链接地址;
- table: 列表:
  - table → tr → th/td;
  - tr: 行;
  - th: 表头;
  - td: 列;
  - rowspan: 跨行;
  - colspan: 跨列;
- form: 表单;
  - method: 提交方式: get/post;
  - action: 提交路径;
  - input:
    - type:
      - password: 密码框;
      - text: 文本;
      - submit: 提交按钮;
      - button: 普通按钮;
      - reset: 重置按钮;
      - radio: 单选按钮,通过name控制单选范围;
      - checkbox: 复选按钮;
      - email: 邮箱地址;
      - date: 日期;
      - tel: 电话号码.
- frameset: 框架:
  - frame: 内容;
  - rows: 按行划分;
  - cols: 按列划分;
  - 框架可以嵌套;
  - 使用frameset时要删除body.

CSS概述

CSS(Cascading Style Sheets): 层叠样式表;
作用 : 美化HTML界面;将页面搭建与美化分离,提高代码复用性.

CSS基础

HTML的块标签:
- div: 默认一行,自动换行;
- span: 同一行.
CSS简单语法:

<!-- style标签通常被写在head里 -->
<style>
	/* CSS选择器: 帮助我们找到需要被修饰的标签或元素. */
	选择器{
		属性名称1: 属性值1;
		属性名称2: 属性值2;
	}
</style>

常用选择器:

元素选择器:
- 语法: 元素名称{属性名称: 属性值;}
id选择器:
- 语法: #id名称{属性名称: 属性值;}
- id必须唯一.
类选择器:
- 语法: .类名称{属性名称: 属性值;}
常用选择器代码案例:

<html>
	<head>
		<meta charset="UTF-8">
		<title>常用选择器代码案例</title>
		<!-- style标签通常被写在head里 -->
		<!-- 元素选择器 -->
		<style>
			div{
				color: blue;
				font-size: large;
			}
		</style>
		<!-- id选择器: 以#开头,id必须唯一. -->
		<style>
			#div1{
				color: blueviolet;
			}
		</style>
		<!-- 类选择器: 以.开头. -->
		<style>
			.yu{
				color: darkgreen ;
			}
		</style>
	</head>
	<body>
		<div>元素选择器</div>
		<div id="div1">id选择器</div>
		<div class="yu">抽烟</div>
		<div class="guo">看书</div>
		<div class="yu">烫头</div>
	</body>
</html>

CSS的引入方式:
- 外部样式: 通过link标签引入外部css文件;
  - style.css:
```
div{
	color: blue;
	font-size: large;
}
#div1{
	color: blueviolet;
}
.yu{
	color: darkgreen ;
}
```
  - demo.html:
```
...
<head>
	<link rel="stylesheet" href="./style.css"/>
<head/>
...
```
- 内部样式: 直接在style标签内编写CSS代码;
  - 见常用选择器代码案例.
- 行内样式: 直接在标签中添加style属性,编写CSS样式.
  <div style="color: gold;">元素选择器</div>
CSS浮动: 会脱离正常的文档流,在文档流中不占空间:
- float: left/right;
- clear: 清除浮动
  - both: 两边都不允许浮动;
  - left: 左边不允许浮动;
  - right: 右边不允许浮动
CSS的优先级:
- 不同类型的选择器: 行内样式>id选择器>类选择器>元素选择器;
- 同类选择器:就近原则.
其它选择器:
- 选择器分组: 选择器1,选择器2{属性名称:属性值}
- 属性选择器:
  - 语法: 元素[属性1][属性2="属性值"]{属性名称:属性值}
  - 属性选择器代码案例:
```
<style>
	/* 元素选择器 */
	img{
		background-color: darkgreen;
	}
	/* 指定多个属性的属性选择器 */
	a[href][title]{
		text-decoration: double;
	}
	/* 指定单个属性值的属性选择器 */
	font[size=5]{
		font-style: italic;
	}
</style>
```
- 后代选择器:
  - 语法: 祖选择器父选择器子选择器{属性名称:属性值}
  - 后代选择器代码案例:
```
...
<style>
	h1 b i{color: red;}
	h1 em{background-color: aqua;}
</style>
...
<h1>
	<b>
		<i>
			孙内容
		</i>
	</b>
	<em>
		子内容
	</em>
</h1>
...
```
- 子元素选择器:
  - 语法: 父选择器>子选择器{属性名称:属性值};
  - 只适用于单层嵌套的标签.
- 伪类选择器: 通常用于a标签.

原文地址：https://www.cnblogs.com/dodd97/p/12876889.html

虾饺的学习笔记-CSS

CSS

HTML基础回顾

CSS概述

CSS基础