css样式引入

科技2022-08-19 106

css样式引入

css介绍

css：层叠样式表，用于美化页面，就是给标签增加样式的，样式就是显示出来的方式，多个样式可以重叠，让标签显示变得多样化，让枯燥乏味的代码变得很有意思比如: 设置标签文字大小、颜色、字体加粗，控制页面布局（设置浮动、定位等样式等样式) 基本语法：选择器+规则选择器{ 样式规则 }

样式规则：属性名1：属性值1; 属性名2：属性值2; 属性名3：属性值3; … 选择器就是用来选择标签的，选出来之后，给标签增加样式，css样式表是由很多个选择器组成如：

div{ width:100px; height:100px; background:gold; }

引入方式

行内式如下html中定义table标签的样式，该样式只作用于某一个标签，方便直观，写起来太过费劲，当前基本不用<table style="border:3px solid black;border-collapse:collapse"> 内嵌式在head标签当中加入style标签，在style标签当中定义css样式，后面只要使用定义过样式的标签，都会默认使用该样式，如下的li标签，这种方式和html代码在同一个页面内，维护起来会很方便，但是不方便其他页面引用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>玩玩css的内嵌式</title> <style> li{ color: blue; background-color: brown; } </style> </head> <body> <ul>   <li>猫</li> <li>狗</li> <li>狼</li> </ul> </body> </html>

执行结果：

外链式类似于python中封装一个模块，将样式代码写在1个单独的.css文件当中，使用时在标签中使用标签直接引入该文件到页面中即可，这种方式样式和html页面分离，维护起来很方便，也可多页面引用，看起来也整齐好看 css文件定义样式：li{ color: red; background-color: deepskyblue; } h1{ color: forestgreen; }

html文件当中引入：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>玩玩</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <h1>css的链接方式引入练习</h1> <ol>  <li>小明</li> <li>小红</li> <li>小丽</li> </ol> </body> </html>

执行结果：

Processed: 0.014, SQL: 9