CSS学习网站：http://www.w3school.com.cn/css/index.asp
CSS有三种书写形式：
- 行内样式(内联样式)，直接在标签
style属性中书写
<p style="color: red">
我是段落标签p
</p>
- 页内样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>
我是段落标签p
</p>
</body>
- 外部样式
在单独的CSS文件（style sheet）中书写，然后再网页中用link标签引用:
p {
color: chartreuse;
}
<p>
<link rel="stylesheet" type="text/css" href="CSSFile.css">
我是段落标签p
</p>
CSS选择器：
选择器的作用：选择对应的标签
1.标签选择器
根据标签名找到标签
<style>
p {
color: rebeccapurple;
font-size: 30px;
}
</style>
<p>
我是段落标签p
</p>
2.类选择器
<style>
.haha {
color: #2D2F31;
}
</style>
<p class="haha">
我是段落标签p
</p>
3.id选择器
id选择器 标签中只能使用一次
<style>
#sign {
color: #419bf9;
}
</style>
<p id="sign">
我是段落标签p
</p>
4.并列选择器 （或）
<style>
div,p{
color: palegoldenrod;
}
</style>
<p>我是段落标签p</p>
<div>我是容器标签div</div>
5.复合选择器 （且）
<style>
p.haha {
color: #419bf9;
}
</style>
<p class="haha">我是段落标签p 1</p>
<p>我是段落标签p 2</p> ··················· //未被选中
6.后代选择器
<style>
div p {
color: yellow;
}
</style>
<div>
<p>
我是div的后代标签 段落p标签
</p>
</div>
7.相邻兄弟选择器
只会选择后面的兄弟
<style>
div + p {
color: palevioletred;
}
</style>
<p>
我是与div相邻的 位于前面的p标签
</p>
<div>
<p>
我是div的后代标签 段落p标签
</p>
</div>
<p>
我是与div相邻的 位于后面的p标签
</p>
8.属性选择器
<style>
p[name] {
color: red;
}
</style>
<p name="xiaoming">
我是有name为小明的属性p标签
</p>
支持多属性同时选择:
<style>
p[name][age] {
color: red;
}
</style>
9.通配符
- 优先级最低
- 性能差
- 可以跟别的标签选择器叠加样式
<style>
* {
color: blue;
}
</style>
选择器优先级：
- 相同类型的选择器遵守：就近原则 、 叠加原则
-
不同类型的选择器遵守：imporant > 内联 > id选择器 > 类选择器 > 标签选择器
伪类
伪元素
属性的可继承性：
CCS3新增特性：
1.rgba
<style>
.test1 {
background-color: rgba(0,1,0,0.2);
}
</style>
2.块阴影与圆角阴影
.test2 {
background-color: red;
/*盒子阴影*/
box-shadow: 10px 10px ;
/*文字阴影*/
}
3.圆角
.test3 {
/*设置圆角*/
border-radius: 10px;
background-color: green;
}
.test4 {
/*设置部分圆角*/
border-top-left-radius: 30px;
background-color: green;
}
4.边框图片
border-image
5.形变
transform
