CSS3基础
- 一、 CSS3基础及选择器
- 1. CSS基本用法
- 2. CSS特性
- 3. CSS3选择器
- 1. 选择器分类
- 2. 伪类选择器
- 二、网页文本
- 1. 网页文本标签
- 2. 字体样式
- 3. 文本样式
- 三、 美化图像
- 1. 图像样式
- 2. 背景图像
- 四、 美化超链接
- 五、 美化列表
- 1. 列表
- 2. 样式
- 3. 设计多级菜单
- 六、 美化表格
- 1. 表格
- 2. 表格属性
- 3. 表格样式
- 七、 美化表单
- 1. 表单
- 2. 表单元素、属性、值
一、 CSS3基础及选择器
1. CSS基本用法
DIV+CSS基础
2. CSS特性
- 层叠性
- 标签选择器：优先级加权值为1；
- 伪元素或伪对象选择器：10
- 类选择器：10
- 属性选择器：10
- ID选择器：100
- 其他选择器：0，如通配选择器等
- 继承性
3. CSS3选择器
1. 选择器分类
| 大类 | 分类 |
|---|---|
| 基本选择器 | 标签选择器、类选择器class(.)、 ID选择器id(#)、通配选择器(*) |
| 组合选择器 | 包含选择器( )、子选择器(>)、相邻选择器(+)、兄弟选择器(~)、分组选择器(,) |
| 伪类选择器 | |
| 伪元素 | |
| 属性选择器 | E[attr]、E[attr=“value”] 、E[attr~=“value”] (具有) 、E[attr^=“value”] (开头)、E[attr$=“value”] (结尾)、E[attr*=“value”] (包含)、E[attr|=“value”] (value或value-开头) |
2. 伪类选择器
/* 伪类选择器分为6种 */
动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器
- 动态伪类
/* 行为类样式，并不存在于HTML中，只有当用户与页面进行交互时才能体现出来
锚点伪类，这是一种在链接中常见的样式，如 :link、:visited
行为伪类，也称为用户操作伪类，如 :hover、:active、:focus
*/
- 结构伪类
/* 利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和ID属性的定义
:fist-child 选择某个元素的第一个子元素
:last-child 选择某个元素的最后一个子元素
:nth-child() 选择某个元素的一个或多个特定的子元素
:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算
:nth-of-type() 选择指定的元素
:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素下的最后一个同类子元素
:only-child 选择的元素是它的父元素的唯一一个相同类型的子元素
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty 选择的元素里面没有任何内容
*/
- 否定伪类
/*
:not() 否定选择器，即排除或者过滤掉特定元素。
input:not([type="submit"]){border:1px solid red;}
*/
- 状态伪类
/* 状态伪类主要针对表单进行设计的
UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等
CSS3定义了3种常用的UI状态伪类选择器
1. :enabled 匹配指定范围内所有可用UI元素(UI元素一般是指包含在form元素内的表单元素)
2. :disabled 匹配指定范围内所有不可用元素【disabled、enale】
3. :checked 匹配指定范围内所有可用UI元素【checked、unchecked】
*/
- 目标伪类
/*
目标伪类选择器形式如E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向，该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能够有效
*/
二、网页文本
1. 网页文本标签
HTML5新增文本标签
2. 字体样式
/*
字体font : font-style || font-variant || font-weight || font-size || line-height || font-family
字体类型font-family : cursive草体 | fantasy奇异字体 | monospace等宽字体 | serif衬线字体 | sans-serif无衬线字体
下划线text-decoration : none | underline | blink | overline line-through
大小写text-transform : none | capitalize | uppercase | lowercase
*/
3. 文本样式
/*
文本对齐text-align : left | right | center | justify
垂直对齐vertical-align : auto | baseline |sub |supper | top | text-top | middle | bottom | text-bottom | length
字距 letter-spacing
词距 word-spacing
行高 line-height : normal | length
缩进 text-indent : length
阴影 text-shadow : 水平偏移值length 垂直偏移值length 模糊值length 颜色color
溢出 text-overflow : clip | ellipsis | ellipsis-word
(强制文本在一行内显示white-space:nowrap ; 溢出内容为隐藏overflow:hidden)
换行 line-break || word-wrap : normal | break-word || word-break : keep-all || white-space : nowrap | pre
动态内容 content : normal | string | attr() | uri() | counter() | none
恢复默认样式 元素样式 : initial
自定义字体类型 @font-face { <font-description> }
*/
三、 美化图像
1. 图像样式
/* <img src="URL" alt="替代文本" /> HTML5为<img>标签定义了多个可选属性:
height: 图像高度，单位是像素或百分比
width: 图像宽度
ismap: 将图像定义为服务器端图像映射
usemap: 将图像定义为客户端图像映射
longdesc: 指向包含长的图像描述文档的URL
定义图像边框border-style : dotted点线 | dashed虚线 | solid | double | groove | ridge | inset | outset
边框颜色border-color
边框宽度border-width
图像不透明度opacity
圆角图像border-radius : none | length
阴影图像box-shadow : none | inset内阴影 | length水平偏移、垂直偏移、大小模糊度、扩展 | color
*/
2. 背景图像
/* background属性派生了8个子属性
定义背景图像background-image : none | <url>
背景颜色background-color :
指定背景的显示区域background-origin : border-box | padding-box | content-box
指定背景的裁剪区域background-clip : border-box | padding-box | content-box | text
设置背景图像是否以及如何重复铺排background-repeat : repeat-x|repeat-y|repeat|space|round|no-repeat
定义背景图片的大小background-size :
设置背景图像位置background-position :
定义背景图像的显示方式background-attachment : fixed相对浏览器窗体固定 | scroll相对元素固定 | local相对元素内容固定
渐变背景background-image:线性渐变<linear-gradient>|径向(放射性)渐变<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>
- x:left/center/right ; y:top/center/bottom
定义循环方式background-break : bounding-box | each-box | continuou 【Firefox浏览器，-moz-background-inline-policy私有属性
*/
渐变背景
设计纹理
页面背景
拓展：动态边框
拓展：设计图标按钮
四、 美化超链接
/* <a>标签用于定义超链接，a标签属性
规定被下载的超链接目标download : filename
规定链接指向的页面的URL href : URL
规定被链接文档的语言 hreflang : language_code
规定被链接文档是为何种媒介/设备优化的 media : media_query
规定当前文档与被链接文档之间的关系 rel : text
规定在何处打开链接文档 target : _blank | _parent | _self | _top | farmename
规定被链接文档的MIME类型 type : MIME type
创建锚点链接：定义ID值 - #
定义热点区域：<map> <area>配合使用
浮动框架iframe
超链接伪类 ： :link | :visited | :hover | :active | :focus
定义鼠标样式cursor : auto | crosshair | default | pointer | move | e-resize/ne-resize…… |text | wait | help | <uri>URL
*/
五、 美化列表
1. 列表
/*
无序列表 : ul-li
有序列表 : ol-li
定义列表 : dl-dt+dd
菜单列表 : menu-command/menuitem [p235-244]
*/
2. 样式
/*CSS专用列表属性
list-style : 复合属性，设置列表项目相关内容
list-style-image : 设置列表项目的符号图像，自定义项目符号
list-style-position : 设置列表项目符号的显示位置，根据文本在内或在外排列，取值包括outside|inside
list-style-type : 设置列表项目符号的类型
*/
list-style-type属性
3. 设计多级菜单
【p256】
六、 美化表格
1. 表格
/* 标准化的表格结构
表格 : table
表格标题 : caption
表格行 : tr
表头单元格 : th
单元格 : td
表头 : thead
表格主体 :tbody
表格页脚 : tfoot
一个或多个列的属性值 : col
列分组 : colgroup-span
*/
2. 表格属性
/* HTML5支持的table标签属性
边框
单元格补白 : Cellpadding
单元格边界 : cellspacing
数据表宽度 : width
外边框线显示 : frame
内边线显示 : rules
摘要 : summary
HTML5支持的td和th标签属性
单元格中的缩写 : abbr
水平对齐方式 : align
分类 : axis
定义根据哪个字符进行内容对齐 : char
对齐字符的偏移量 : charoff
单元格可横跨列数 : colspan
单元格相关表头 : headers
单元格可横跨行数 : rowspan
将表头与单元格关联 : scope
垂直排列方式 : valign
*/
3. 表格样式
/* 专用属性
border-collapse : separate | collapse
border-sapcing
caption-side
empty-cells
table-layout
*/
七、 美化表单
1. 表单
/* 表单结构
表单框架form
表单域input/select
表单按钮input/button
表单元素基本属性：name | id
所有 <form> 属性
accept-charset 规定用于表单提交的字符编码。
action 规定提交表单时将表单数据发送到何处。
autocomplete 规定表单是否应打开自动完成（填写）功能。
enctype 规定将表单数据提交到服务器时应如何编码（仅供 method="post"）。
method 规定发送表单数据时要使用的 HTTP 方法。
name 规定表单名称。
novalidate 规定提交时不应验证表单。
rel 规定链接资源和当前文档之间的关系。
target 规定提交表单后在何处显示接收到的响应。
*/
2. 表单元素、属性、值
表单元素
HTML5表单的属性
input标签的属性 、input标签属性
< input > - type类型
