第四章编辑css样式中央广播电视大学出版社解读.pptx

第四章 编辑css样式 1.级联样式表入门 2.网页中添加级联样式表的方法 3.样式表的优先级 4.在DW软件中可视化添加样式表到网页 1.级联样式表入门 1.样式表的基本语法规则 2.级联样式表的类型 1.1.样式表的基本语法规则 1.属性必须包含“{}”号中 2.属性和属性值之间用：分隔 3.当有多个属性时，用；进行区分 4.在书写属性时，属性之间使用空格换行 5.如果一个属性有几个值，则每个属性值之间用空格 1.1.样式表的基本语法规则 Div{width:600px;height:300px;} 黑猪｛小脚 ： 脚颜色白色；尾巴：尾巴20cm；｝ 1.2.级联样式表的类型 自定义 p id=“red”这里是红色的文字/p、 h1{Color:red;font-size:14px;} 1.2.级联样式表的类型 1.自定义样式 2.重订标签样式 3.伪类 2.网页中添加级联样式表的方法 1.在head内的实现 2.在body内的实现 3.在文件外的调用 4.导入和组合样式 2.网页中添加级联样式表的方法 1.在head内实现 2.在body内实现 3.在文件外的调用 4.导入和组合样式 2.1.在head内实现 style type=“text.css” h1{font-size:x-large;color:red} h2{font-size:x-large;color:blue} /style 定义了h1,h2标记使用字号和颜色 2.在body内实现 h3 style=font-size:10pt 不推荐使用 4.在DW软件中可视化添加样式表到网页 1.创建重订标签样式 2.自定义样式 3.样式表的优先级 1.三种添加优先级别的方法 2.多个外联样式表的优先级 3.类样式优先于重订标签样式 4.ID样式优先于类样式 3.1.三种添加优先级别的方法 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title link href=css/style.css rel=stylesheet type=text/css style h1{font-size:36};img{border:30px solid #364;} /style /head body h1我和熊猫有一段故事/h1 img src=133439959_title1n.jpg /body /html 浏览器运行后显示的后果 4.2 类的样式优先于重订标签样式 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style .tu{border:30px dashed blue;} img{border:30px solid red;} /style /head body h1我和熊猫有一段故事/h1 img src=133439959_title1n.jpg class=tu /body /html 浏览器的效果 4.ID样式优先于类样式 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style .tu{border:30px dashed blue;} #img{border:30px dotted red;} /style /head body h1我和熊猫有一段故事/h1 img src=133439959_title1n.jpg class=tu id=img /body /html 浏览器预览的效果 ID样式类样式重订样式 Body样式内部样式外部样式 4.2.可视化自定义样式 1.新建css样式 2.在标签选择器选择“类” 4.3编辑样式 4.4样式应用 4.4.创建重订标签样式 1.新建css样式 2.在标签选择器选择“标签”