第3章 CSS3网页样式


教学要求

页面字体颜色控制更细腻,页面内容表现更整齐一致。
(1) 熟练掌握:CSS引用声明、语法和规则、选择符
(2) 一般掌握:字体和文本样式属性、边框背景盒模型、表单和表格样式
(3) 了解:全面了解取值与单位(特别是长度单位)、颜色关键字、全面了解CSS的样式效果和属性、CSS3主要新增样式效果和属性(圆角、阴影),学会查询CSS在线手册
(4) 熟练掌握webstorm的CSS标签的录入操作

延伸阅读


3.1 CSS3初步(概念、历史、结构)


3.1.1 CSS3概念

page
网页:page=html+css+js
网页组成:内容(html5, .html)、样式(css3, .css)、行为(javascript, .js)三部分分离。
CSS
层叠样式表或称级联样式表(Cascading Style Sheets,CSS)。
CSS是用来表现网页文件展示样式的计算机语言,是使网页样式与内容分离的一种样式设计语言。
使用简单方法(属性:值)为网页文件添加样式,有效地对页面的布局、字体、颜色、背景和其它效果实现精确的控制。
CSS3
CSS3是CSS技术的升级版本,现(2016.12)还在开发中,CSS3语言开发是朝着模块化发展的。模块包括:CSS3模块有选择符、盒模型、背景和边框、文字特效、动画(变形transform、转换transition和动画animation)、多列布局、用户界面等。
CSS标准发布进程(截止2016.11)
CSS3一些模块状态(截止2016.11)

3.1.2 CSS样式声明

【例1】CSS样式声明(html,head,body,title,meta) (style_declaration.html)

3.2 CSS选择符


3.2.1 CSS语法规则和简单选择符

CSS语法规则

CSS简单选择符
选择符类型 语法规则 举例 举例说明 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

类名和id是命名规范

【例2】CSS简单选择符 (simple_selcetor.html)

E.warning E元素whose class is "warning" (the document language specifies how class is determined). 类选择符1

3.2.2 CSS属性选择符

CSS属性选择符
名称 语法规则 举例 举例说明 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

【例3】属性选择符1 (attribute_selector1.html)

CSS属性选择符
名称 语法规则 举例 举例说明 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

【例4】属性选择符2 (attribute_selector2.html)

3.2.3 CSS伪类选择符---动态伪类

CSS伪类选择符---动态伪类
名称 语法规则 举例 举例说明 CSS级别
超链接伪类选择符 :link a:link 1
:visited a:visited 1
用户行为伪类选择符 :hover img:hover 2
:active img:active 选择 1
:focus imput:focus 选择 2

【例5】伪类选择符---动态伪类 (userActionPseudo-classes_selcetor.html)

3.2.4 CSS伪类选择符---UI元素状态伪类

CSS伪类选择符---UI元素状态伪类
名称 语法规则 举例 举例说明 CSS级别
UI元素状态伪类选择符 :enabled 或 E:enabled 选择 3
:disabled 或 E:disabled 选择 3
:checked 或 E:checked 选择 3

【例6】伪类选择符---UI元素状态伪类 (UIelementStatesPseudo-classes_selcetor.html)

3.2.5 CSS伪类选择符---结构性伪类

CSS结构性伪类选择符1
名称 语法规则 举例 举例说明 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

【例7】结构性伪类选择符1 (structural _selector1.html)

CSS结构性伪类选择符2(同级兄弟元素E)
名称 语法规则 举例 举例说明 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

【例8】结构性伪类选择符2 (structural _selector2.html)

3.2.6 CSS伪类选择符---其他

CSS伪类选择符---其他
名称 语法规则 举例 举例说明 CSS级别
目标伪类选择符 :target 选择 3
语言伪类选择符 :lang( ) 选择 2
否定伪类选择符 :not( ) 选择 3

【例9】CSS伪类选择符---其他 (other_selcetor.html)

3.2.7 CSS伪元素选择符

CSS伪元素选择符
名称 语法规则 举例 举例说明 CSS级别
首行伪元素选择符 E::first-line 1
首字(符)伪元素选择符 E::first-letter 1
前置内容伪元素选择符 E::before 2
后置内容伪元素选择符 E::after 2

【例10】伪元素选择符 (pseudo-element _selcetor.html)

3.2.8 CSS组合选择符

CSS组合选择符
名称 语法规则 举例 举例说明 CSS级别
父E之所有后代F元素选择符 E F 选择 1
父E之所有子F元素选择符 E > F 选择 2
兄E之相邻弟F元素选择符 E + F 选择 2
兄E之所有弟F元素选择符 E ~ F 选择 3

【例11】组合选择符 (assemble _selector.html)

3.2.9 选择符分组与优先级

【例12】选择符分组与优先级(grouping_priority.html)

  1. @font-face主要是把自己定义的Web字体嵌入到你的网页。
    • TureTpe(.ttf):是Windows和Mac的最常见的字体,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
    • OpenType(.otf):是一种原始的字体格式,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】
    • Web Open Font Format(.woff):woff字体是Web字体中最佳格式,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】
    • Embedded Open Type(.eot):是IE专用字体,支持这种字体的浏览器有【IE4+】
    • SVG(.svg):基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
  2. @media:。。。
  3. @page:。。。
  4. 。。。:。。。
  5. 。。。:。。。

3.3 CSS常用属性


3.3.1 颜色与长度

【例13】颜色与长度 (length_color.html)



3.3.2 定位与大小属性()

【例14】CSS定位与大小属性 (static,relative,absolute,fixed,z-index,width,height)(positioning_dimension.html)

3.3.3 布局属性(display)

【例15】CSS布局属性(display,inline,block,inline-block,list-item,none,table)(global_attributes.html)

3.3.4 背景属性(Background)

【例16】CSS (id,color,image,repeat,position)(global_attributes.html)

3.3.5 边框与补白属性()

【例17】CSS (id,class,title,style,accesskey,tabindex,contenteditable,hidden)(global_attributes.html)

3.3.6 字体与文本属性(font,text)

【例18】字体与文本属性(font,text:family,style,weight,normal,italic,bold,size)(font_text.html)

3.3.7 列表与表格属性()

【例19】CSS (id,class,title,style,accesskey,tabindex,contenteditable,hidden)(global_attributes.html)

3.3.8 用户界面属性()

【例20】CSS (id,class,title,style,accesskey,tabindex,contenteditable,hidden)(global_attributes.html)

3.3.9 内容、分栏属性()

CSS参考CSS3元素的全部全局属性参照(http://www.w3school.com.cn/tags/html_ref_standardattributes.asp)

【例21】CSS (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属性不再起作用
    

3.5 H5+C3综合表单演示


【例22】公文格式(gongwen.html)

【例23】表单样式欣赏(。。。) (form.html)

【例24】表格样式欣赏 (...) (table.html)

【例25】JavaScript程序设计试题 (...) (../JavaScriptExamination/杜老师试卷.html.html.html)

3.6 习题


1.填空题(概念、知识点----------讲义中醒目的关键字)

(1)

(2)

(3)

(4)

(5)

(6)

(7)

(8)

2.操作题(参考zen coding.txt 录入css标签)

(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)

3.编程题

(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】使用(。。。)编写具有实际意义的表单交互网页



本章参考文献



返回目录