怎么在百度首页做网站,设计产品网站推荐,佛山企业门户网站建设,网站服务器崩了怎么办第四章 初识CSS 1.什么是CSS#xff1a; CSS全称#xff08;Cascading Style Sheet#xff09;风格样式表(Style Sheet)它是用来进行网页风格设计的。 2.CSS的优势#xff1a; #xff08;1#xff09;内容与表现分离#xff0c;也就是使用前面学习的HTML语言制作网页 CSS全称Cascading Style Sheet风格样式表(Style Sheet)它是用来进行网页风格设计的。 2.CSS的优势 1内容与表现分离也就是使用前面学习的HTML语言制作网页使用CSS设置网页的样式风格并且CSS单独存放一个文件中。 2表现的统一可以使网页的表现非常统一并且容易修改。 3丰富的样式使得页面更加灵活。 4减少网页的代码量增加网页的浏览速度节省网络宽带。 5运用独立于页面的CSS还有利于网页被搜索引擎收录。 3.CSS的基本语法 CSS规则由两部分构成选择器和声名。声名必须放在大括号{}中 并且声名是一条或者多条每一条声名由一个属性和值组成属性和值 用冒号分开每条语句以英文分号结尾。 4.style标签在HTML中通过使用style标签引入CSS样式。style标签用于为HTML文档定义样式信息。style标签位于head标签中它规定浏览器中如何呈现HTML文档。style标签中type属性是必须的它用来定义style元素内容唯一的值是“text/css”。 5.CSS选择器 选择器的种类 例 1.标签选择器 P{font-size:16px;} 2.类选择器 .class{font-size:16px;} 3.ID选择器 #id{font-size:16px;} 6.id选择器与类选择器的不同之处ID选择器只能在HTML中使用一次因此它的针对性很强。 选择器优先级ID选择 器类选择器标签选择器 7.引入CSS样式: 引入样式 定义 例 利与弊 行内样式 行内样式表就是在html中直接使用style属性设置CSS样式 pstyle”font-size:14px; color:green;” 这种使用style属性的设置CSS样式仅对当前的HTML标签起作用并且是写在HTML标签中的因此这种方式不能使内容和表现相分离本质上没有体现出css的优势。 2.内部样式 内部样式就是把css样式代码写在head的style标签中与HTML内容位于同一个HTML文件中。 head style .green{ font-size:20px; color:red; } /style /head 这种样式方便在同一页面中修改样式但不利于在多页面间共享复用代码及维护对内容与样式分离也不够彻底。 3.外部样式 外部术样式表就是把CSS代码保存为一个单独的样式表文件文件扩展名为.CSS在页面中引用外部样式表。 ①链接外部样式表 head link href”style.css”rel”stylesheet” type”text/css”/ /head 外部样式实现了样式和结构的彻底的分离一个外部样式表文件可应用于多个页面。当改变这个样式文件时所有页面的样式都会随之改变。这在制作大量相同样式页面的网站时非常有用不仅减少了重复的工作量利于保持网站的统一样式和网站维护同时用户在浏览网页时也减少了重复下载代码提高了网站的速度。 ②导入外部样式表: head style type”text/css” !— import url(“style.csss”) -- /head 样式优先级行内样式内部样式外部样式。 8.CSS复合选择器: 复合选择器的种类 定义 1.后代选择器 在HTML中经常有标签的嵌套使用那么在CSS选择器中就可以通过嵌套的方式对特殊位置的HTML标签进行声名。 例p . txt{ color:blue; font-size:36px;} 2.交集选择器 交集选择器是由两个直接连接构成其结果是选中二者各自元素范围的交集。其中第一个必须是标签选择器第二个必须是类选择器域者ID选择器。这两个选择器之间不能有空格必须连续书写。 例p.txt{color:blue; line-height:28px} 3.并集选择器 同时选中各个基本选择器所选择的范围。任何形式的选择器包括标签选择器类选择器ID选择器材等都可以作为并集选择器的一部分。 例H3, .first, #end{ font-size:16px; color:green;} 9.css继承特性 继承的概念在CSS语言中继承就是将各个HTML标签看作一个容器其中被包含的小容器会继承包含它的大容器的风格样式也称包含与被包含的标签为父子关系。 继承的应用 Css继承指的是子标签的所有样式风格可以在父标签样式风格的基础上再加以修改产生新的样式而子标签的样式风格完全不会影响父标签。 例style type”text/css Li{ Color:blue; font-size:12px; } ul li ul li ul li{ color:red;} ul li ol li{color:green;} /style 转载于:https://www.cnblogs.com/ppdpp/p/7635539.html
