css初学
作者：互联网
css的优势
降低耦合度。
解耦让分工协作更容易
提高开发效率
根据定义CSS的位置不同分为
行内样式
<h1 style="color: red;">34</h1>内部样式（写在HTML页面内）
</head>
<style>
h1{
color: beige;
}
</style>
<body>外部样式（创建一个css文件，写在文件里面）
h1{
color: aqua;
}<head>
<one
<link rel="stylesheet" href="css/one.css" />
<meta charset="utf-8">
<title></title>
</head>选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器与优先级</title>
<style type="text/css">
/* 优先级：标签选择器<class选择器<id选择器 */
/* class选择器：通过html标签中的class属性应用生效 id="MyColor"*/
#MyColor{
color: gainsboro;
}
/* class选择器：通过html标签中的class属性应用生效 class="darkgreyColor" */
.darkgreyColor{
color: darkgrey;
}
/* 标签选择器：直接在体同名的HTML标签上显示 */
p{
color: #00FFFF;
}
div{
color: lawngreen;
}
</style>
</head>
<body>
<div id="MyColor" class="darkgreyColor"> 看颜色</div>
<div id="MyColor">
ID=Mycolr的行
</div>
<div id="MyColor">
ID=Mycolr的行2
</div>
<div>DIV的颜色</div>
<p>段落</p>
<p>段落2</p>
</body>
</html>
常用样式颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.top{
color: antiquewhite;
}
.con{
color: rgb(255,0,0);
}
.content{
color: rgba(255,0,0,0.7);
}
</style>
</head>
<body>
<h1 class="top">念奴娇.赤壁怀古</h1>
<p class="con">大江东去，浪淘尽，千古风流人物。</p>
<p class="con">故垒西边，人道是，三国周郎赤壁。</p>
<p class="con">故垒西边，人道是，三国周郎赤壁。</p>
<p class="con">故垒西边，人道是，三国周郎赤壁。</p>
<p class="content">故垒西边，人道是，三国周郎赤壁。</p>
<p class="content">故垒西边，人道是，三国周郎赤壁。</p>
<p class="content">故垒西边，人道是，三国周郎赤壁。</p>
</body>
</html>
宽高&背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bg{
color: #A9A9A9;
/* 背景色 */
width: 80%;
height: 300px;
background-color: #00FFFF;
/* 背景图片：背景图片小于宽高的时候默认平铺 */
background-image: url(img/xs.png);
/* 背景平铺方式：不设置的时候默认铺满屏幕（xy同时平铺）
repea-x:横轴平铺
repea-y:纵轴平铺
repea:xy平铺
no-repea:不平铺
*/
background-repeat:no-repeat;
/*
背景位置：第一个参数向右移动，x轴，负数向左移动
第二个参数向下移动，负数向上移动，y轴
*/
background-position: 40px 41px;
}
.bg2{
width: 80%;
height: 300px;
/* 缩写成一个
顺序：背景色，背景图片，背景平铺方式，背景x,y轴的偏移
用逗号隔开
*/
background: blueviolet url(img/cat.jpg) no-repeat 30px 15px;
}
</style>
</head>
<body>
<h1 class="bg">梦游天姥吟留别</h1>
<p class="bg2">仰天大笑出门去，</p>
<p class="bg2">吾辈岂是蓬蒿人</p>
</body>
</html>
文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本</title>
<style type="text/css">
.bg{
/* 所有块状元素都有宽和高，行级元素没有 */
width: 90%;
height: 800px;
/* 背景样式 不建议缩写*/
background: #7CFC00 url(img/a.png) no-repeat 10px 10px;
/* 字体 */
font-size: 18px;
font-family: "微软雅黑";
font-weight: bolder;
/* 字体缩写 :粗细 大小 样式*/
font: bold 24px "仿宋";
/* 文本样式 */
/* 划线位置：underline（下划线） line-through(中) none(没有划线)*/
text-decoration: line-through;
/* 文本对齐方式：水平：left right center */
text-align: center;
/* 垂直对齐：没有单个属性可以设置，一般单
行的时候使用高度等于行高设置的垂直居中 */
line-height: 800px;
/* 文字间的间隙 */
letter-spacing: 10px;
}
</style>
</head>
<body>
<div >
<p class="bg">123</p>
</div>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
background-color: #00FFFF;
/* 列表样式：none-无样式 square-正方形 circle-空心圆 decimal-数字 */
list-style-type: afar;
/* 列表样式为自定义图片 */
list-style-image: url(img/b.png);
/* 列表样式存放的位置 */
list-style-position: outside;
/* 缩写 */
list-style: none url(img/b.png) inside;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
表框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:80%;
height: 500px;
/* 边框宽度 */
border-width: 2px;
/* 颜色 */
border-color: #00FFFF;
/* 样式： dashed-虚线 dotted-点线 solid-实线 */
border-style:solid;
/* 缩写：样式 颜色 宽度 */
border: solid #8A2BE2 3px;
/* 边框可以分为四个方向分别设置 */
border-top: solid #8A2BE2 3px;
border-bottom: solid #8A2BE2 3px;
border-left: solid #8A2BE2 3px;
border-right: solid #8A2BE2 3px;
/* 没有边框 */
border: none;
/* 常用的边框样式 */
border:solid 1px #ccc;
}
</style>
</head>
<body>
<div >
213
</div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- border边框
marjin:外边距，元素与语速之间的距离
padding:（内边距）内容和边框之间的距离-->
<style type="text/css">
.p{
width: 200px;
height: 500px;
background-color: #8A2BE2;
border: solid #00FFFF 2px;
/* 四个方向上的元素与元素之间的值都是50px */
margin: 50px;
/* /* 第一个值表示上下的距离是50px,第二个元素表示的值是左右的值是100px */
margin: 50px 100px;
/* 50px上 100px左右 200px下*/
margin: 50px 100px 200; */
一个元素真正的宽度：width+内边距+外边距+边框线的值
高度：height+内边距+外边距+边框线
}
</style>
</head>
<body>
<p><img src="img/a.png" ></p>
<p><img src="img/a.png" ></p>
</body>
</html>
float浮动
clear清楚浮动
display
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性13 复合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a style="display: inline; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
<a style="display: inline-block; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
<a style="display: inline-block; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
<a style="display: block; width: 200px ;height: 200px; background-color: #00FFFF;padding: 20px;margin: 20px;">123</a>
</body>
</html>
复合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 并集选择器 :多个选择器都是通用的样式。任何形式的选择器
（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。*/
div,p,ul{
color: #00FFFF;
}
/* 交集选择器 ：交集选择器由两个选择器构成，
找到的标签必须满足：既有标签一的特点，也有标签二的特点。*/
p.class{
color: aqua;
}
/* 后代选择器：用来选择元素或元素组的子孙后代 */
ul li{
color: red;
}
/* 子元素选择器：只能选择直接子类 */
ul>li{
color: #7CFC00;
}
/* 伪类选择器：用于向某些选择器添加特殊的效果（给链接添加特殊效果） */
/* 未访问的链接 */
a:link{
color: #6495ED;
}
/* 已访问的链接 */
a:visited{
color: #8A2BE2;
}
/* 鼠标移动到链接上 */
a:hover{
color: darkslateblue;
}
/* 选定的链接 */
a:active{
color: coral;
}
.aa{
}
</style>
</head>
<body>
<a href="宽高背景.html">aaa</a>
<p class="aa">55 </p>
<div >
123
</div>
<ul>
<li>列</li>
<li>
<ul>
<li>表</li>
</ul>
</li>
<li>
<p>一段话</p>
</li>
</ul>
<p>123</p>
</body>
</html>
标签：solid,color,样式,初学,background,border,选择器,css 来源： https://blog.csdn.net/weixin_51239196/article/details/123583864