标签：color 元素 基础 width rgb css background CSS
CSS基础
CSS的作用
在我们写的html页面中，所有的内容只能通过添加标记来改变他们的表现。这种方式及其的不适合我们操作，因此将一个网页的内容和表现分开，所以说CSS就是用来装饰页面的。
CSS的语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明。
选择器是您需要改变样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
对于页面中需要进行装饰的对象，我们需要选择器来进行选择。
CSS的引用
内部样式表
我们放在css中的样式，我们可以将它放在htmel的head里面
<!--简单的例子-->
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="https://cdn-img.easyicon.net/favicon.ico">
<title>hollo</title>
<link rel="stylesheet" type="text/css" href="1.css">
<style>
body {
background-color: rgb(123, 83, 175);
text-align: center;
}
h1 {
color: rgb(204, 134, 134);
}
.haha {
margin-top: 100px;
color: rgb(152, 168, 145);
font-size: 50px;
}
</style>
</head>
<body >
<h1>上上下下</h1>
<hr>
<p class="haha">恒星</p>
</body>
</html>
外部样式
同一目录新建一个样式表文件，后缀名为css如下：
在html中我们可以用
<link rel="stylesheet" type="text/css" href="1.css">
href中填放的是我们.css文件的路径。
在css文件中添加以下代码
body {
background-color: rgb(190, 103, 103);
text-align: center;
}
h1 {
color: rgb(85, 209, 209);
}
.haha {
margin-top: 100px;
color: rgb(152, 168, 145);
font-size: 50px;
}
通常我们可以用class来对一个样式进行反复的调用。
定义的时候在名字前面加.
.asc
应用的时候如下
<p class="haha">恒星</p>
相比较而言我们通常采用的是外部样式，这样有利于我们的逻辑梳理。不同的级联之间的优先级是：内联样式>内部样式表或外部样式表>浏览器缺省样式哪个样式定义离元素的距离近，哪个就生效
颜色，尺寸，对齐
颜色：
我们可以通过background-color: rgb(156, 93, 93);来设定背景颜色，color: rgb(152, 168, 145); 来设定字体的颜色。在vs中我们不必去查找颜色对应的16进制代码，可以直接通过颜色框进行选择。
尺寸：
我们可以用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。
在css中添加以下代码；
.example-1 {
width: 100%;
height: 50%;
background-color: rgb(91, 93, 199);
text-align: center;
}
.example-2 {
height: 30%;
width: 40%;
background-color: rgb(73, 138, 60);
text-align: right;
}
html中添加：
<p class="example-1 nr">金牛座</p>
<p class="example-2 nr" >巨蟹座</p>
对齐
对于元素中的文本，我们可以简单的设置text-align属性为left, center, right即可
盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
html中添加：
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
css中添加；
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
在浏览器中F12可查看元素布局
边框与边距
无论边框、内边距还是外边距，它们都有上下左右四个方向。
可以通过—left，—right，—top，—bottom来设定不同方位的边框。
定位
position属性用于对元素进行定位。该属性有以下一些值：
static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
relative:元素相对于他的静态（正常）位置进行偏移
<div class="example-relative">魔蝎座</div>
.example-relative {
position: relative;
left: 30px;
top: 100px;
background-color: rgb(173, 241, 241);
}
fixed：将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）
<div class="broad"></div>
<div class="example-fixed">fixed</div>
.example-fixed {
position: fixed;
bottom: 40px;
right: 10px;
padding: 6px 24px;
border-radius: 4px;
color: #fff;
background-color: #9d0f0f;
cursor: pointer;
box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
height: 5000px;
width: 5000px;
padding: 20px;
background-color: rgb(204, 33, 76);
}
absolute：将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移
<div class="example-relative">这是父元素，有 relative 定位属性
<div class="example-absolute">
这是子元素，有 absolute 定位属性
</div>
</div>
<!-- CSS -->
.example-relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
position: absolute;
top: 80px;
right: 5px;
width: 200px;
height: 100px;
border: 3px solid rgb(218, 73, 16);
}
溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分
——visible 默认值，溢出部分不被裁剪，在区域外面显示——hidden 裁剪溢出部分且不可见
——scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
——auto 裁剪溢出部分，视情况提供滚动条
<!-- HTML -->
<div class="example-overflow-scroll-y">You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
</div>
<!-- CSS -->
.example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
浮动
在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://img2.baidu.com/it/u=1366723203,4192303293&fm=26&fmt=auto&gp=0.jpg" class="example-float-right" alt="">
<p>《假面骑士Build》（原文：仮面ライダービルド/Kamen Rider Build）是“平成假面骑士”系列的第19部作品，于2017年播出。是该系列史上初次以“物理科学”作为设计原型之一。
本作标题以及主角骑士的名字“Build”，正是“创造、形成”的意义，这也符合主角的身份——青年天才物理学家，同时是拥有平成骑士史上最高IQ的主角。主角的变身道具是科研人员常用的“实验试剂瓶”，战斗就如同在科学实验一般。而且从主角口头禅“那么，开始实验吧”与“胜利的法则已然决定！”，可见物理实验与法则是本作中的一大线索。另一方面，导演也宣称本作世界观的规模是史上最大——涉及了整个日本列岛。</p>
</body>
</html>
透明度
我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高
<html>
<head>
<style>
img {
width: 25%;
border-radius: 10px;
float: left;
margin: 10px;
}
.opacity-2 {
opacity: 0.2;
}
.opacity-5 {
opacity: 0.5;
}
.opacity-10 {
opacity: 1;
}
</style>
</head>
<body>
<img class="opacity-2" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
<img class="opacity-5" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
<img class="opacity-10" src="https://img0.baidu.com/it/u=3075075274,1645889481&fm=26&fmt=auto&gp=0.jpg">
</body>
</html>
CSS学习总结
通过对css学习，一个网站的基本内容呈现在html中，对网站的修饰基本上都是存在于css里，这样有利于我们对网站进行后期的维护和管理。一个好的网站，离不开工程师对他的装饰。
标签：color,元素,基础,width,rgb,css,background,CSS 来源： https://blog.csdn.net/pieds/article/details/115455576
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。