zoukankan      html  css  js  c++  java
  • css简介和属性

    CSS指的是层叠样式表(Cascading Style Sheets)

    样式定义如何显示HTML元素,通常存储在样式表中。

    css使用方式

    内联式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内联样式</title>
    </head>
    <body>
        <p style="background: red"> I  love  China!</p>
    </body>
    </html>

    内部样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内联样式</title> <style type="text/css"> p{ background: green; } </style> </head> <body> <p> I love China!</p> </body> </html>

    外部样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内联样式</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p> I  love  China!</p>
    </body>
    </html>

    CSS语法:

    selector {property : value;}  选择器{属性1:值1;属性2:值2;}

    常用选择器: 

    • .ClassSelector(类)
    • #IdSelector(id)
    • Selector(标签)

    基本CSS属性: 背景,文本,字体,尺寸,边距和填充,边框

    background (背景)

    • background-color  背景颜色
    • background-image 背景图像
    • background-repeat  背景平铺方式或重复
    • background-attachment  背景图像是否固定或随平面滚动
    • background-position  背景图像起始位置

    Text(文本)

    • color  颜色
    • line-height  行高
    • text-align  文本水平对齐方式
    • vertical-align  文本垂直对齐方式
    • Text-indent  首行缩进
    • Text-shadow  字体阴影
    • White-space  空白处理方式
    • Word-spacing  字间距

    Font

    • Font-family   指定文本字体系列
    • Font-size   指定文本字体大小
    • Font-style  指定文本字体样式
    • Font-weight  指定字体粗细

    Dimension

    • height  设置元素高度
    • Line-height  行高
    • max-height 元素最大高度
    • max-width  元素最大宽度
    • min-heigth  元素最小高度
    • min-winth  元素最小宽度
    • width 设置元素宽度

    Margin&Padding

    Margin

    • Margin-top 上边距
    • Margin-bottom   下边距
    • Margin-left  左边距
    • Margin-right  右边距

    Padding

    • Padding-yop  上填充
    • Padding-bottom  下填充
    • Padding-left  左填充
    • Padding-right 右填充

    Border

    • Border-top  上边框
    • Border-bottom  下边框
    • Border-left  左边框
    • Border-right  右边框
    • Border-style  边框样式
    • Border-width  边框宽度
    • Border-color  边框颜色
  • 相关阅读:
    新手入门贴之基于 python 语言的接口自动化 demo 小实战
    记新人从 excel 文件中读取字典数据踩的一个坑
    接口自动化 之 unittest+ddt+openpyxl 综合
    接口自动化之unittest+ddt
    接口自动化之unittest初探
    python之类与对象(5)
    python之类与对象(4)
    python之类与对象(3)
    python之类与对象(2)
    传智播客JavaWeb day01 快捷键、XML
  • 原文地址:https://www.cnblogs.com/ihacker/p/11067181.html
Copyright © 2011-2022 走看看