CSS的几种引入方式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style></head>
外部样式就是将css写在一个单独的文件中,然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
p {color: "red";}
#i1 {background-color: red;}
.c1 {font-size: 14px;}p.c1 {color: red;}
标签中的class属性如果有多个,要用空格分隔
* {color: white;}
/*li内部的a标签设置字体颜色*/li a {color: green;}
/*选择所有父级是 <div> 元素的 <p> 元素*/div>p {font-family: "Arial Black", arial-black, cursive;}
/*选择所有紧接着<div>元素之后的<p>元素*/div+p {margin: 5px;}
/*i1后面所有的兄弟p标签*/#i1~p {border: 2px solid royalblue;}
/*用于选取带有指定属性的元素。*/p[title] { color: red;}/*用于选取带有指定属性和值的元素。*/p[title="213"] { color: green;}
分组
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如:
div, p {color: red;}
.c1 p {color: red;}