CSS中常见的属性

最新推荐文章于 2024-05-31 17:42:47 发布

junlingshiwo

最新推荐文章于 2024-05-31 17:42:47 发布

阅读量133

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_45722135/article/details/104430442

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

第一阶段的：

<1> visibility 属性规定元素是否可见 ——visible(元素可见) ， hidden（元素不可见）

<2> cursor 规定光标的类型——pointer(规定光标为一只手) ， move ，help.....

<3> font属性的四种分类——font-fanily(默认字体，优先由第一个依次到第二个），font-size（字体大小），font-weight（设置文本的粗细），font-style（指定文本的斜体）

<4> text-decoration 属性规定添加到文本的修饰

text-indent 设置首行缩进

<5> text-align 设置对齐——left，right，justify(两边对齐），center（居中对齐）

<6> text-transform 用于将元素中的字母全部变成大小写——uppercase（大写）,lowercase（小写），none（正常）

<7> list-style 针对列表，设置所有列表属性

<8>line-height 用于设置行高，行高越大则行间距越大——行间距=line-height-font-size

<9> overflow 控制内容溢出的情况——visible, scroll（添加滚动条）， auto（根据需要添加滚动条自动）， hidden（隐藏超出盒子的内容）

此代码就是对属性的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*font-family: Arial  ，helvetica;*/

        }
        div{
            width: 200px;
            height: 200px;
            background-color: #409ad6;
        /*visibility 属性规定元素是否可见 ;*/
            visibility: visible;
          /*visibility: hidden;*/
            /*display: none;*/

            /*cursor属性 规定显示光标的类型 ;*/
            cursor: pointer;
            /*cursor: move;*/
            /*cursor: crosshair;*/
              /*cursor: help ;*/
              /*cursor: wait;*/

            /*font-size: 30px;*/

            /*设置文本的粗细*/
           font-weight: bolder;
            /*定义文本的风格*/
            font-style: italic;

        }
        p{
            /*background-color: green;*/
            /*属性规定添加到文本的修饰*/
            /*text-decoration: underline;*/
            text-decoration:overline;
            /*text-decoration: line-through;*/

        }
        a{
            /*规定添加到文本的修饰*/
            text-decoration: none;

        }
        #work{
            width: 100px;
            height: 200px;
            background-color: green;
            /*设置首行缩进*/
            /*text-indent:40px;*/
            text-indent: 2%;

            /*用于元素中字母全部改变大小写*/
            /*text-transform: uppercase;*/
            text-transform: lowercase;
            /*控制内容溢出情况*/
            /*overflow: visible;*/
            overflow: scroll;
            /*overflow: auto;*/
            /*overflow: hidden;*/
        }
        ul{
            /*针对所有列表*/
            /*list-style: none;*/
            /*list-style: square;*/
            list-style: upper-roman;
        }




    </style>
</head>
<body>

<div>你准备好了吗</div>
<p>我来看看而已</p>
<a href="#">哈哈哈</a>
<p id="work">胖胖熊两岁了，可是很爱哭鼻子 head，遇到什么事都要哇哇大哭。
     一天，胖胖熊被一个小石头拌了一跤，虽然一点也不痛，可他还是大哭起来。
    胖胖熊扒在地上哭呀哭呀，越哭越伤心 family，泪水哗哗地往下掉。 
    </p>
<ul>
    <li>今天天气不错</li>
    <li>今天天气不错</li>
    <li>今天天气不错</li>
    <li>今天天气不错</li>
    <li>今天天气不错</li>
</ul>
</body>
</html>