引入方式
1.行内样式:直接在标签内部声明样式,不应该大量使用
<p style="color: red">Hello world.</p>
2.内部样式:嵌入式,集中写在网页头部的style标签内
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.外部样式:写在单独文件里,通过在页面中的link标签引入
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
选择器
基本选择器
1.元素选择器:
p {color: "red";}
2.ID选择器:
#i1 {
background-color: red;
}
3.类选择器:
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
4.通用选择器:
* {
color: white;
}
组合选择器
1.后代选择器:
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
2.儿子选择器:
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
3.毗邻选择器:
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
4.弟弟选择器:
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; }
r3