Web前端开发 - 2 - CSS3基础

一、 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元素状态伪类选择器、结构伪类选择器、否定伪类选择器

1. 动态伪类

/*   行为类样式，并不存在于HTML中，只有当用户与页面进行交互时才能体现出来
锚点伪类，这是一种在链接中常见的样式，如 :link、:visited
行为伪类，也称为用户操作伪类，如 :hover、:active、:focus
*/

2. 结构伪类

/* 利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内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			选择的元素里面没有任何内容
*/

3. 否定伪类

/*
 :not() 否定选择器，即排除或者过滤掉特定元素。
 input:not([type="submit"]){border:1px solid red;} 
 */

4. 状态伪类

/* 状态伪类主要针对表单进行设计的
UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等
CSS3定义了3种常用的UI状态伪类选择器
1. :enabled	匹配指定范围内所有可用UI元素(UI元素一般是指包含在form元素内的表单元素)
2. :disabled	匹配指定范围内所有不可用元素【disabled、enale】
3. :checked 	匹配指定范围内所有可用UI元素【checked、unchecked】
*/

5. 目标伪类

/*	
目标伪类选择器形式如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类型