行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p >Hello world.</p>嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>p {color: "red";}#i1 { background-color: red; }.c1 { font-size: 14px; } p.c1 { color: red; }标签中的class属性如果有多个，要用空格分隔
* { color: white; }/*li内部的a标签设置字体颜色*/ li a { color: green; }/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div, p { color: red; }.c1 p { color: red; }同等选择器，越靠近标签的优先级越高（就近原则）
/* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; }first-letter
常用的给首字母设置特殊样式：
p:first-letter { font-size: 48px; color: red; }before
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }after
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }before和after多用于清除浮动。
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
文字字体、字体大小
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } p { font-size: 14px; }如果设置成inherit表示继承父元素的字体大小值
字重（粗细）
font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| bold | 粗体 |
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
文字装饰
text-decoration 属性用来给文字添加特殊效果
常用的为去掉a标签默认的自划线：
a { text-decoration: none; }首行缩进
将段落的第一行缩进 32像素：
p { text-indent: 32px; }两倍于font-size的设置就是缩进两个字体
https://www.cnblogs.com/liwenzhou/p/7999532.html
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }推荐使用简写：
.margin-test { margin: 5px 10px 15px 20px; }顺序：上右下左
常见居中：
.mycenter { margin: 0 auto; }示例：设置一个列表
效果：
<style> /*取消ul标签前面的标志*/ ul { list-style-type: none; } /*把li标签转成行级标签*/ li { display: inline; } /*把a标签下划线取消，右边框设置1px实线红色，padding上下设置0，左右设置15px*/ li>a { text-decoration: none; border-right: 1px solid red; padding: 0 15px; } /*不显示最后一个li标签的右边框*/ li.last>a { border-right: none; } </style><ul> <li><a href="">大米商城</a></li> <li><a href="">小魅商城</a></li> <li><a href="">锤科商城</a></li> <li class="last"><a href="">华为商城</a></li> </ul>在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
.c2 { float: left; height: 100px; width: 100px; }clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
clear属性只会对自身起作用，而不会影响其他元素。
举例：解决父标签塌陷，清除浮动
因为c1和c2都是浮动元素，所以撑不起父标签，此时利用伪元素添加一个元素，同事设置清除左侧浮动可以把父标签撑起来，这个伪元素本身不需要有高度
<div id="d1" class="clearfix"> <div class="c1">c1</div> <div class="c2">c2</div> </div>.clearfix:after { content: ""; clear: left; display: block; }| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
圆形头像示例：
<style> .header-img { width: 120px; height: 120px; border: 2px solid silver; /*设置为原型*/ border-radius: 100%; /*如果溢出则隐藏*/ overflow: hidden; } .header-img>img { max-width: 100%; } </style><div class="header-img"> <img src="https://s4.51cto.com//oss/201901/03/d4ad6e4650cfe4f35e18a5c76d2af13f.jpg" alt=""> </div>效果：
左 右 上 下
left right top bottom
示例：
返回顶部按钮样式示例
<div class="scrollTop">返回顶部</div><style> * { margin: 0; } .fixed-test { /*固定位置*/ position: fixed; /*用右和下定位*/ right: 20px; bottom: 20px; background-color: olivedrab; } </style>脱离文档流的三种方式
float
absolute 绝对定位
fixed 固定定位
示例：自定义的模态框
<div class="c1"></div> <div class="c2"></div>.c1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .c2 { height: 400px; width: 600px; position: fixed; background-color: white; top: 50%; left: 50%; margin-top: -200px; margin-left: -300px; z-index: 1000; }取值0~1
和rgba()的区别:
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
