网页设计教案-css(免费).pptVIP

* Learning Cascading Style Sheets Editor:baibaiwei Time:12-05-22 web标准 核心理念：结构（内容）与表现分离 (X)HTML=结构（内容） CSS=表现 即HTML应当纯粹地用于构建内容，CSS则应当纯粹地用于展现内容 页面结构 页面呈现 (X)HTML CSS css样式表 CSS 是Cascading Style Sheets的缩写，中文译为层叠样式表（语言）。 CSS （语言）定义如何显示 HTML 元素，控制HTML元素在浏览器中 呈现的样式。 css 在网页中嵌入CSS样式表的方式 1 行内css 2 嵌入css 3 外联css css语法 CSS 语法写法如下： 选择符{ 属性一：值； 属性二：值； } selector{ property：value； other property：value； } 几点说明： 1 选择符（selector）通常是你希望定义样式的html标签； 属性（property） 是你希望改变的属性，并且每个属性都有一个值； 属性和值（value）被冒号分开，并由花括号包围； 每个样式设置项由分号结束。 2 选择符（selector）、属性（property）和 值（value）的写法大小 写敏感，建议全部使用小写。 3 css 注释的写法如下： /* comment content */ 选择符的分类（selector ） 1 html选择符（html selector ） body{ background：#fdd； font-size：16px； } h1{ background：gray； } 样式的继承关系 2 类选择符（class selector ） .one{ color：green； } .two{ background：gray； width:100px; height:100px; } 网页html的写法 h1 class=“one”字体显示为绿色/h1 h1 class=“one two” 字体显示为绿色 /h1 div class=“one two” /div 3 id选择符（id selector ） id选择符将样式绑定在指定id属性的HTML对象上，id属性在同一个页面不能重复指定。 选择符的分类（selector ） #header{ background：#fdd； width：760px； height：100px； } #header h1{ background：gray； } 网页html的写法 div id=“header” some… h1some title /h1 /div css 样式的优先级 p{ background：blue； } p{ background：gray； } 后定义的样式覆盖前定义的样式 选择符相同 1 选择符不相同 2 !important style id selector class selector html selector * selector 按照!important / style / id选择符 / 类选择符 / html选择符 / 通用选择符的顺序降低 考虑多种选择符作用于同一标记的情况？ div p{color：red；} p{color:green;} css 样式的优先级 *