第四章 编辑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.三种添加优先级别的方法htmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlelink href=css/style.css rel=stylesheet type=text/cssstyle h1{font-size:36};img{border:30px solid #364;}/style/headbodyh1我和熊猫有一段故事/h1img src=133439959_title1n.jpg/body/html浏览器运行后显示的后果4.2 类的样式优先于重订标签样式htmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle .tu{border:30px dashed blue;}img{border:30px solid red;}/style/headbodyh1我和熊猫有一段故事/h1img src=133439959_title1n.jpg class=tu/body/html浏览器的效果4.ID样式优先于类样式htmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyle .tu{border:30px dashed blue;}#img{border:30px dotted red;}/style/headbodyh1我和熊猫有一段故事/h1img 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.在标签选择器选择“标签”