css学习笔记
一、选择器
1.1 标记选择器
直接使用HTML标记名称作为选择器
p
{
color:red;
}
1.2 类选择器
用于选择html中class属性对应标记的元素
格式： .类名{}
<p class="red">我要红了</p>
<style type="text/css">
.red {color:red;}
</style>
1.3 id选择器
用于选择html中id对应标记的元素
格式： #id名{}
<p id="red">我要红了</p>
<style type="text/css">
#red {color:red;}
</style>
1.4 伪类选择器
添加一些选择器的特殊效果
格式： :伪类名{}
| 伪类名 | 说明 |
|---|---|
| link | 设置a标记在未被访问前的样式 |
| hover | 设置a标记在鼠标悬停时的样式 |
| active | 设置a标记在被鼠标点击与释放之间时 的样式 |
| visited | 设置啊标记在被访问后的样式 |
<style type="text/css">
a:hover{color:red;}
</style>
1.5 属性选择器
格式： [attribute]
| 符号 | 说明 |
|---|---|
| ~= | 包含指定词汇的标记 |
| |= | 带有带有指定值开头的属性的标记（value/“value-”开头的值） |
| ^= | 匹配属性值以指定值开头的标记 |
| $= | 匹配以指定值结尾的标记 |
| *= | 匹配属性值中包含指定值的标记 |
{name^="aaa"}{color:red} /*属性值以aaa开头的*/
二、 定义与引用
| 方式 | 语法说明 |
|---|---|
| 内联样式表 | <标记 style=“属性1：值1”>内容</标记> |
| 内部样式表 | <style type=“text/css”> …</style> |
| 外部样式表 | <link type=“text/css” rel=“stylesheet” ref=“flyA.css”> |
三、div与span
3.1 div基础
div的属性可有id、class、style
style属性如下
| style属性值 | 值 | 说明 |
| position | static | 静态定位，默认设置 |
| absloute | 绝对定位，与位置属性配合使用 | |
| relative | 表示相对定位，图层不可叠 | |
| fixed | 表示图层位置固定不滚动 | |
| border | 粗细 线形 线颜色 | 边框的属性 |
| background-color | rgb() | 背景颜色 |
| left/top/width/height | pixes/% | 规定图层的各边距离、宽度高度 |
| float | left|right|none | 左、右、不浮动 |
| clear | left|right|both|none | 清除浮动、允许两边浮动 |
| z-index | auto|数字 | 按照父层|数字 |
| overflow | scroll|visible|auto|hidden | 内容溢出控制。始终显示滚动条、不显示滚动条，但超出部分可见、内容超出时显示滚动条、超出时显示隐藏内容 |
| display | block|inline|none| | 按块元素显示、行内方式显示和隐藏等 |
3.2 span基础
块元素：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行、即使设置了宽度
内联元素：
- 支持部分样式（不支持宽、高、margin上下、padding上下）
- 宽高由内容决定 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
内联块元素：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
div标记是区块元素，包含的元素会自动换行
span标签是行内元素，不会自动换行
display属性相互转化：
| 属性值 | 说明 |
|---|---|
| none | 不显示此元素 |
| inline | 设置为行内元素 |
| block | 设置为块级元素 |
| inline-block | 设置为行内快标记 |
| inherit | 从父元素继承display的属性值 |
四、css样式属性
4.1 css字体样式
font的属性
| 属性 | 值 | 说明 |
|---|---|---|
| font-size | 绝对大小|相对大小|关键字 | 设置字体大小 |
| fonr-style | normal|italic|oblique | 默认值 |斜体显示文字|倾斜字体显示 |
| font-famlily | 字体 | 设置字体 |
| font-variant | normal|small-caps | 正常字体(默认值) |
| font-weight | normal|bold|bolder|lighter|整数 | 默认值|标准粗体|特粗体|细体|粗细程度 |
4.2 css文本样式
| 属性 | 值 | 说明 |
|---|---|---|
| letter-spacing | normal|长度单位 | 字符间距默认间距|长度 |
| line-height | normal|长度 | 行间距默认间距|长度 |
| text-index | 长度单位|百分比单位 | 首行缩进 |
| text-transform | capitalize|uppercase|lowercase|none | 第一个字母转成大写|转成大写|转成小写|不转换 |
| text-tdecoration | none|underline|line-through | 文字无装饰|加下划线|加删除线|加上划线 |
| text-align | left|right|center|justify | 左对齐|右对齐|居中|两端对齐 |
| vertical-align | top|middle|bottom|text-top|text-bottom | 垂直对齐属性：1.元素顶端对齐行中最高元素顶端2.放置在父元素的中部3.顶端与行中最低元素顶端4.顶端与父元素顶端5.底端与父元素底端 |
4.3 css列表样式
| 属性值 | 说明 |
|---|---|
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 阿拉伯数字 |
| lower-roman | 小写阿拉伯数字 |
| upper-roman | 大写阿拉伯数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
| none | 不使用项目符号 |
4.4 css盒模型
盒模型有margin、border、padding、content。设置值顺序：上右下左
| 属性 | 值 | 说明 |
|---|---|---|
| margin(4) | 长度|百分比|auto | 外边距(盒子间的距离) |
| border-style | none|hidden|dotted|dashed|solid|double | 无边框|无边框|点状边框|虚线|实线|双线 |
| border-width | medium|thin|thick|length | 边框默认宽度|小于默认|大于默认|长度 |
| border-color | 颜色 | 边框颜色 |
| padding(4) | 长度|百分比 | 内边距(元素内容与边框距离) |
4.5 表格
1、<table>标签：声明一个表格，它的常用属性如下：
border属性 定义表格的边框，设置值是数值
cellpadding属性 定义单元格内容与边框的距离，设置值是数值
cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
4.6 表单
1、<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注
3、<input>标签 定义通用的表单元素
type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
type=“image” 定义图片作为提交按钮，用src属性定义图片地址
type=“hidden” 定义一个隐藏的表单域，用来存储值
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
五、练习
5.1 表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
水平居中 center
垂直居中 middle
<!--table表示声明一个表格
tr标签用来声明一行
td标签用来声明一个单元格
表格是横平竖直的，每一行单元格的数量都应该是一样的
每一行单元格的高度都一样
每一列单元格的宽度都一样
-->
<table border="1" width="500" height="400" cellspacing="" cellpadding="" align="center">
<!--
table中的宽、高为整个表格总宽、高分配
table中的align属性用来控制单元格在父级元素的位置
tr中的align 调整左右、valign调整上下
-->
<tr>
<th>课程表</th>
</tr>
<!--第一列-->
<tr height="200" bgcolor="greenyellow" valign="top" align="right">
<!--单独行的高度-->
<td></td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
</tr>
<tr>
<td>第一节课</td>
<td>语文</td>
<td>数学</td>
合并
保留要合并的单元格的第一个，删除其他的
给保留下来的单元格横向或纵向占用的单元格的数量（合并左右关系的单元格，用colspan、合并上下关系，用rowspan）
<td colspan="3">英语</td>
</tr>
<tr>
<td>第二节课</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td>第三节课</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<!-- tr*4>td*6 快捷写四行六列 -->
</table>
</body>
</html>
输出结果：
5.2 表单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
disabled禁用表单，不可对输入框进行更改
maxlength最大输入长度
checked="checked"单选框默认值选中
selected="selected"下拉列表默认选中
size="2"下拉列表默认显示几个值
<form>
<h1>报名表</h1>
姓名<input type="text" disabled="" maxlength=""/>
<br />
密码<input type="password" />
<br />
<!--name相同即可成为单选、表单上传的是value值-->
性别：男<input type="radio" name="sex" checked="checked"/>女<input type="radio" name="sex"/>
<br />
<!--name相同且值的后面加[]、表单上传的是value值-->
家庭条件：
存款百万<input type="checkbox" name="family[]"/>
良田百亩<input type="checkbox" />
家有豪宅<input type="checkbox" />
<br />
学历：<select size="4">
<option>幼儿园</option>
<option selected="selected">小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>凹凸曼</option>
</select>
<br />
照片：<input type="file" />
<br />
</form>
</body>
</html>
运行结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
