html中怎样写css路径,CSS 书写位置

CSS的样式书写位置

css的样式书写位置常用的有三种：

行内样式(内联样式)

style标签

外部样式(link标签)

行内样式

css书写位置

生当作人杰，死亦为鬼雄

至今思项羽，不肯过江东

将样式直接编写到 style 属性中，这样的样式称为内联样式，也叫行内样式。

生当作人杰，死亦为鬼雄

这句的意思是，通过p标签的 style 属性，为p标签的内容设置样式，样式颜色为红色，字体大小为30像素。

css的样式也是采用名值对结构，名与值用冒号连接， 多个名值对直接用分号分隔，最后一个也要加上分号。内联样式只对当前元素种的内容起作用，所以第二个p标签是没有应用到第一个p标签中的样式。

注意：body标签(元素)以及body中的标签都可以使用style属性。

缺点：

因为样式只对当前元素起作用， 如果其它标签也需要这种样式，需要给其它标签复制该样式，所以内联样式不方便复用。

内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用。

生当作人杰，死亦为鬼雄

至今思项羽，不肯过江东

style标签

为了解决行内样式的缺点，引入了style标签。将css样式写到head中的style标签里。

css书写位置

p {

color: red;

font-size: 30px;

}

生当作人杰，死亦为鬼雄

至今思项羽，不肯过江东

将样式表编写的style标签中，通过css选择器选中指定元素，就可以同时为这些元素设置样式，使样式进一步复用。

p {

color: red;

font-size: 30px;

}

style 标签的使用说明：

type属性以及属性值是固定的。可写可不写。为了兼容以前的浏览器，最好写上。

p代表选择了当前页面中所有的p标签，这些p标签应用了大括号中的样式。

css的注释以/开头，以/结尾，类似于CLLE的注释。它只能用在style标签中或者css文件中。

缺点：这种写法虽然可以复用，但是它只能在当前页面复用样式，如果多个页面想复用同一个样式，就只能将样式拷贝到每个页面中，达不到复用的效果。

link标签

为了解决同一个样式在不同页面不能复用的问题， 引入了link 标签。

将样式表编写到外部的css文件中，通过link标签将外部的css文件引入到当前页面中，这样外部文件中的css样式表就可以应用到当前页面中。

style.css 文件内容如下，注意文件名称可以随便命名。

p {

color: red;

font-size: 30px

}

这里面的样式内容和上面的style标签中的格式一样。下面html代码通过 link 标签引入了 style.css样式。

css书写位置

生当作人杰，死亦为鬼雄

至今思项羽，不肯过江东

说明：上面代码中最重要的是：

link 中的rel 和type属性都是固定的。

外部文件style.css中只需要写css样式即可，通过 href 属性引入，需要相对路径。

优点：

将css 样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表在不同的页面中使用，最大限度地使样式进行复用。

将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验，所以在开发中最推荐使用外部的css文件。