首页 > 代码库 > Css属性

Css属性

2024-09-28 19:06:39   217人阅读

1.字体

　　font：复合属性，设置或检索对象中的文本特性

　　font-style：设置字体样式

　　font-size：设置字体大小

　　font-weight：设置字体粗细

　　font-family：设置文本字体的名称

　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            font: italic bold 30px fantasy;
        }

    </style>
</head>
<body>
    <p>hello css</p>
</body>
</html>

2.文本

　　color：文本颜色

　　text-align：文本水平对齐方式

　　vertical-align：垂直对齐方式

　　line-height：行高

　　text-transform：设置文本大小写

　　text-indent：文本缩进

　　　　例子：首行缩进2个单位

html代码如下
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/style.css" type="text/css"/>
</head>
<body>
    <p>文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试文本颜色测试</p>
</body>
</html>

css代码如下
body{
    color: red;
}
p{
    width: 300px;
    background-color: aqua;
    text-align: center;
    height: 200px;
    text-indent: 2em;
}

　　Text-transform例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/style.css" type="text/css"/>
</head>
<body>
    <p id="ca">this is my web</p>
    <p id="up">this is my web</p>
    <p id="low">This Is My Web</p>
</body>
</html>

css代码如下
body{
    color: red;
}
#ca{
    text-transform: capitalize;
}
#up{
    text-transform: uppercase;
}
#low{
    text-transform: lowercase;
}

　　line-height 单行文本垂直居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/style.css" type="text/css"/>
</head>
<body>
    <div>垂直居中</div>
</body>
</html>


div{
    width: 200px;
    height: 300px;
    background-color: blue;
    font-size: 20px;
    line-height: 300px;
}

3.文本装饰

　　text-decoration：复合属性，检索或设置对象中的文本的装饰

　　text-decoration-line：文本装饰线条的位置

　　text-decoration-color：文本装饰线条的颜色

　　text-decoration-style：文本装饰线条的颜色

　　text-shadow：阴影

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/style.css" type="text/css"/>
</head>
<body>
    <p>文本装饰线条</p>
</body>
</html>

p{
    text-decoration-line: underline;
    text-decoration-color: blue;
    text-decoration-style: dashed;
    text-shadow: 5px 5px 1px red;
}

4.列表

　　css列表允许放置，改变列表标志，或者将图像作为列表项标志

　　只适用于类型为列表的元素，ul，ol

　　　　list-style：复合属性，设置列表相关内容

　　　　list-style-image：列表项图像

　　　　list-style-position：列表标志位置

　　　　list-style-type：列表类型

　　　　　　disc：实心圆

　　　　　　circle：空心圆

　　　　　　square：实心方块

　　　　　　decimal：阿拉伯数字

　　　　　　lower-roman：小写罗马数字

　　　　　　upper-roman：大写罗马数字

　　　　　　lower-alpha：小写英文字母

　　　　　　upper-alpha：大写英文字母

　　　　　　none：不使用项目符号

　　　　　　armenian：传统亚美尼亚数字

　　　　　　cjk-ideographic：浅白的表意数字

　　　　　　georgian：传统的乔治数字

注：只有当<list-style-image>属性为none或者指定图像不可用时，<list-style-type>才起作用。

ul li{
    list-style-type: decimal;
}

　　list-style-image的例子：

ul li{
    list-style-image: url("pic/timg1.jpg");
    margin-left: 100px;
}

　　list-sytle-position的例子：

 

 

ul li{
    width: 200px;
    margin-left: 200px;
    list-style-position: inside;
}

 

5.表格

　　1.css表格

　　　　　　css表格属性可以帮助我们极大的改善表格的外观

　　2.表格边框

　　3.折叠边框

　　4.表格宽高

　　5.表格文本对齐

　　6.表格内行距

　　7.表格颜色

例子：

table{
    /*合并相邻边框*/
    border-collapse: collapse;
    border-color: pink;
}

td{
    width: 200px;
    height: 50px;
    /*padding-left: 20px;*/
    text-align: center;
}

tr{
    background-color: aqua;
}

 

Css属性


联系
我们