html--css常见属性使用

目录

常见属性

1.颜色属性  

2.字体属性

背景相关属性

文本属性

边框属性

列表属性

---

常见属性

1.颜色属性  

 color 属性定义字体的颜色属性

  {color: brown}  (对应英文单词)或者 {color:#ffffff}(16进制对应的颜色)

rgb模式:  {color:rgb红(r),绿(g),蓝(b)}  各自的取值范围在0~255之间

红色 : p{color:rgb(255,0,0)}
绿色 : p{color:rgb(0,255,0)}
蓝色 : p{color:rgb(0,0,255)}

rgba模式 和之前一样  a 表示透明度 取值范围 0-1之间

红色 : p{color:rgba(255,0,0,0)}
绿色 : p{color:rgba(0,255,0,0.3)}
蓝色 : p{color:rgba(0,0,255,0.5)}

2.字体属性

font-size 字体大小

font-size: 100px; 设置固定值
font-size: 100%; 父元素的百分比
font-size: smaller;比父元素更小
font-size: larger;比浮云苏更大
font-size: inherit;集成父元素的

font-family 定义字体 字体的优先,若果电脑有宋体就显示宋体,没有就显示微软雅黑,可以搜索英文代替中文,英文不需要引号

font-family:'宋体','微软雅黑';

font-weight 字体粗细

font-weight:normal; 默认值
font-weight:bold;   粗
font-weight:bolder; 更粗
font-weight:lighter; 更细
或者 
font-weight:100~900;  取值是100~900的整百数

font-style 字体样式

font-style:normal 正常
font-style:italic 斜体
font-style:oblique 倾斜
font-style:inherit 集成

font-variant 小型大写字母显示文本

font-variant:normal; 标准
font-variant:small-caps; 小型小写字母显示文本
font-variant:inherit; 继承

背景相关属性

 background-color 背景颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
    body{
        background-color:rgba(0,0,255,0.2)
    }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">----百度---</a>
</body>
</html>

效果:

 

 background-image 背景图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
    body{
        /* 图片 */
        background-image:url(images/user.png);
        /* 重复 */
        background-repeat: no-repeat;
        /* 位置 */
        background-position: center;
    }
    /* 简写方式 和上面效果一样 */
.body{
    background: #f2f2f2 url(images/user.png) no-repeat center
}
    </style>
</head>
<body class="body">
    <a href="http://www.baidu.com" target="_blank">----百度---</a>
</body>
</html>

文本属性

text-align 横向排列

text-align:left;
text-align:right;
text-align:center;

line-height 文本行高

line-height:xx%; 百分比行高
line-height:xx;固定数值

text-indent 首行缩进

text-indent:50%; 缩进父级元素的50
text-indent:50px; 缩进固定制
text-indent:inherit; 继承

letter-soacing 字符间距 文字与文字间距  word-spacing 单词间距  和字符间距相同

letter-soacing:normal;默认
letter-soacing:20px;自定义大小
letter-soacing:inherit; 继承

direction 文本方向

direction:ltr;从左到右  left to right
direction:rtl;从右边到左边  right to left 
direction:inherit; 继承

text-transform 文本大小写

text-transform:capitalize; 每个单词以大写字母开头
text-transform:uppercase; 定义仅有大写字母
text-transform:lowercase; 定义无大写字母,仅有小写字母
text-transform:inherit; 继承

边框属性

边框风格 border-style

border-style:none; 无边框
border-style:solid; 直线边框
border-style:dashed; 虚线边框
border-style:dotted; 点线边框
border-style:double; 双线边框
border-style:groove; 吐槽边框
border-style:ridge; 垄状边框
border-style:inset; inset边框
border-style:outset; outest边框
border-style:inherit; 继承

边框宽度 border-width

border-width:thin;细边框
border-width:medium;中等边框
border-width:thick;粗边框
border-width:2px;固定值边框
border-width:inherit;继承

边框颜色

border-color:rgba(0,0,225,0.2) 

列表属性

list-style-type 标记的类型

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
        ul{
            list-style-type: decimal
        }
    </style>
</head>

<body>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
</body>

</html>

list-style-position 标记的位置

 

list-style-image 设置图像列表标记

list-style 简写方式