CSS常见样式

CSS常见样式

1.color属性

举例：

h1 {
  color: red;
  background-color: rgba (0,0,0,0.2); //RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间，也就是透明度/不透明度
}
把h1标签设为红色，把h1和red设为你需要的即可。
复制代码

补充一点东西

#000 黑色
#fff 白色
#eee 淡灰色
#ccc 灰色
#666 深灰色
#333 深黑色
#f00 红色(是零零不是哦哦)
#0f0 绿色
#00f 蓝色
复制代码

2.background属性:如何定位背景图像

举例：

h1 {
  background: black; //背景色为黑
  background-color: #000; //也是颜色，十六进制的写法。
  background-image: url(images/bg.gif); //设置背景图片
  background-repeat: no-repeat; //背景不重复
  background-position: center; //背景图片居中
}
复制代码

3.border属性：边

举例：

h1 {
 border: 1px solid yellow; //1px实心的黄色边框。这三个值都可以改为自己需要的。
 border-top: 1px solid yellow; //也可以加方位上下左右。top，bottom，left，right。
 border-radius: 3px; //设置圆角3像素
 border-radius: 50%; //成圆形
}
复制代码

4.Margin 和 Padding属性

举例：

什么是margin，padding，其实就是边距。↓

h1 {
  margin-top: 10px; //上设为10像素
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
  margin: 10px 5px 10px 5px; //可以简写为这样，顺序是上右下左。
  padding: 11px;
}
复制代码

5.Font属性

font-size: 12px; 字体大小
font-family: Arial; 字体，宋体，微软，Arial等。
font-weight: 文字粗度，常用默认regular和粗体bold。
font-height: 行高
font: 14px/1.4 Arial; 字体大小，行高，字体
复制代码

6.Text属性

举例：

a {
  text-align: center; //文本对齐方式，此外有left，right，justify(两端对齐)
  text-indent: 2px; //首行缩进
  text-decoration: none; //文本装饰，none是去掉下划线(HTMLa标签会默认有下划线，设为none即可)line-through(删除线)，underline(下划线)，overline(顶部的线)
  text-transform: uppercase; //改变文字大小写。uppercase小改大，lowercase大改小，capitalize首字母大写。
  word-spacing: 改变字之间的间距
  letter-spacing: 改变字母与字母的间距
}
复制代码

7.float属性 浮动

举例：

ul {
  float:left; //向左浮动
  float: right; //向右浮动
}
使用浮动必须给父元素清除浮动,不然可能会出问题，给父元素加上这句就行：
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
这就像数学中的固定公式一样
复制代码

8.透明or隐藏

举例：

opacity: 0; 透明度为0
risibility: hidden; 和↑类似
display: none; 消失
background-color: rgba (0,0,0,0.2); 只背景色透明
复制代码

9.display属性 指定元素的显示类型

了解这个先要讲解下块级元素和行内元素。

行内元素：

自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。比如a标签。样式是行内元素，因此对a元素设置高度、宽度等属性，都是无效的。

块级元素

比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display: inline;改为display: block;强制将它改成块元素。看代码。 <span style="display:block;">block属性</span> //这样才能给span行内元素设置宽高等

display: block;
display: inline;
display: run-in;
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
复制代码

用法较多，可点击MDN查看

10.其他

举例:

h1:hover {
  border-bottom: 1px solid orange; //鼠标放上时底边出现1px的橘色边,鼠标移开则消失。
}
ul {
  list-style: none; //去掉ul列表中默认的点"."
}
p {
  overflow: hidden; //后面多出的文字隐藏
  white-space: nowrap; //不折行，一直写出文本框
  text-overflow: ellipsis; //超出文本内容变成...格式
}
复制代码

暂时想到这么多，一般情况下够用，有需要的可以MDN查询。

转载于:https://juejin.im/post/5c715c92e51d4526643fac59