1、CSS定义
1.1、层叠样式表（Cascading Style Sheets）
2、所有标签通用的属性
id、name、style
2.1、行内样式style属性
在标签中设置style属性来改变样式。
<h1 style="color:red;"> </h1>
2.2、内嵌（嵌入）样式
在head标签中嵌入style标签
<head>
<style type="text/css">
p{
/*CSS中注释采用这种方式*/
color:green; /*前景颜色，也就是字体颜色*/
background-color:red;
}
</style>
</head>
2.3、外部样式，外联样式(link标签)
另外在CSS文件夹中新建一个main.css文件。（专门放CSS各种标签及属性）
<link rel(关系属性)="stylesheet" href=" CSS/main.css ">
2.4、@import 导入CSS样式
<style type="text/css">
@import url(CSS/main.css)；（把css文件导入到当前位置）
</style>
注意：@import必须写在所有其他样式之前，可以多条,CSS文件中也可以加入@import
2.5、CSS语法
2.5.1、CSS注释不能嵌套
语法：/* 注释内容 */
多行注释时：
/*
* 一行注释内容
*二行注释内容
*三行注释内容
*/
2.6、CSS标签选择器
在<style>标签中：
p{
color：red;
}（则表示该页面中 所有的P标签都运用这个属性）
2.7、CSS通配符选择器
在<style>标签中
* {
font-size:15px;
}（该页面所有的标签中都运用这个属性）
2.8、CSS ID选择器
#id名{
color:red;
属性：属性值；
}
命名规范：
1）只允许出现字母（大小写均可，严格区分） 、下划线、数字。
也就是说，id=”laoHe”和 id=”laohe”不冲突
2) 只允许以字母开头
3) 命名没有长度限制，可以是 1 个字母，也可以是很多个。不过不建议太长。
4) 不允许出现标签名
2.9、CSS class类选择器
.类名{
属性：属性名；
}
<p class="类名1 类名2 类名3"> 我是人呢</p>
2.10、ID选择器 与class类选择器的区别
1、相同的Class属性值，可以在HTML标签中出现多次。ID属性值在页面中只能出现一次。
2、一个class的属性可以有多个值，也就是说一个标签可以有多个类。
注意：尽量使用类选择器。使用ID时候情况：当确实能唯一确定当前页面中标签只会出现一次，这时候可以使用ID选择器。如果不能保证相同的作用的标签在页面中只出现一次，那么这时候就选择使用类选择器。
2.11、复合选择器
p.类名 {
}
p#ID名 {
}
h3.demo {
} ,需要同时满足既是标签h3又拥有demo类才能被选择到。
2.12、后代选择器
.类名 标签名 {
}
div 标签名 {
}
2.13、并集选择器
h1, h2, p, .demo li {
color:red;
}（所有的h1，h2，p，demo类下的li标签都运用此属性）63
2.14、子代选择器
div > p {
}（控制P标签中的属性）
<div>
<p>XXX</p>
</div>
2.15、属性选择器
把拥有ID 和CLASS属性的H1标题选出来设置属性
h1[ id ] [ class] {
}
还有 input [ type="test"] {
}
2.16、CSS伪类：指向某个标签状态
LoVe HAte原则：要按照顺序写，不能乱。先link，后visited，后hover，后active。
a:link {
}设置一个超链接没被点击时的属性
a:visited {
}设置一个超链接被点击后的属性
a:hover {
}设置鼠标悬停在此超链接上时的状态
a:active {
}设置当此超链接被点击时的状态属性
input :focus {
}设置当获得焦点时的状态属性
2.17、伪元素：指向某个元素
：first-line {
}设置第一行状态属性
：first-letter {
}设置第一个元素状态
：first-child {
}设置第一个子元素状态属性
.类名：before{
content：“---------------”；（：before、：after专用）
display：block；/*这是让当前伪元素转换为块级元素*/
}设置在此类名下的标签的之前加上content属性中的----------
.类名：after{
content:"---------------------"；
}设置在此类名下的标签的之后加上content属性中的----------
2.16、层叠性
在优先级相同的情况下，后设置的属性值会覆盖之前设置的属性值
2.17、继承性
所有文字相关的都可以继承：color、text-系列、–font-系列、line-系列、cursor。
不具有继承性的属性：边框、外边距、内边距、背景、定位、元素宽高属性，所有盒子相关的属性。
2.18、特殊选择器的优先级
行内样式>ID选择器>类选择器>标签选择器>通配符选择器
（* { }）>继承样式>默认样式
网友评论