css的行内、内部、外部样式
网页分成三个部分:结构(html)
表现(css)
行为(javascript)
css(层叠样式表)
网页实际上是一个多层次结构,通过css可以分别为网页的每一个层来设置样式,而我们看到的只是网页的最上边一层
总之一句话,css用来设置网页中的元素样式
样式表
方式A(内联样式,行内样式):
在标签内部通过style属性来设置元素的样式
缺点:使用内联样式,样式只能对一个标签生效,如果希望影响到多个元素,必须每个元素都复制一遍,且当样式发生变化时,我们必须要一个个的进行修改,非常的不方便
注:开发时绝对不要使用内联样式
<p style="color:颜色; font-size:大小;">需要改变的内容</p>
样式B(内部样式表):
将样式编写到head中的style标签里面,然后通过css的选择器来选中元素,并为其设置各种样式,可以同时的为多个标签设置样式,并且只需要修改一处即可全部应用
内部样式表能更加方便的对样式进行重复使用
缺点:内部样式表只能对一个网页起作用,不能进行跨页面复用
<style>
p{
color:颜色;
font-size:尺寸大小;
}
</styel>
样式C(外部样式表)最佳实践
可以将css样式编写到一个外部的css文件中,然后通过link标签来引入外部css文件
外部样式需要通过link标签来引入,一位着只要想使用这些样式的网页都可以对其进行引用,样式可以在不同页面之间进行复用
将样式编写到外部的css文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户体验
<head>
<link rel="stykesheet" href="css样式所在路径">
</head>
p{
color:颜色;
font-size:尺寸大小;
}