青岛专业建设网站,常州建设企业网站,WordPress编辑器高亮,长沙网站开发智CSS称为#xff1a;层叠样式表#xff08;Cascading style sheets#xff09;美化HTML即给页面种的HTML标签设置样式CSS语法规则css要写在head标签的里边#xff0c;title标签的下面#xff0c;用style标签框住head
title.../title
style…CSS称为层叠样式表Cascading style sheets美化HTML即给页面种的HTML标签设置样式CSS语法规则css要写在head标签的里边title标签的下面用style标签框住head
title.../title
style
...
style
/head在style的书写格式为选择器大括号选择器选择你要改变的那个标签的名称例如p/p标签就写成stylep {color: red;}
/style上面的代码第三行叫做css属性color是属性名red是属性值在语句结束末尾一定要加分号;headtitleDocument/titlestyle/* css注释 *//* 在这里写css *//* 选择器{css属性} */p {color: red;/* px是像素 */font-size: 30px;/* 背景色 */background-color: blue;width: 300px;height: 300px;}/style
/head显示效果如上图CSS引入方式内嵌式CSS写在style标签中style标签虽然可以写在页面任意位置但是通常约定写在head标签中外联式CSS写在一个单独的.css文件中需要通过link标签在网页中引入行内式写在标签的style属性中可配合js使用外联式下面我们看看怎样用link标签把css引入html中1.先创建一个html文件用p标签试验一下这是引入前的样式2.创建一个css文件我这里命名为“引入”文件后缀一定要是.css3.然后我们要美化html里的p标签就返回到我们的html代码中输入link一般还是在title底下写!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- stylesheet:关系为样式表 href为路径同级目录我们只需./就能找到了 --link relstylesheet href./引入.css
/head
bodyp引入css/p
/body
/html然后看一下此时html显示的效果可以看见.css文件已经被成功引用改变了p标签的字体行内式在标签内添加style以div标签为例添加颜色和字号!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- stylesheet:关系为样式表 href为路径同级目录我们只需./就能找到了 --link relstylesheet href./引入.css
/head
bodyp引入css/pdiv stylecolor: rebeccapurple; font-size: 30px;这是个div标签/div
/body
/html效果图行内式有一个局限性就是只能控制一个标签这三种引用方式区分特点和使用场景引用方式书写位置作用范围使用场景内嵌式CSS写在style标签中当前页面小案例外联式CSS写在单独的css文件中通过link标签引入多个页面项目中行内式CSS写在标签的style属性中当前标签配合js使用
