标签：solid color 样式 初学 background border 选择器 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。