css
HTML页面太丑了怎么办?
CSS 层叠样式表 (Cascading Style Sheets)
目前推荐遵循的是W3C发布的CSS3.0, 向下兼容,同样支持CSS2.0
用来表示XHTML或者XML等样式文件的计算机语言
1998年5月21日由W3C正式推出CSS2.0。
基本语法
- 每个CSS样式由两部分组成,即选择器和声明块。每个声明又分为属性和属性值。 属性必须放到花括号中,属性与属性值用冒号连接。
- 每条声明用分号结束。 当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开。
- 在书写样式过程中,空格、换行等操作不影响属性显示。
语法:
```html
选择器 {
属性名: 属性值;
属性名: 属性值;
}
p {
color: red;
font-size: 12px;
}
CSS内联样式表(行内样式表/嵌入式样式表)
CSS内联样式:
可以直接将样式写到标签内部的style属性中,这样的样式称为内联样式,这种样式不用填写选择器,直接编写声明即可。
写法:
<p style="color: red; font-size: 40px;">
锄禾日当午,汗滴禾下土。
</p>
这种方式编写简单,定位准确。但是由于直接将css代码写到了html标签的内部,导致结构与表现耦合,同时导致样式不能够复用,所以这种方式我们不使用。
好的页面一般都是结构,表现,行为分离。内联样式属于结构与表现耦合,不方便后期维护,不推荐使用。
内联样式只对当前的元素中内容起作用,内联样式不方便复用。
<body>
<!--
内联样式:
将css样式编写到元素的style属性中,这样的样式称为内联样式。
优点:
这种方式编写简单,定位准确。
缺点:
好的页面一般都是结构,表现,行为分离。
内联样式属于结构与表现耦合,不方便后期维护,不推荐使用。
内联样式只对当前的元素中内容起作用,内联样式不方便复用。
-->
<p style="color:red ;font-size: 40px;">锄禾日当午,汗滴禾下土。</p>
<p style="color:red ;font-size: 40px;">谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
</body>
CSS内部样式表
内部样式表:
将css样式编写到head中的
写法:
<style type="text/css">
p{
color: red;
font-size: 40px;
}
</style>
这样使css独立于html代码,而且可以同时为多个元素设置样式,也可以使表现和结构进一步分离,它也是我们推荐使用的一种方法。
但是这种方式,样式只能对当前页面起作用,不能在多个页面中重复使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表</title>
<!--
内部样式表:
将css样式编写到head中的`<style>`标签中,
然后通过css选择器选中指定元素,可以同时为这些元素一起设置样式。
优点:
这样使css独立于html代码,可以使表现和结构进一步分离,
而且可以同时为多个元素设置样式,它也是我们推荐使用的一种方法。
缺点:
这种方式,样式只能对当前页面起作用,不能在多个页面中重复使用。
style属性type默认值写上"text/css",type="text/css",此时使用的是标签选择器
```html
-->
<style type="text/css">
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>锄禾日当午,汗滴禾下土。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
</body>
</html>
### CSS外部样式表
外部样式表:
可以将所有的样式保存到一个外部的CSS文件中,然后通过<link>标签将样式表引入到文件中,这样外部文件中的css样式表将会应用到当前页面中。
写法:
<link rel="stylesheet" type="text/css" href="style.css">
这种方式将样式表放入到了页面的外部,完全使结构和表现分离,可以在多个页面中引入,最大限度的使得样式可以进行复用。同时浏览器加载文件时可以使用缓存,加快用户访问的速度提高用户体验感,所以在开发中我们最推荐使用的方式就是外部的css文件也是我们开发中使用的最多的方式。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<!--
方法一:
link中的rel="stylesheet" type="text/css" 都是固定写法,
属性href="相对路径地址"
rel即relation定义关联性,stylesheet是样式表
-->
<link rel="stylesheet" type="text/css" href="./style.css"/>
<!--
方法二:
使用@import url(css路径)
-->
<!-- <style>
@import url(./style.css);
</style> -->
</head>
<body>
<p>锄禾日当午,汗滴禾下土。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
</body>
</html>
扩展知识:link和import之间的区别?
本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
加载顺序的差别:当一个页面被加载的时候,link引入的css会同时被加载,而@import引用的css会等页面全部被下载完之后再加载,所以使用@import引入css样式刚开始会没有样式(出现闪烁),网速慢的时候会更明显。
兼容性的差别:@import是CSS2.1提出的,是后来提出的,所以老的浏览器不支持,只有IE5以上才能够识别,而link标签无此问题。
样式表优先级
同一个标签,同一个属性下对比:
!import > 行内 > 内部 > 外部
其他没有的属性会被保留下来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css"/>
<style>
p{
color: red !important;
/* color: red!important; */
}
</style>
</head>
<body>
<p style="color: orange;">11111111</p>
</body>
</html>