一、
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-width: 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;
width: 0px;
height: 0px;
/*只要是块状元素都可以设定*/
}
#q1{
width: 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>
原文地址：https://www.cnblogs.com/a199706/p/11041127.html