CSS样式相关属性

CSS样式相关属性

---

 

一、CSS样式

CSS用来美化页面

CSS提供了丰富得样式来修饰页面结构和内容，语法如下

属性:属性值;

1.1 字体相关

　　font-size 设置字体大小，属性值可以是 固定值 | 百分比 | 关键字（如：small smaller x-small）

　　font-family 设置字体，多个字体之间使用逗号隔开

　　font-family:Arial,"微软雅黑","Microsoft Yahei","楷体"

　　font-weight 字体加粗 属性值 100 - 900之间得整百数 | bold | bolder | normal | lighter

　　font-style 字体风格 属性值 normal | italic(标准字体自带斜体字) | oblique(非标准字体强制转换斜体字效果)

1.2 文本修饰相关

color 设置文本颜色

text-decoration:underline(下划线) | overline(上划线) | line-through(删除线) | none; 设置文本修饰 此属性是以下三种属性的简写：

　　text-decoration-line 属性规定文本修饰要使用的线条类型

　　text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色

　　text-decoration-style 属性规定线条如何显示 wavy solid dotted double dashed

1.3 排版相关

　　text-indent 设置首行缩进

　　text-align 设置文本水平居中，属性值有left right center justify

　　line-height 设置行高，属性值可以是 固定值 、百分比、倍数

　　letter-spacing 设置文字与文字之间的距离

　　word-spacing 设置空格文本两边的距离（英文单词之间的距离 hello world）

　　vertical-align 设置同一行内相邻元素的垂直对齐方式 ，属性值有 top | middle | bottom | baseline | 固定值（可以是负数）

　　white-space属性指定元素内的空白怎样处理

　　text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

　　overflow属性指定如果内容溢出一个元素的框，会发生什么

1.4 列表相关

　　

• list-style-type 设置列表项目符号类型，属性值 disc(实心圆) circle(空心圆) square(实心方块) decimal(数字1,2,3...) decimal-leading-zero(数字01,02,03...) upper-alpha | lower-alpha（大小写英文字母） upper-roman | lower-roman(大小写罗马数字) none(清除列表项目符号)等等

  不完全统计地址：https://www.runoob.com/cssref/pr-list-style-type.html

  非标准参考：http://www.verydoc.net/css/00001526.html

  /* 设置列表项目符号类型 */
  /* list-style-type: disc; */
  /* list-style-type: circle; */
  /* list-style-type: square; */
  /* list-style-type: decimal; 1，2，3，...*/
  /* list-style-type: decimal-leading-zero;  01,02,03...*/
  /* list-style-type: upper-alpha; */
  /* list-style-type: lower-alpha; */
  /* list-style-type: lower-roman; */
  /* list-style-type: upper-roman; */
  /* list-style-type: lower-greek; */
  /* list-style-type: cjk-ideographic; 一,二,三,...*/
  /* list-style-type: cjk-heavenly-stem;  甲乙丙丁...*/
  /* list-style-type: cjk-earthly-branch; 子丑寅卯...*/

   

• list-style-position 设置列表项目符号的位置 属性值 outside | inside

  outside 默认

  

  inside

  

• list-style-image 设置列表项目符号为图片

  在 css 中通过 url 添加路径

   list-style-image: url(./右箭头-三个.png);

上面三个属性的简写方式： list-style:type position image;

1.5 表格相关

　　border-collapse 边框是否折叠 属性值 collapse 折叠（合并）

　　html代码：

<table>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

css代码：

 table{
    width: 200px;
    /* 块级元素水平居中 */
    margin-left: auto;
    margin-right: auto;
    /* 设置背景颜色 */
    /*  */
    /* 设置边框 */
    border: 1px solid #00F;
    /* 设置边框折叠 */
    /* border-collapse: collapse; */
    /* 设置文本水平居中 */
    text-align: center;
}
​
td{
    border: 1px solid #0f0;
}

页面效果：

 　

1.6背景相关属性

　　background-color 属性值可以背景图颜色

　　background-image 属性值可以使用url添加背景图片 也可以使用linear-gradient或者radial-gradient添加渐变色

　　background-position 属性设置背景图片的位置，属性值可以是 固定值 | 百分比 | 关键字

　　注：如果只是填写一个值，代表距左边的距离 ，另外一个方向默认居中

　　如果是两个值，第一个代表距离左边的值，另外一个代表距离顶部的值

　　background-repeat 设置背景图片平铺方式 repeat | repeat-x | repeat-y | no-repeat

　　background-attachment 设置背景附件是否随页面滚动 属性值有 scroll | fixed

　　background-size CSS3属性设置背景图片的大小，可以是固定值 | 百分比 | cover | contain;

　　background-clip属性指定背景绘制区域，默认值值说明border-box

　　background-origin属性指定background-position属性应该是相对位置，默认值padding-box

值	说明
border-box	背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

二、颜色的表示方式

• 英文关键字 红red 绿green 蓝blue 黑black 白white

• 十六进制 红#f00 绿#0F0 蓝#00F 黑#000 白#FFF

• RGB

  • 百分比 红rgb(100%,0,0) 白rgb(100%,100%,100%)

  • 0-255数字 蓝色rgb(0,0,255) 黑rgb(0,0,0)

• HSL颜色值指定：HSL（色调，饱和度，明度）