一、
css引入方式（三种）
1、内联：
在标签中设置style属性
<标签名 style=“样式1：样式值2；样式1：样式值2”>
<标签名>
如：<a style ="color：red； font-size=20px；"
</a>
2、内嵌：
在head标签中加入style标签
<style>
选择器1{
样式1：样式值1；
样式1：样式值1；
样式1：样式值1；
}
选择器2{
样式1：样式值1；
样式1：样式值1；
样式1：样式值1；
}
如：<style>
p{
color:blue;
font-weight:bold;
}
</style>
3、外部引入
新建.css文件，在css文件中写样式
选择器1{
样式1：样式值1；
样式1：样式值1；
样式1：样式值1；
}
选择器2{
样式1：样式值1；
样式1：样式值1；
样式1：样式值1；
}
在html文件的head标签中用link标签引入css文件
如：
<link href="xxx.css"></link>
二、选择器
1、id选择器
在标签中加入id属性<标签名 id=“id值”></a>
#id值 每一篇都只有一个值
2、clss选择器
在标签中加入class属性<标签名 class=“class值”>
.class值 注意：class代表的是一类
3、元素（标签）选择器
在内嵌或者外部css文件中书写的格式
元素名 a{
}
标识符（各种起名）规范：只能是数字字母、下划线、$其中不能以数字开头，并且不能是关键字
</>
选择器优先级：
id选择器<class选择器>元素选择器
引入方式优先级：
内联>内嵌>外部引入 就近原则
选择器的关系：
并列关系：
选择器1，选择器2{
}如：#p1,#s1,li,ul{
color:red;
}
父子关系 嵌套父亲不设置值，给儿子设置
如：
#u1 #l4{
color:gray;
}
兄弟关系 +兄弟 给兄弟即弟弟加样式
如：
#l5+li{
color: blueviolet;
}
三、文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title>基础样式</title> <style>
/*背景*/ body{ background-color: bisque; 背景颜色 background-image: url(../../img/2.1.jpg); 背景图片 background-repeat: no-repeat; 背景不平铺 background-attachment: fixed; 背景固定 } #d1{ /*字体，大都以font开头，除去color*/ font-family: 微软雅黑；Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; 文字字体 font-size:30px; 大小 font-weight: lighter; 细 font-style: italic; 斜体 color: red; 颜色 } #p1{ /*文本*/ text-decoration: underline; 下划线 text-transform: lowercase; 英文小写字母 text-indent: 2em; 首行缩进2字符 text-align: center; 文本居中对齐 line-height: 50px; 行高50px } #d2{ /*
边框
border- 5px; border: 3px red dashed;*/ border-top:60px solid #FDFCFC; border-left: 60px solid #FDFCFC; border-right: 60px solid #FDFCFC; border-bottom: 60px solid red; 0px; height: 0px; /*只要是块状元素都可以设定*/ } #q1{ 200px; height: 200px; background-color: aqua; } #q2{ background-image: url(../../img/2.1.jpg); 背景浮动 background-position:-283px -182px; } </style> </head> <body> <div id="d1"> 这块区域 </div> <input type="text" name="mc" id="q2"> <p id="p1">这是一个段落标签hello</p> <div id="d2"> <div class="d1"> </div> <div id="q1"> </div> <div class="d1"> </div> <div class="d1"> </div> </div> </body> </html>