[前端代码] 第二章 层叠样式脚本CSS |
您所在的位置：网站首页 › 写前端代码 › [前端代码] 第二章 层叠样式脚本CSS |
|
CSS 概述了解CSS 的作用CSS 解决的问题 尝试运行以下代码： CSS 测试页面 body 标签内容是什么颜色？ font 标签内容是什么颜色？ 相同的效果，如颜色，用不同的标签属性；可维护性和可重用性不高。解决方法逻辑上，实现内容与样式相分离；相同的标签以及内容可以使用不同的样式；相同的样式可以作用到不同的标签以及内容中去。层叠样式脚本（Cascading Style Sheets，CSS）。CSS 与HTMLCSS 与HTML 关系HTML，相当于房屋，搭建网页结构以及内容。CSS，相当于装潢，构建网页样子、样式。 CSS 使用原则尽量使用CSS 属性取代HTML 属性。 能取代的属性，例如，颜色、字体大小、位置等。 不能取代，例如网页结构型属性。 colspan rowspan使用CSS 样式表掌握简单的CSS 样式识别CSS 选择器简单样式前景色字体颜色。 color:red;背景色background-color：blue;字体大小font-size:20px;位置属性text-align:center;选择器将提取出来的CSS 代码给谁？ 标签选择器通过标签名字给样式。 td { text-align: right; width: 1000px; }类选择器通过class 属性给样式。 .l-td { text-align: right; }ID 选择器通过id 属性给样式，ID 选择器，一个标签。 #an { text-align: center; }选择器对比选择器示例示例说明.class.opt选择所有class="opt" 的标签#id#td_username选择所有id="td_username" 的标签elementtd选择所有 标签element,elementdiv,p选择所有 标签和标签element elementdiv p选择 标签内的所有 标签CSS 位置内联样式 CSS 的样式在标签的style 属性中。 特点： 内联样式只能作用一个标签；多个样式同时存在，用；开。内部样式表将样式提取出来，放在head 标签中的style 标签中。 用户注册 td { width: 600px; } .l-td { text-align: right; width: 200px; } #an { text-align: center; } 外部样式表将样式声明在独立的样式文件中（*.css），并且独立于任何HTML文档。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |