选择符类型 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
通配选择符 | * | *{font-family: "微软雅黑", sans-serif;} | 选择页面中所有元素:字体:微软雅黑 | 2 |
元素选择符 | E | hr{border-width: 3px; color: red;} | 选择页面中所有hr元素:粗细3像素、红色 | 1 |
类选择符 | .类名 或 E.类名 | .navyColor{color: navy;} | 选择页面中所有类名为navyColor元素:颜色:海蓝 | 1 |
id选择符 | #id名 或 E#id名 | #kaiti{font-family: "楷体", sans-serif;font-size: 16pt;} | 选择页面中id名为kaiti元素:楷体、16pt字体大小 | 1 |
E.warning | E元素whose class is "warning" (the document language specifies how class is determined). | 类选择符 | 1 |
---|
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
1.具有属性 | [属性名] 或 E[属性名] | *{font-family: "微软雅黑", sans-serif;} | 选择页面中所有元素:字体:微软雅黑 | 2 |
2.具有属性且属性值等于 | [属性名="值"] 或 E[属性名="值"] | hr{border-width: 3px; color: red;} | 选择页面中所有hr元素:粗细3像素、红色 | 2 |
3.具有属性且属性值整词包含"值" | [属性名~="值"] 或 E[属性名~="值"] | p[class~="题"]{text-decoration:line-through;} | 选择具有class属性且值中含有jiang的所有元素:蓝紫色 | 2 |
4.具有属性且属性值含有"值" | [属性名*="值"] 或 E[属性名*="值"] | a[href*="jiang"] {color: darkviolet;} | 选择具有href属性且值中含有jiang的所有元素:蓝紫色 | 3 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
5.属性等于"值"或以"值-"开头 | [属性名|="值"] 或 E[属性名|="值"] | *{font-family: "微软雅黑", sans-serif;} | 选择页面中所有元素:字体:微软雅黑 | 2 |
6.具有属性且属性值以"值"开头 | [属性名^="值"] 或 E[属性名^="值"] | hr{border-width: 3px; color: red;} | 选择页面中所有hr元素:粗细3像素、红色 | 1 |
7.具有属性且属性值以"值"结尾 | [属性名$=值] [属性名$=值] | .navyColor{color: navy;} | 选择页面中所有类名为navyColor元素:颜色:海蓝 | 1 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
超链接伪类选择符 | :link | a:link | 1 | |
:visited | a:visited | 1 | ||
用户行为伪类选择符 | :hover | img:hover | 2 | |
:active | img:active | 选择 | 1 | |
:focus | imput:focus | 选择 | 2 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
UI元素状态伪类选择符 | :enabled 或 E:enabled | 选择 | 3 | |
:disabled 或 E:disabled | 选择 | 3 | ||
:checked 或 E:checked | 选择 | 3 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
根元素 | :root 或 E:root | :root | 根伪类代表文档的根元素,也就是HTML元素。 | 3 |
第1个子元素 | E:first-child | li:first-child | 选择所有的li元素,并且这个li元素是其父元素的第1个子元素 | 2 |
最后1个子元素 | E:last-child | li:last-child | 选择所有的li元素,并且这个li元素是其父元素的最后1个子元素 | 3 |
第n个子元素 | E:nth-child(n) | 选择所有的li元素,并且这个li元素是其父元素的第n个子元素 | 3 | |
倒数第n个子元素 | E:nth-last-child(n) | 选择所有的li元素,并且这个li元素是其父元素的倒数第n个子元素 | 3 | |
排行奇数子元素 | E:nth-child(odd) | 选择所有E子元素中排行奇数的子元素 | 3 | |
排行偶数子元素 | E:nth-last-child(even) | 选择所有E子元素中排行偶数的子元素 | 3 | |
独生子元素 | E:only-child | 选择所有的li元素,并且这个li元素是其父元素的独生子元素 | 3 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
第一个 | E:first-of-type | 选择 | 2 | |
最后一个 | E:last-of-type | 选择 | 2 | |
第n个 | E:nth-of-type(n) | 选择 | 2 | |
倒数第n个 | E:nth-last-of-type(n) | 选择 | 3 | |
唯一的一个 | E:only-of-type | 选择 | 3 | |
没有任何子元素 | E:empty | 选择 | 3 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
目标伪类选择符 | :target | 选择 | 3 | |
语言伪类选择符 | :lang( ) | 选择 | 2 | |
否定伪类选择符 | :not( ) | 选择 | 3 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
首行伪元素选择符 | E::first-line | 1 | ||
首字(符)伪元素选择符 | E::first-letter | 1 | ||
前置内容伪元素选择符 | E::before | 2 | ||
后置内容伪元素选择符 | E::after | 2 |
名称 | 语法规则 | 举例 | 举例说明 | CSS级别 |
---|---|---|---|---|
父E之所有后代F元素选择符 | E F | 选择 | 1 | |
父E之所有子F元素选择符 | E > F | 选择 | 2 | |
兄E之相邻弟F元素选择符 | E + F | 选择 | 2 | |
兄E之所有弟F元素选择符 | E ~ F | 选择 | 3 |
(static,relative,absolute,fixed,z-index,width,height)
(positioning_dimension.html)(display,inline,block,inline-block,list-item,none,table)
(global_attributes.html)(id,color,image,repeat,position)
(global_attributes.html)(id,class,title,style,accesskey,tabindex,contenteditable,hidden)
(global_attributes.html)(font,text:family,style,weight,normal,italic,bold,size)
(font_text.html)(id,class,title,style,accesskey,tabindex,contenteditable,hidden)
(global_attributes.html)(id,class,title,style,accesskey,tabindex,contenteditable,hidden)
(global_attributes.html)CSS参考CSS3元素的全部全局属性参照(http://www.w3school.com.cn/tags/html_ref_standardattributes.asp)
(id,class,title,style,accesskey,tabindex,contenteditable,hidden)
(global_attributes.html)行内(inline)元素的一些属性 行内元素不会应用width属性,其长度是由内容撑开的 行内元素不会应用height属性,其高度也是由内容撑开的,但是高度可以通过line-height调节 行内元素的padding属性只用padding-left和padding-right生效,padding-top和padding-bottom会改变元素范围,但不会对其它元素造成影响 行内元素的margin属性只有margin-left和margin-right有效,margin-top和margin-bottom无效 行内元素的overflow属性无效,这个不用多说了 行内元素的vertical-align属性无效(height属性无效) 一些互斥的元素 对于absolute和fixed定位的(固定大小,设置了width和height属性)元素,如果设置了top和left属性,那么设置bottom和right值就没有作用了,应该是top和left优先级高,否则同时写了浏览器怎么知道按照谁定位 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后margin属性也就不起作用了 对于absolute和fixed定位的元素,如果设置了top、left、bottom、right的值后float属性同样会失效 块元素如果设置了float属性或者是absolute、fixed定位,那么vertical-align属性不再起作用
(...)
(table.html)(...)
(../JavaScriptExamination/杜老师试卷.html.html.html)(1)
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(1) 颜色名(106个单词,138个扩展颜色) alice 爱丽丝 almond 杏仁 antique 古董 aqua 青色 azure 青白色 beige 米色 bisque 陶坯黄 black 黑色 blanched 漂白;变白 blue 蓝色 blush 脸红(薰衣草红) brick 砖 brown 褐色 burly 粗鲁的;结实的 cadet 候补军官;军服 Chartreuse 查特(酒绿) chiffon 雪纺绸,薄绸; chocolate 巧克力 coral 珊瑚红 corn 鸡眼;谷物;玉米 cream 奶油色;乳白 crimson 绯红 cyan 青色 dark 深,暗 deep 深远的 dew 水珠,露水 dim 昏 dodger 躲闪者 drab 土褐色的 fire 火 floral 深品红 flower 花 forest 森林(绿) fuchsia 洋红 gainsboro 淡灰色;亮灰;(庚斯博罗,18世纪英国画家) ghost 幽灵 gold 金色 goldenrod 金菊黄 gray 灰 green 绿 grey 灰 honey 蜜瓜 hot 热的; indian 印度 indigo 靛蓝色; ivory 象牙白 khaki 卡其色 lace 蕾丝(白) lavender 薰衣草(紫) lawn 草地,草坪; lemon 柠檬(黄) light 浅、亮 lime 绿色 linen 亚麻色 magenta 洋红 marine 海的; 海产的; maroon 栗色 medium 中 mid 中 mint 薄荷 misty 模糊的;多雾的 moccasin 鹿皮色 navajo 土著(白) navy 藏青 night 夜 old 旧 olive 橄榄色 orange 橙色 orchid 洋兰紫 pale 苍白的; papayawhip 番木瓜色 peach 桃 peru 秘鲁(红) pink 粉色 plum 李紫 powder 粉,粉末,火药 puff 粉扑 purple 紫色 red 红 rose 玫瑰 rosy 玫瑰 royal 王室的; 高贵的 saddle 马鞍 salmon 鲑(红) sandy 沙色 sea 海(藻绿) shell 贝壳 sienna 土黄赭 silk 丝,蚕丝;穗 silver 银色 sky 天(蓝) slate 石板色;深蓝灰色;岩色 smoke 烟雾(色) snow 雪(白) spring 春(绿) steel 钢(青) tan 日晒褐 teal 鸭翅绿 thistle 蓟紫 tomato 番茄 turquoise 松石绿 violet 紫罗兰; 蓝紫色 wheat 麦(色) white 白 wood 木 yellow 黄
(2) 属性单词 position 定位方式 z-index 层叠顺序 top 顶 right 右 bottom 底 left 左 clip 可视区域。透明 定位 Positioning position:static relative absolute fixed 静止的 相对的 绝对 固定 布局 Layout display:none | inline | block | list-item | inline-block table系列:table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group overflow:visible | hidden | scroll | auto float:none | left | right clear:none | left | right | both visibility:visible | hidden | collapse 折叠 尺寸(Dimension) width | height:auto | length | percentage 外补白(Margin) margin: 边框(Border) border:line-width || line-style || color line-width length | thin | medium | thick line-style = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset margin:[ length | percentage | auto ]{1,4}position 定位方式 z-index 层叠顺序 top 顶 right 右 bottom 底 left 左 clip 可视区域。透明 定位 Positioning position:static | relative | absolute | fixed 静止的 | 相对的 | 绝对 | 固定 布局 Layout display:none | inline | block | list-item | inline-block table系列:table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group overflow:visible | hidden | scroll | auto float:none | left | right clear:none | left | right | both visibility:visible | hidden | collapse 折叠 尺寸(Dimension) width | height 外补白(Margin) margin 边框(Border) border:line-width line-style || color line-width length | thin | medium | thick line-style = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
(3) 在WebStorm中录入 table>caption+(thead>tr>th*3)+(tbody>tr*4>td*3)+tfoot>tr>td*3 ,生成包含表题、1行表头、4行表体、1行表尾的3列表格,并填入有意义的表格数据。
(4)
(1) 仿照【例题2】使用(h1-6,hr,p,figure,figcaption,img)标签编写包含标题、水平线、段落、插图(图像、图题)内容、具有实际意义的网页,如个人或单位简介。
(2) 仿照【例题3】使用(ul-ol-li-dl-dt-dd,figure-figcaption,img,video)编写包含标题、列表、插图(图像、视频、图题)内容、具有实际意义的网页,如个人简历。
(3) 仿照【例题7,8】使用(span,a,br)编写包含标题、段落、回车、超链接内容、具有实际意义的网页,如请假条。
(4) 仿照【例题10】使用(table,caption,tr,th,td,thead,tbody,tfoot,colspan和rowspan属性)编写具有实际意义的表格展示网页。
(5) 仿照【例题11】使用(。。。)编写具有实际意义的表单交互网页