前端(CSS语言-属性汇总）

一、定义颜色的三种方式

color: #000;         # 定义颜色的方式一，通过16进制的形式设置(#000000简写：#000)
color: black;         # 定义颜色的方式二，通过颜色名字设置
color: rgb(0,0,0);  # 定义颜色的方式三，范围0-255(黑色：0，0，0 ，白色：255，255，255)
color: rgba(0,0,0,0.5);  # 定义颜色的方式四，透明度范围：0-1

二、定义字体属性

font-size: 16px       # 字体大小默认16px
font-weight: bold;    # 字重：bold(粗体)，normal(默认值，标准)，bolder(更粗)，lighter(更细)，100-900(通过数值设置粗细，默认400)
font-family: "Arial Black", “arial-black,” “cursive”;     # 指定浏览器选择字体类型，如果不支持当前当前字体，依次往后尝试下一个字体类型

text-align: center;   # 对齐方式：left(左对齐，默认)，right(右对齐)，center(居中对齐)，justify(两端对齐)
text-decoration: underline;    # 文字装饰：none(标准文本，默认)，underline(文本下划线)，overline(文本上划线)，line-through(穿过文本的一条线)
text-indent: 32px;    # 文本首行缩进2个字符(默认16px为一个字符大小)


letter-spacing： 10px;         # 指定字体间间隔

line-height: (height px);       # 字体高度设置同块级标签高度一致时，竖直居中对齐

三、定义背景颜色

background-color:black;       # 定义背景颜色：黑色
background: url("2.jpg");      # 背景设置的集合(范围更广，属性中包含background-image)
background-image: url('1.jpg');   # 设置背景的图片样式：url里面是图片路径，相对路径：同html文件在一个目录下， 绝对路径：需要指定路径
background-repeat: no-repeat;    # 定义背景图片放置类型：no-repeat(图片不平铺), repeat-y(垂直方向上平铺), repeat-x(水平方向上平铺), repeat(x轴和y轴重复平铺，默认)
background-position: right top;    # 定义背景图片位置：left top (上左)，center top(上中)，right top(上右)， center left (中左)，center center(中心)，center right(中右)，left bottom(下左)，center bottom (下中)， right bottom(下右)，通过指定具体参数(200px, 200px)
 background-attachment: fixed;          # 固定背景图片位置，防止滚动

四、边框属性

border: 2px solid red;      # 定义边框样式:none(无边框),dotted(点状虚线边框)， dashed(矩形虚线边框)，solid(实线边框)

border-width: 2px;           # 定义边框宽度：2px
border-style: solid;           # 定义边框类型：实线线框(solid)
border-color: red;            # 定义边框宽度：颜色(red)

border-top-style:dotted;          # 定义顶层边框类型
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

border-top-color: red;             # 定义顶层边框颜色
border-right-color: red;             # 定义顶层边框颜色
border-bottom-color: red;             # 定义顶层边框颜色
border-left-color: red;             # 定义顶层边框颜色

border-radius: 50%;           # 定义边框的效果0-50%(边框为正方形时：50%为一个圆形)

padding: 10px 10px;           # 设置内边距：(上下：10px,左右：10px)
padding: 10px 10px 10px 10px;           # 设置内边距：(上：10px,右：10px, 下：10px, 左：10px)
单独设置内边距(padding-left,padding-right,padding-top,padding-bottom)

margin: 10px 10px;                # 设置外边距(上下：10px,左右：10px)
margin: 10px 20px 30px 40px ;    # 设置外边距(上：10px,右：20px, 下：30px, 左：40px)
单独设置外边距(margin-right(右)，margin-bottom(下)，margin-left(左)，margin-top(上))
• auto(浏览器计算外边距)
• length(规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px)
• %(规定基于父元素的宽度的百分比的外边距)
• inherit(规定应该从父元素继承外边距)

width: 100px                       # 设置边框宽度
height: 100px                      # 设置边框高度
max-width: 100px                # 设置边框的最大宽度(元素可以比指定值(width)窄，但不能比其宽)
• none（默认。定义对元素的最大宽度没有限制）
• length（定义元素的最大宽度值）
• %（定义基于包含它的块级对象的百分比最大宽度）
• inherit（规定应该从父元素继承 max-width 属性的值）

五、display常用属性

display: none;           # 设置标签属性：HTML文档中元素存在，但是在浏览器中不显示
display: block;           # 设置标签属性：默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
display: inline;           # 设置标签属性：变成行内标签，width、height、margin-top、margin-bottom和float属性无效
display: inline-block;           # 设置标签属性：使元素同时具有行内元素和块级元素的特点

六、float常用属性

float:left                # 向左浮动
float:right              # 向右浮动
float:none              # 默认值，不浮动

clear.none             # 默认值。允许浮动元素出现在两侧
clear.left               # 左侧不允许浮动元素
clear.right             # 右侧不允许浮动元素
clear.both             # 左右两侧均不允许浮动元素
clear.inherit          # 规定应该从父元素继承 clear 属性的值

七、溢出属性(overflow)

overflow： visible；        # 默认值。内容不会被修剪，会呈现在元素框之外。
overflow： hidden；       # 内容会被修剪，并且其余内容是不可见的。
overflow： scroll；         # 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow： auto；          # 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow： inherit；       # 规定应该从父元素继承 overflow 属性的值。

• overflow（水平和垂直均设置）
• overflow-x（设置水平方向，只出现x轴的滚动条）
• overflow-y（设置垂直方向，只出现y轴的滚动条）

八、nth-child() 选择器

div:nth-child(n) 选择器匹配属于其父元素(div)的第 N (数字、关键词或公式)个子元素，不论元素的类型

九、vertical-align 属性

vertical-align:text-top;                    # 设置元素的垂直对齐方式(把元素的顶端与父元素字体的顶端对齐)
• baseline(默认。元素放置在父元素的基线上)
• sub(垂直对齐文本的下标)
• super(垂直对齐文本的上标)
• top(把元素的顶端与行中最高元素的顶端对齐)
• middle(把此元素放置在父元素的中部)
• bottom(把元素的底端与行中最低的元素的底端对齐)
• text-bottom(把元素的底端与父元素字体的底端对齐)
• %(使用 "line-height" 属性的百分比值来排列此元素。允许使用负值)
• inherit(规定应该从父元素继承 vertical-align 属性的值)

十、list-style 属性

list-style                    # 简写属性在一个声明中设置所有的列表属性 
1. list-style-type         # 设置列表项标记的类型
    • none(无标记)
    • disc(默认。标记是实心圆)
    • circle(标记是空心圆)
    • square(标记是实心方块)
    • decimal(标记是数字)
2. list-style-position    # 设置在何处放置列表项标记
    • inside(列表项目标记放置在文本以内，且环绕文本根据标记对齐)
    • outside(默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐）
    • inherit(规定应该从父元素继承 list-style-position 属性的值)
3. list-style-image      # 使用图像来替换列表项的标记
    • url(图像的路径)
    • none(默认。无图形被显示)
    • inherit(规定应该从父元素继承 list-style-image 属性的值)
4. inherit                   # 规定应该从父元素继承 list-style 属性的值

十一、定位流属性

z-index：1;          # 设置元素的堆叠顺序(拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面)
• auto(默认。堆叠顺序与父元素相等)
• number(设置元素的堆叠顺序)
• inherit(规定应该从父元素继承 z-index 属性的值等)