CSS总结
作者：互联网
目录
一、什么是CSS
二、CSS语法
1、格式构成
2、选择器
3、如何生效
4、颜色、尺寸 与对齐
5、盒子模型
6、边框与边距
7、定位
8、溢出
9、浮动
10、不透明度
11、组合选择器
12、伪类与伪元素
一、什么是CSS
CSS全称Cascading Style Sheets，叫做级联样式表，是用来美化之前用html构建的网页的显示内容；
如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二、CSS语法
1、格式构成
一条css样式规则由两部分构成，选择器和{}内包含的声明（一条或多条）
注：
1、选择器为要改变样式的对象
2、每条声明由属性和值组成，其中属性之后需要跟一个冒号和一个空格再输入值，此外，一条css可包含多条声明
3、属性为想要设置成的样式属性，每个属性都有一个值。
以下为一条css样式规则，其中p为选择器，是即将被改变的对象，第一条声明会将p变成红色，第二条声明会是文本居中
p{
color: red;
text-align: center;
}
2、选择器
选择器用于在页面中找到/选择需要应用这个样式的对象，选择器有前面举例用到的的元素选择器还有id和class选择器；其中class选择器比较常用。
元素选择器
/*其中标签为p的元素均会调用这条css*/
p{
color: red;
text-align: center;
}
id选择器
/* 注意：id选择器前有 # 号。 */
.sky{
color: blue;
}
这条规则表示，找到id为sky的元素并让他呈现蓝色，如果我们此时在body里面加入下面这一段，就可以看到这一段文字变为蓝色
<p id="sky">蓝色的天空</p>
注：HTML中，元素的id值必须唯一，也就是说不能id=“sky large”这样使用。
class选择器
/* 注意：class选择器前有 . 号。 */
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
规则的运行方式与id选择器相同，
<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
从上面第三句可以看出css弥补了id元素值唯一的缺陷
3、如何生效
要使css生效我们总共有三个方法：外部样式表，内部样式表，内联样式
外部样式表
新建一个.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
然后在同目录下
创建一个.css(mycss.css)文件，放入以下css条件规则
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
一般来说可以单独建一个css文件夹存放.css文件，与html内容分开这样可以使页面更加简洁，
不过需要注意的是，这样操作后，上面link的herf内路径因改为./css/mycss.css,即文件所在路径
内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
</style>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
这个做法就是将样式规则放在head文件内，然后使用这一标签.
但应少采用这种方法
内联样式
<h3 style="color:green;">I am a heading</h3>
这种方式采取直接将样式规则写在元素里的方式，不常用
优先级
内联样式>内部样式表或外部样式表>浏览器缺省样式
4、颜色、尺寸 与对齐
颜色
在网页中颜色的显示，使用color属性，其中跟在color后面的值就是我们现在要讨论的地方，值可以直接输入颜色的英文名或者颜色RGB16进制值。
此外，为了使网站更加美观，可以去下面两个网站选择别人已经调好的配色方案
colordrop和lolcolors
<!-- 颜色名称 -->
<h3 style="background-color:Orange;">Orange</h3>
<hr>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<h3 style="background-color:#3cb371;">#3cb371</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:Orange;">123.</p>
尺寸与对齐
尺寸的属性有height 和 width，其中常见的尺寸单位有：像数 px，百分比 %等。
对齐可以通过设置text-align属性为left, center, right即可
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}这一整段添加到mycss.css里面
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">这个元素高 200 pixels，占据全部宽度</div>
<div class="example-2">这个元素宽200像素,高300像素</div>
</body>
</html>
5、盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
示意图：
其中，Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
</body>
</html>
.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;
}一整段添加到mycss.css文件中
效果图
在网页右键点击检查，然后选择上面第一个盒子模型的元素可以看到如下图示
注：width属性设置元素的宽度时，实际上只设置了其内容的宽度；其余宽度的值需要专门的元素进行设定
6、边框与边距
边框
<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>
.example-3 {
border: 1px dotted black; /* 上下左右都相同 */
}
.example-4 {
border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-5 {
border: 1px solid grey;
border-radius: 15px; /* 边框圆角 */
}
.example-6 {
border-left: 5px solid purple;
}
如上图所示，在class选择器内定义的css样式规则中，其中border属性作用是显示一个四边的框把文字框起来，然后在其值里面可以更改丰富他的显示样式，此外还有其他几种属性形式可以改变样式
效果图：
边距
内边距(padding)设置：
padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
简记形式：
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */
7、定位
用于定位的属性为position，该属性有以下值：
static 静态 relative 相对 fixed 固定 absolute 绝对
注：设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。
static（静态）
是position的默认值，元素按照正常方式显示。
position: static
relative（相对）
relative作用是使元素相对与其在静态时的位置按照设定参数进行偏移。
<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
position: relative;
left: 60px;
top: 40px;
background-color: rgb(173, 241, 241);
}
没添加css与添加后的对比：
fixd（固定）
position: fixd
将元素固定在屏幕的某个位置上，滑动滑轮元素也依旧不改变元素在屏幕上的位置
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.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: darkkhaki;
}
以上代码效果为将在页面右下角放置一个固定的按钮
absolute（绝对）
设置为绝对定位position: absolute;，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于这个父元素。所以绝对定位也是相对于父元素进行的位置固定
<!-- HTML -->
<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);
}
其中example-relative在前面是有一条css样式规则的，现在再次定义了一条一样的，在后面的调用中，元素会显示两次定义的所有样式
样式：
8、溢出
用于溢出的属性overflow有以下值：
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
下面是一个scroll滚动的例子：
<!-- 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;<!--overfolw后面不加后缀，在网页中则会出现x和y两轴方向的滑动条，此处-->
}
9、浮动
浮动的属性float，会使水平方向上的某元素向左或右进行移动，其左右的元素也会重新排列；这种样式可以使图像和文本形成合理的布局。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
modi nam vero!</p>
</body>
</html>
如图，如果缩放网页，图片一直在网页右侧，而左侧文字也会根据缩放调整每段单词数
一个元素浮动后，其后的元素将尽可能包围它，或者说出现在这个浮动元素的左或右方。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。
10、不透明度
不透明度的属性opacity，对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。
<html>
<head>
<style>
img {
width: 25%;
border-radius: 10px;
float: left;
margin: 10px;
} <!--这条css样式规则，直接作用于所有标签为img的，不用在标签里面添加img属性-->
.opacity-2 {
opacity: 0.2;
}
.opacity-5 {
opacity: 0.5;
}
.opacity-10 {
opacity: 1;
}
</style>
</head>
<body>
<img class="opacity-2" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-5" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
<img class="opacity-10" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(87).jpg">
</body>
</html>
11、组合选择器
之前有元素、id、class三种选择器，下面是两种以他们为组合的选择器
后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
<html>
<head>
<style>
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
.haha p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha>.</p>
<span>
<p>Paragraph 3 in the div .haha.</p>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接< p>元素。
<html>
<head>
<style>
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
.haha>p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha.</p>
<span>
<p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
</span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
其中因为第三段的父代为span不是div所以他没有黄背景
如果两个选择器之间是，相隔，那么标签为haha和p的元素全部都有黄背景
12、伪类与伪元素
伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
例如：
鼠标移到某元素上变换背景颜色
超链接访问前后访问后样式不同
离开必须填写的输入框时出现红色的外框进行警示
保证段落的第一行加粗，其它正常
...
伪类/伪元素的语法:
/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
property:value;
}
例子：（把下列语句放入.css文件内即可生效）
a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
/ 鼠标移到段落则改变背景颜色 /
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} / 段落的第一行显示蓝色 /
p:first-letter{font-size: xx-large;} / 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 /
h1:after { content:url(smiley.gif); } / 在每个一级标题后插入该图片 */
标签：总结,color,元素,haha,样式,css,选择器,CSS 来源： https://www.cnblogs.com/Ericup/p/16447283.html