推广农村特色产品建设网站方案,全球门户中企动力,免费ppt模板下载 简约,处室网站建设思路1、CSS是什么#xff1f;
CSS #xff08;Cascading Style Sheets#xff09;层叠样式表#xff0c;是一种来为结构化文档#xff0c;例如HTML 、XML 添加字体#xff0c;间距和颜色等样式的计算机语言,扩展名是.CSS 。 2、CSS语法规则
CSS写在哪里#xff0c;CSS写在…1、CSS是什么
CSS Cascading Style Sheets层叠样式表是一种来为结构化文档例如HTML 、XML 添加字体间距和颜色等样式的计算机语言,扩展名是.CSS 。 2、CSS语法规则
CSS写在哪里CSS写在style 标签中style 标签一般写在head 标签里即 title 标签下面。
样式
选择器{ 属性名属性值}CSS 常见的属性有 :
color : 文字颜色
font-size:字体大小
gackground-color :背景颜色
width :宽度 height:高度 这是一个例子
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width,initial-scale1.0meta http-equivX-UA-Compatible contentieedge
titleDocument /titlestyle p{color: red;font-size: 20;background: skyblue;background-color: blueviolet;width: 300px;height: 50px;}/style/headbodydiv idapp /divscript srctest.js/script
/body 注意事项 CSS标点符号都是英文状态下 每一个样式键对后都以分号结尾 3、CSS 引入方式及实践 1、内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS.
div stylecolor: red/div内联方式优缺点
只能改变当前标签的样式如果想要多个 div 拥有相同的样式不得不重复地为每个 div 添加相同的样式如果想要修改一种样式又不得不修改所有的 style 中的代码。会导致 HTML 代码变得冗长且网页难以维护。 2、嵌入方式嵌入方式指的是在 HTML 头部中的 style 标签下书写 CSS 代码。
headstyle.content {color: red;}/style
/head
嵌入方式优缺点嵌入方式 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中所以会使得代码比较集中当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。嵌入的 CSS 只对当前页面有效当多个页面需要引入相同的 CSS 代码时这样写会导致代码冗余也不利于维护。 (3)、链接方式
链接方式指的是使用 HTML 头部的 head 标签引入外部的 CSS 文件。
headlink relstylesheet typetext/css hrefcustom.css
/head链接方式优点是最常见的也是最推荐的引入 CSS 的方式。使用这种方式所有的 CSS 代码只存在于单独的 CSS 文件中具有良好的可维护性。CSS 文件会在第一次加载时引入切换页面时只需加载 HTML 文件即可。 4、导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件
styleimport url(style.css);
/style5、实际开发中如何选择
仅引入一个css文件则使用链接方式如果需要引入多个css文件则首先用链接式引入一个“目录”css文件这个“目录”css文件中再使用导入式引入其他css文件。如果希望通过JavaScript来动态决定引入哪个css文件则必须使用链接方式才能实现。 6、如何将多个CSS文件导入到一个CSS文件中
可写多个css样式表 例如css_a.css css_b.css css_c.css 这样就可以写一个主样式 style.css 把三个样式表都装进去
import css_a.css;
import css_b.css;
import css_c.css;调用的时候只调用 style.css 就行了
html xmlnshttp://www.w3.org/1999/xhtmlhead
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title字体属性/title
link relstylesheet typetext/css hrefstyle.css /
/headbodyp classred红色/p
p classblue蓝色/p
p classgreen绿色/p/body
/htmlstyle.css
charset utf-8;
import css_a.css;
import css_b.css;
import css_c.css;css_a.css
charset utf-8;
.red {
color:red;
}css_b.css
charset utf-8;
.blue{
color:blue;
}css_c.css
charset utf-8;
.green{
color:green;
}
