前端学习总结-CSS-1

最新推荐文章于 2024-08-16 23:06:16 发布

前端小狮子

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量44

点赞数

文章标签： css 前端学习

本文链接：https://blog.csdn.net/m0_59105856/article/details/128049515

版权

1.选择器

标签选择器：p{},a{},h{}等

类选择器：.className{},在标签内加入属性class="className"

id选择器：#idName{},在标签内加入属性id="idName"

通配符选择器：*{}

后代选择器：p .className{}

子元素选择器：.nav>a,仅会选择儿子标签

并集选择器

div,
p,
.pig li {
   color: pink;
}

伪类选择器（用于给链接不同状态加效果，前后顺序不可颠倒）

        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }

focus选择器（给input框加特效）

input:focus {
    background-color: pink;
    color: red;
}

2.字体属性

复合写法：/* font: font-style font-weight font-size/line-height font-family; */

font-weight:字体粗细，100-700,400为正常，700加粗

font-size/line-height 字高/行高

3.文本外观

           color: rgb(255, 0, 255);
           /* 对齐方式 */
           text-align: right;
           /* 删除线 */
           text-decoration: line-through;
           /* 上划线 */
           text-decoration: overline;
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
           text-indent: 2em;
           /* 行间距 */
           line-height: 25px;

4.行内式、内链式、外链式

<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>

<style>
   div {
          color: pink;
   }
</style>

5.emmet语法快速写html

div>a.links{$只小猪}*4回车

<div>
        <a href="" class="links">1只小猪</a>
        <a href="" class="links">2只小猪</a>
        <a href="" class="links">3只小猪</a>
        <a href="" class="links">4只小猪</a>
</div>

6.块元素与行内元素

块元素：div，h1-h6,p,ul,ol,li等

行内元素：span，a等