css常用属性

##css常用属性

常用样式

颜色

• color

  • 前景色

• background

  • 背景色

字体

• font-size

  • 字体大小

• font-weight

  • 字体粗细

边框

• border

  • border：1px solid red

    • border-top
    • border-right
    • border-bottom
    • border-left

  • border-redius

    • 圆角

外边框

• margin

  • 支持四种写法

    • margin: 10px;

      • 只有一个数 代表上下左右

    • margin: 10px 20px

      • 只有两个数 第一个代表上下 第二个代表左右

    • margin: 10px 20px 30px;

      • 只有三个数 第一个代表上 第二个代表左右 第三个代表下

    • margin: 10px 20px 30px 40px;

      • 有四个数 代表顺时针

内部

• padding

  • 支持四种写法

    • padding: 10px;

      • 只有一个数 代表上下左右

    • padding: 10px 20px

      • 只有两个数 第一个代表上下 第二个代表左右

    • padding: 10px 20px 30px;

      • 只有三个数 第一个代表上 第二个代表左右 第三个代表下

    • padding: 10px 20px 30px 40px;

      • 有四个数 代表顺时针

宽

• width

高

• height

文本

• text-algin：center

  • 水平居中

• height=lineheighr

  • 垂直居中

• text-decoration:none

  • 去下划线

显示

• diaplay

  • inline

    • 不换行

  • block

    • 块元素

  • inline-block

    • 行内块

列表

• list-style：none

  • 去除列表样式

样式属性

行内样式

• 写在开始标签内部 只针对当前标签有效
• style=“属性名:属性值;属性名:属性值;”

内补样式表

• 只针对当前html有效
• 把style标签写在head中
• 在style标签中写入选择器{}
• 在{}中写入选择器{属性名:属性值;属性名:属性值;}

外部样式表

• 在css文件中编写
• 在css文件中写入选择器{}
• 在{}中写入选择器{属性名:属性值;属性名:属性值;}
• 在需要使用的页面内 使用link标签引入 在style标签上面

常用选择器

*

• 通配符选择器

h1

• 标签选择器

.item

• class选择器

#p

• id选择器