CSS有三种方式:内联样式、 内部样式表、 外部样式表
应用场景:当某个元素要设置成一种相对特殊的样式,用内联样式最合适;反之如果这种样式将会重复被多个元素所应用,这时就最好别用内联样式。
金鳞岂是池中物,一遇<span style="color:#46acb6;">风云</span>变化龙。
在HTML的页面源代码内直接使用CSS样式表来定义HTML元素的样式。(内部样式表会在<style>
标签内,而该<style>
元素大多会在<head>
元素中被定义)
<!DOCTYPE html> <html> <head> <style> body {background-color: Black;} h1 {color: Tomato; font-weight:300;} p {color: White; padding-left:10px;} </style> </head> <body> <h1>《风云雄霸天下》</h1> <p>九霄龙吟惊天变,风云际会浅水游。</p> </body> </html>
<link rel="stylesheet" type="text/css" href="./static/ex.css">
与内部样式表相比,外部样式表就是把内部样式表单独做成一个.css
文件。从而降低代码的耦合性,达到可以通过改变外部样式表的地址,而改变整个网站的外观风格。(一般放在<head>
元素内)
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="./static/ex.css"> </head> <body> <h1>《风云雄霸天下》</h1> <p>九霄龙吟惊天变,风云际会浅水游。</p> </body> </html>
color
特性可用来定义文字颜色font-family
特性可用来定义文字的字体font-size
特性可用来定义文字大小font-weight
特性可用来定义文字粗细h1 { color: Tomato; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 28px; font-weight: 800; } p { color: #46acb6; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-weight: 400; }
CSS中的 border
特性用于定义HTML元素的边框样式。
h1 { border: 1px dotted Tomato; } p { border: 1px solid Tomato; }
CSS中的 padding
特性用于定义元素的内边距。
h1 { border: 1px solid Tomato; padding: 20px; } p { border: 1px solid Tomato; padding-top: 20px; }
CSS中的 margin
特性用于定义元素的外边距。
h1 { border: 1px solid Tomato; margin: 66px; } p { border: 1px solid Tomato; margin-left: 66px; }
<p id="zhuanfou">九霄龙吟惊天变,风云际会浅水游。</p>
在样式表中除了根据元素类型来定义样式,还可以根据元素的属性id
来定义具体的样式。
#zhuanfou { color: Tomato; }
<p class="zhuanfou">九霄龙吟惊天变,风云际会浅水游。</p>
在样式表中还可以根据属性class(类)来定义具体的样式,在CSS中一般会把具有某些共同的组合样式归纳成一种类(class),从而更容易重复利用某一种特定的类,且条理更加清晰。
.zhuanfou { color: Tomato; }