zengni 2019-10-25
CSS的全称是Cascading Style Sheets,层叠样式表
它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名,冒号:右边的属性值(类似字典)
CSS有3种书写形式:
行内样式:(内联样式)直接在标签的style属性中书写
<body style="color: red;">
页内样式:在本网页的style标签中书写
<style> body { color: red; } </style>
外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式</title> </head> <body> <div>我是div</div> <p>我是段落标签</p> </body> </html>
上图:这是普通的div和段落
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式</title> </head> <body style="background: cornflowerblue"> <div>我是div</div> <p>我是段落标签</p> </body> </html>
代码:设计了背景颜色
上图:设置颜色的时候,会自动弹出颜色提供选择
上图:可以看到背景颜色改为蓝色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式</title> </head> <!--style="background: cornflowerblue"--> <!-- 单值属性:只有一个属性值 符合属性:有多个属性值 --> <body> <div style="color: red; font-size: 40px; background-color: greenyellow;">我是div</div> <p style="color: purple; font-size: 100px; border: 5px solid red">我是段落标签</p> </body> </html>
代码↓
line13:通过style设计字体为红色(color:red);调整字体大小(font-size:40px);调整字体的背景颜色(background-color:greenyellow)。
line14:设计字体为紫色;字体大小为100px;给字体设计边框,边框大小为5px,solid是实线,red红色(border有多个属性,说明这是复合属性);
上图:实现效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页内样式</title> <!--页内样式的标签--> <style> body{ background-color: dodgerblue; } </style> </head> <body> <div>我是div</div> <p>我是段落标签</p> </body> </html>
代码:在head中使用style,然后关联body,设计body为蓝色,这样有关于body的内容都会变成蓝色;
<!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页内样式</title> <!--页内样式的标签--> <style> /*body{*/ /* background-color: dodgerblue;*/ /*}*/ div{ color:red; font-size: 45px; } p{ color: fuchsia; font-size: 60px; } </style> </head> <body> <div>我是div</div> <p>我是段落标签</p> </body> </html>
代码:将body的样式注释掉; 然后针对div和p标签进行设计,下图为效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页内样式</title> <!--页内样式的标签--> <style> /*body{*/ /* background-color: dodgerblue;*/ /*}*/ div{ color:red; font-size: 45px; } p{ color: fuchsia; font-size: 60px; } </style> </head> <body> <div>我是div</div> <div>我是div</div> <p>我是段落标签</p> <p>我是段落标签</p> </body> </html>
代码:将body中的其他标签复制多条,然后看效果
上图:如果是行内样式,需要在每个div和每个p标签进行设计;而页内样式只需在head中针对同一类标签进行设计后,所有相同类的标签都会同时被设计出效果。
上图:图中每个内容都是一个链接页面,也就是说一个网站会有多个页面,如果使用页内样式的话就要每个页面都单独去设计。 而使用外部标签的话,只需要每个页面去调用同一个样式的话,就可以实现多个页面使用相同的设计样式了。
上图:当前的文件结构
div{ color: turquoise;; font-size: 50px; border: 5px double red; } p{ color: maroon; font-size: 88px; }
代码↓
在index.css文件中设计样式;
double为双实线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部样式</title> <!--引入--> <link rel="stylesheet" href="css/index.css"> </head> <body> <div>我是MT</div> <p>我是段落</p> </body> </html>
代码↓
在03-外部样式.html文件中 引入index.css的样式;
link 就是引入;
rel要声明与引入的内容是什么关系,stylesheet表示 样式设计关系,就是说会引入样式设计;
href指定css文件。
上图:直接引入css文件中的样式就实线了效果设计;如果有多个页面,每个页面直接引入即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页内样式</title> <!--页内样式的标签--> <style> /*body{*/ /* background-color: dodgerblue;*/ /*}*/ div{ color:red; font-size: 45px; } p{ color: fuchsia; font-size: 60px; } </style> <!--引入--> <link rel="stylesheet" href="css/index.css"> </head> <body> <div>我是div</div> <div>我是div</div> <p>我是段落标签</p> <p>我是段落标签</p> </body> </html>
代码↓
代码中可以看到使用了外部样式,又使用了页内样式。
这种情况,body就会使用离它最近的样式,代码中可以看到从body往上,是引入的样式最近,所以优先使用引入的外部样式,然后才会去使用页内样式;
同一个效果的设计优先使用最近的样式;如果外部样式和页内样式有不冲突的地方,就会叠加。
上图:外部样式最近,其次叠加页内样式;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页内样式</title> <!--引入--> <link rel="stylesheet" href="css/index.css"> <!--页内样式的标签--> <style> /*body{*/ /* background-color: dodgerblue;*/ /*}*/ div{ color:red; font-size: 45px; } p{ color: fuchsia; font-size: 60px; } </style> </head> <body> <div>我是div</div> <div>我是div</div> <p>我是段落标签</p> <p>我是段落标签</p> </body> </html>
代码:样外部样式放到页内样式上面,也就是说现在最近的样式是页内样式。
上图:样式的位置移动,设计的样式也就产生了变化。
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT