【小枫r的学习记录003——CSS初识2】

最新推荐文章于 2024-07-25 14:15:14 发布

明月清风我♀

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量89

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_74091650/article/details/129873859

版权

本文介绍了前端学习中的CSS基础知识，包括Emmet语法提升HTML结构编写效率，复合选择器如后代选择器、子元素选择器和伪类选择器的使用，元素的显示模式（块元素、行内元素和行内块元素），背景属性如颜色、图片和位置，以及CSS的三大特性：层叠性、继承性和行高继承。此外，还讲解了CSS样式的优先级规则。

摘要由CSDN通过智能技术生成

【小枫r的学习记录003——CSS初识2】

写在最初：
本文为记录前端学习历程而产生，用于回顾复习，知识点比较琐碎，也省略了一些冗长的定义解释型内容。如有错误，多谢指正。

Emmet语法

使用缩写来提高HTML和CSS编写速度

快速生成HTML结构语法

1.生成标签直接输入标签名按tab/enter键。
2.生成多个相同标签标签名*标签数量。
3.生成父子关系标签 >。
4.生成兄弟关系标签 +。
5.生成带类名或id名字的，直接写.demo 或#two tab键即可
6.生成的div类名有顺序，可用自增符号$.
7.生成的标签内部有默认内容用{}表示。

    <div></div>
    <!-- div*5 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- ul>li -->
    <ul>
        <li></li>
    </ul>
    <!-- div+p -->
    <div></div>
    <p></p>
    <!-- p.demo -->
    <p class="demo"></p>
    <!-- div#beautiful -->
    <div id="beautiful"></div>
        <!-- div{风月平分破} -->
    <div>风月平分破</div>
    <div>风月平分破</div>
    <div>风月平分破</div>
    <!-- div$*5 -->
    <div1></div1>
    <div2></div2>
    <div3></div3>
    <div4></div4>
    <div5></div5>
    <!-- div{$}*3 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>

快速生成CSS样式语法

基本采取简写形式

    <style>
        .one{
            /* .100 */
            width: 100px;
            /* tac */
            text-align: center;
        }
    </style>

CSS的复合选择器

复合选择器简介

1.复合选择器就是基础选择器组合而成
2.可以更准确更高效的选择目标元素（标签）
3.包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器

语法：
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2.
注意：
1.元素1和元素2中间空格隔开。
2.元素1是父级，元素2是子级，样式只改变2中的。
3.元素2只要是元素1的后代即可。

        ul li{
            color:aqua;
        }
        p div a {
            color:bisque;
        }

子元素选择器

只能选择某元素的最近一级子元素。
语法：
元素1>元素2{样式声明}
注意：
1.中间大于号隔开。
2.元素1是父级，元素2是子级，最终选择的是元素2。

并集选择器

可以选择多组标签，为他们等一相同的样式，通常用句集体声明。
语法：
元素1,元素2{样式声明}
注意：
1.逗号可理解为“和”。
2.并集选择器一般竖着写。
3.最后一组不需要加逗号。

    <style>
       div,p,ul li{
        color:blue
       }
    </style>
</head>
<body>
    <div>
        熊大
    </div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
最大特点是用冒号表示，如 :honor等。

链接伪类选择器

在这里插入图片描述

    <style>
        a:link{
            color: black;
            text-decoration: none;
        }
        a:visited{
            color:blue;
        }
        a :hover{
            color: aquamarine;
        }
        a:active {
            color: brown;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
</body>

注意：

1.为确保生效，需按照LVHA的循顺序声明：:link-:visited-:hover-:active。

2.a链接在浏览器中具有默认样式，实际工作中都需要给链接单独制定样式。

focus伪类选择器

用于选取获得焦点的表单元素。

焦点即光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素。

语法：

    <style>
        input:focus{
            background-color: red;
            color:pink;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">

CSS的元素显示模式

元素显示模式简介

网页的标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示。

HTML元素一般分为块元素和行内元素两种类型。

块元素

特点：

1.自己独占一行

2.高度，宽度，外边距以及内边距都可以控制。

3.宽度默认是容器（父级宽度）的100%。

4.是一个容器及盒子，里面可以放行内或者块级元素。

注意：

1.文字类的元素内不能使用块级元素。

2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>.

行内元素

特点：

1.相邻行内元素在一行上，一行可以显示多个。

2.高、宽直接设置是无效的。

3.默认宽度就是它本身内容的宽度。

4.行内元素只能容纳文本或其他行内元素。

注意：

1.链接里面不能再放链接。

2.特殊情况<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素

同时具有块元素和行内元素的特点。

特点：

1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）。

2.默认宽度就是它本身内容的宽度（行内元素特点）。

3.高度、行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式转换

一个模式的元素需要另外一种模式的特性

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

    <style>
        a {
             width: 150px;
             height: 50px;
             display:block;
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>

单行文字垂直居中

行高=盒子高度是即可实现文字垂直居中

即：line-height=height

CSS的背景

背景颜色

语法：

background-color：颜色值

一般情况下元素背景颜色默认值是transparent，也可手动指定背景颜色为透明颜色。

背景图片

语法：

background-image：none|url(url)

none:无背景图；

url：使用绝对或相对地址指定背景图像。

背景平铺

语法：

background-repeat|no-repeat|repeat-x|repeat-y

默认状态下是平铺的。

背景位置**

语法：

background-position:x,y

x和y坐标可以使用方位名词或者精确单位。

1.参数是方位名词

指定的两个值都是方位名词，则两值前后顺序无关。
只指定了一个方位名词，则第二个值默认居中对齐。

2.参数是精确单位

参数值是精确坐标，第一个一定是x坐标，第二个一定是y坐标。
只指定一个数值，该数值一定是x坐标，另一个默认垂直居中。

3.参数是混合单位

指定的两个值是精确单位和方位名词的混合使用，则第一个值为x坐标，第二个值为y坐标。

背景固定（背景附着）

设置背景图像是否固定或者随着页面其余部分滚动。

语法：

background-attachment：scrool|fixed

scrool：滚动

fixed：固定

背景属性复合写法

语法：

background:red url(image.jpg repeat-x fixed top)

背景色半透明

background-color:rgba(0,0,0,0.3)

注意：

1.最后一个参数是alpha透明度，取值范围在0-1之间。

2.习惯上把0.3写为.3.

3.背景半透明是指盒子背景半透明，盒子里的内容不受影响。

    <style>
        .color{
            width: 300px;
            height: 300px;
            background-color: hotpink;
        }
        .image{
            width: 600px;
            height: 600px;
            background-image: url(123.png);
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-position: center center;
            background-position: 80px 90px;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="color"></div>
    <div class="image"></div>

CSS的三大特性

层叠性

相同选择器设置相同的样式，一个样式就会覆盖另一个冲突的样式。

层叠性原则：

样式冲突，就近原则，哪个离结构近，就执行哪个。

样式不冲突，不会层叠。

    <style>
        .color{
            width: 300px;
            height: 300px;
            background-color: hotpink;
        }
        .color{
            width: 300px;
            height: 300px;
            background-color: #e72d2d;
        }
    </style>
</head>
<body>
    <div class="color"></div>
</body>

继承性

CSS中子标签会继承父标签的某些样式。

主要继承与文字相关的样式，不是所有的都继承。

   <style>
        .color{
            width: 300px;
            height: 300px;
            background-color: hotpink;
            color: aquamarine;
            font-size: larger;
        }
    </style>
</head>
<body>
    <div class="color">
        <p>
            生如夏花
        </p>
    </div>
</body>

行高的继承性

body{

font:12px/1.5 Microsoft YaHei;

}

注意：

1.行高可以跟单位也可不跟。

2.如果子元素没有设置行高，则会继承父元素的行高为1.5.

3.此时子元素的行高是：当前子元素的文字大小*1.5.

优先级

当同一个元素指定多个选择器，就会有优先级产生。

1.选择器相同，执行层叠性。

2.选择器不同，根据选择器权重置执行。

    <style>
        div{
            color:rgb(240, 200, 24);
        }
        .color{
            color: aquamarine!important;
            font-size: larger;
        }
    </style>
</head>
<body>
    <div class="color">
        <p>
            生如夏花
        </p>
    </div>
</body>

注意：

1.权重是由四位数字醉成，但是不会有进位。

2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。

3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4.简单记为：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式为1000，！important为无穷大。

5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

权重叠加：复合选择器会有权重叠加，需要计算权重。

写在最后
学习了新的知识，才知道自己的渺小与无知。
一以贯之的努力，不得懈怠的人生，所有微小的努力，都会变成最终的结果。

明月清风我♀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【小枫r的学习记录003——CSS初识2】

1.复合选择器就是基础选择器组合而成2.可以更准确更高效的选择目标元素（标签）3.包括：后代选择器、子选择器、并集选择器、伪类选择器等网页的标签非常多，在不同地方会用到不同的标签，了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素（标签）以什么方式进行显示。HTML元素一般分为块元素和行内元素两种类型。
复制链接

扫一扫