CSS一些常见属性及各个元素的简写符号

卡夫卡的baby

已于 2022-06-28 11:58:09 修改

阅读量308

点赞数

文章标签：前端 css

于 2022-06-28 11:51:11 首次发布

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125499612

版权

现在的互联网前端三层：
HTML	超文本标记语言	从语义的角度描述页面结构。
CSS		层叠式样式表	从审美的角度负责页面样式。
JS  JavaScript		从交互的角度描述页面行为

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来,为了让CSS可读性更强，你可以每行只描述一个属性。
注意：最后一条申明后面的分号(;) 可以省略不写。申明和申明直接的分号(;) 不能省略



<style>
        /* 用标签名 命名的选择器，我们叫 标签选择器 */
        h1{
            /* 声明 */
            /* 一条声明由两部分构成  由 属性名;(该属性对应的)值
            属性名不能改，官方规定怎么写就怎么写，值可以由你任意设置 */
            color: pink;
        }

        p{
            /* font就是“字体”，size就是“尺寸”。px是“像素”。单位必须加，不加不行。
            sublime中的快捷键是fos，然后tab */
            font-size: 20px;
            /* 字符（文字）颜色 color属性的值，可以是英语单词，比如red、blue、yellow等等；
            也可以是rgb、十六进制。sublime中的快捷键是c，然后tab */
            color: skyblue;
            text-align: center;
            outline: 1px dashed red;
        }
    </style>
</head>
<body>
     
    <h1>小李，你好</h1>
    <h1>小李，你好</h1>
    <h1>小李，你好</h1>

    <p>早安，世界</p>
    <p>早安，世界</p>
    <p>早安，世界</p>
    <p>早安，世界</p>
    <p>早安，世界</p>
    <p>早安，世界</p>

css一些常见属性及各个元素的简写符号

字符（文字）颜色：color:red;color属性的值，可以是英语单词，比如red、blue、yellow等等；也可以是rgb、十六进制。sublime中的快捷键是c，然后tab
字号大小：font-size:40px;font就是“字体”，size就是“尺寸”。px是“像素”。单位必须加，不加不行。sublime中的快捷键是fos，然后tab
背景颜色：background-color: blue;background就是“背景”。sublime中的快捷键是bgc，然后tab
加粗：font-weight: bold;font是“字体” weight是“重量”的意思，bold粗。sublime中的快捷键是fwb，然后tab
不加粗：font-weight: normal;normal就是正常的意思sublime中的快捷键是fwn，然后tab
斜体：font-style: italic;italic就是“斜体”sublime中的快捷键是fsi，然后tab
不斜体：font-style: normal;
sublime中的快捷键是fsn，然后tab

内容水平居中显示
text-align: center; 
sublime中的快捷键是ta，

下划线：text-decoration: underline;decoration就是“装饰”的意思。sublime中的快捷键是tdu，然后tab
没有下划线：text-decoration:none;sublime中的快捷键是tdn，然后tab


<style>
        h1{
            /* 文本颜色  c*/
            color: pink;
            /* 字号大小 fos */
            font-size: 60px;
            /* 背景颜色  bgc */
            background-color: blue;
            /* 不加粗 fwn */
            font-weight: normal;
            /* 斜体 fsi*/
            font-size: italic;
            /* 内容水平居中 tac */
            text-align: center;
        }

        p{
            color: blue;
            font-size: 30px;
            background-color: orange;
            /* 字体加粗 fwb */
            font-weight: bold;
            text-align: center;
        }
        em{
            color: blue;
            font-size: 30px;
            background-color: pink;
            /* 不斜体 fsn */
            font-style: normal;
        }


        i{
            color: blue;
            font-size: 30px;
            background-color: lightgreen;
            /* 不斜体 fsn */
            font-style: normal;
        }

        a{
            color: black;
            font-size: 130px;
            /* 去除下划线 tdn */
            text-decoration: none;
        }

        /* 鼠标悬停 */
        a:hover{
            color: #a10000;
            /* 下划线 tdu */
            text-decoration: underline;
        }


    </style>
</head>
<body>
    <h1>你好</h1>
    <p>hi,你好</p>
    <em>小李同学</em>
    <i>小李子</i>
    <br><br>

    <a href="">百度一下，就知道</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>