前端技术——2——CSS

kaoa000

已于 2022-02-21 16:32:15 修改

阅读量473

点赞数

分类专栏：网页前台技术文章标签：前端 css javascript

于 2022-02-21 16:31:05 首次发布

本文链接：https://blog.csdn.net/kaoa000/article/details/122845720

版权

网页前台技术专栏收录该内容

24 篇文章 1 订阅

订阅专栏

CSS是Cascading Style Sheets的简称，即层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

一、CSS的四种引入方式

1、行内式，在标签中使用style属性

<h1 style="color: green;background-color: rosybrown;">hello girl</h1>

2、嵌入式，通过style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h1 style="color: green;background-color: rosybrown;">hello girl</h1>
    <div>hello div</div>
</body>
</html>

3、链接式，引入CSS文件，通过link标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="Refresh" content="200">-->
    <title>This is a Title</title>
    <link  rel="icon"  href="https://g.csdnimg.cn/static/logo/favicon32.ico">
    <link rel="stylesheet" type="text/css" href="cssmy.css">
</head>
<body>
<div>hello div</div>hello txt
</body>
</html>

4、导入式，使用style标签将一个独立的css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，sytle标签写在head中。

    <style>
        @import "cssmy.css";
    </style>

3和4都是引入css文件，但是推荐3链接式，@import是CSS语法，link是HTML语法。代入式@import是所有HTML文档，即整个网页加载完毕后，在使用import的CSS文件进行渲染。

二、CSS选择器

选择器指明了{}中样式的作用对象。

*：通用选择器，作用于所有的内容，如*{color：red}，则页面上所有字体的颜色都变为红色。
标签选择器：对具体的标签渲染，如p{color：red}，则页面上所有的p标签的内容的颜色都变为红色，其他不变。
ID选择器（#ID）：按照标签的ID属性值选择，一般是唯一的，如<h1 id="id12">hhh</h1>，则#id12{color：red；}只作用属性id=“id12”的标签
类选择器（.class）：按照标签的class属性值选择，多个标签的class可以相同，使用最频繁的一种选择器。如<div class="divclass">div1</div> <div class="divclass">div2</div>,则.divclass{color：red}会作用于div1和div2上。

组合选择器：

后代选择器（使用空格）：使用空格分隔，如div p{color：red}，即选择div标签下的p标签。只要是后代，不管是儿子辈，还是孙子辈。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div p{
            color: darkred;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="id1">hello div</div>
<div>
    <p>son</p>
    <span>
        ooooo
        <p>grandson</p>
    </span>
</div>
<p>1212121212</p>
</body>
</html>

son和grandson都会被选中并改变样式。
子代选择器（使用>号）：只在子代中选择，不会在往下一代中去找。只f1，f1-1改变，f2-f1不会变，f2-f1不是子代。

<head>
    <meta charset="UTF-8">
    <style>
        #outer>.f1{
            color: darkred;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="id1">hello div</div>
<div id="outer">
    Outer
    <div class="f1">
        f1
        <div class="f1-1">f1-1</div>
    </div>
    <div class="f2">
        f2
        <div class="f1">f2-f1</div>
    </div>

</div>
<p>1212121212</p>
</body>

并行选择器（使用逗号,）：#ID1,#ID2,#ID3{}
毗邻选择器（使用加号+）：#id1+p，只选择紧挨着#id标签下面的p标签。

属性选择器：

一般的，块级标签内可以嵌套内联标签或某些块级标签，但是内联标签不能嵌套块级标签，只能嵌套内联标签；块级标签不能放在p标签中；有几个特殊的块级标签只能包含内联标签，不能包含块级标签，如h1——h6，p，dt；li内可以包含div；块级标签与块级标签并列、内联标签与内联标签并列。

使用中括号[]：下面的选择器选择所有具有class属性的标签，div1，div2，div3都选择了

<head>
    <meta charset="UTF-8">
    <style>
        [class]{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div id="id1">id1</div>

</body>

如果要选class=“div2”的标签，可以使用[class="div2"]，就是即使用属性名，又使用属性值。

标签就具有规范的属性，也可以自己加自定义的属性，如<div>可以有id，class属性，也可以自定义一个属性，如<div id="id1" class="div1" myattr="as1">，myattr就是我们自己定义的属性，在属性选择器中就可以使用。

还可以在[]前加标签，如p[class="myp"]，即选择p标签且有属性class并且其值为myp的标签。

关于标签的class属性，其值可以是一个，如class=“div1”，也可以是多个值，如class=“div1 div2”

假设attribute=value

"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:　
[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">
[attribute^=value] 属性的前几个字母是 value 就可以，例如：
[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]

伪类（Pseudo-classes）：CSS伪类是用来给选择器添加一些特殊效果。

anchor伪类：专用于控制链接的显示效果

befor和after伪类：在对应的标签前后后添加内容等

<head>
    <meta charset="UTF-8">
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:visited{
            color: aqua;
        }
        a:active{
            color: blueviolet;
        }
        p:after{
            content: "asasasasas";
        }
        p:before{
            content: "dsafdsa";
            color: blueviolet;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">baidu</a>
<p>hello ppp</p>
</body>

三、CSS的常用属性

背景属性：

<head>
    <meta charset="UTF-8">
    <style>
        #div1{
            height: 600px;
            background-color: rosybrown;
            background-image: url("kk.jpg");
            background-repeat: no-repeat; /*no-repeat是不重复，repeat，重复，全屏，repeat-x，在x轴，即行方向上重复，repeat-y，在y轴，即列方向重复*/
            background-size: auto;
            /*background: url("kk.jpg") no-repeat 100px 200px rosybrown;*/
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>

增加如下代码，空白就没有了。

文本属性：
文本背景颜色设置：

line-height: 50%; /*文本行高，基于字体大小的百分比*/

文本行高是文本高度的50%。

letter-spacing：10px
word-spacing：30px

p{
            background-color: blueviolet; /*背景原色*/
            text-align: center;  /*横向排列，文本左右居中*/
            line-height:  100px;  /*文本行高，就是文字高度加上文字上下的空白区域的高度*/
            letter-spacing: 10px; /*字符之间的间距5px*/
            word-spacing: 30px; /*字之间的间距设置为10px*/
            text-transform: capitalize; /*单词首字母大写*/
        }

图片的摆放：

background-position:center 整体居中

background-position:left center左居中

相应的还有右居中、上居中、下居中：right center、 top center、bottom center

外边距和内边距：（盒子模型或框）

margin：用于控制元素与元素之间的边距；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding：用于控制内容与边框之间的距离；
border（边框）：围绕在内边距和内容外的边框；
content（内容）：盒子的内容，显示文本和图象。

元素的宽度和高度：当指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度，而完全大小的元素，必须添加填充、边框和边距。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 200px; /*高度*/
            width: 30%;  /*宽度*/
            background-color: rosybrown;  /*背景色*/
            border: 1px dashed red; /*div的边框形状及颜色*/
        }
        .div2{
            height: 200px;
            width: 20%;
            background-color: green;
            border: dashed red; /*div的边框形状及颜色*/
        }
        .div3{
            height: 50px;
            width: 30%;
            background-color: aqua;
            border: dashed red; /*div的边框形状及颜色*/
        }
        .div4{
            height: 100px;
            width: 30%;
            background-color: goldenrod;
            border: 30px dashed red; /*div的边框形状及颜色*/
            margin: 40px;  /*外边距*/
            padding: 20px; /*内边距*/
        }
    </style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>
</html>

元素的大小是border加上padding加上content，不包括margin。

元素位置调整的参照点：

参照的是border或content：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background-color: rosybrown;
            height: 300px;
            width: 300px;

        }
        .div2{
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>
</html>

将绿色的div调整到大的淡粉色div中间：

结果：

因为div1是一个空文本的元素，并且，没有设置边框，所以div2就找不到这个div1作为参照，直接以body作为参考进行margin设置，对div1设置一个边框，或者div1中增加一个文本内容：

或者：

大盒子没有动，小盒子动了，移到大盒子中间。

上面是通过margin进行调整的，下面使用padding进行调整：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background-color: rosybrown;
            height: 300px;
            width: 300px;
            padding: 100px;
        }
        .div2{
            background-color: green;
            height: 100px;
            width: 100px;
            /*margin: 100px;  !*通过margin外边距进行调整，设想是div2上下左右margin都是100则居中*!*/
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>
</html>

结果：

padding的调整是大盒子进行了扩展：

可以调整大盒子的大小：

display属性：

有none、block、inline，inline-block， none是隐藏标签，block是转换为块级标签，inline是转换为内联标签，inline-block可做列表布局，即可以一行放多个标签，又可对标签进行宽高设置，其中的类似图片间的间隙小bug可以通过如下设置解决：

#outer{
border:3px dashed;
word-spacing: -5px;
}

kaoa000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端技术——2——CSS

CSS是Cascading Style Sheets的简称，即层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。一、CSS的四种引入方式1、在标签中使用style属性<h1 style="color: green;background-color: rosybrown;">hello girl</h1>2、嵌入式，通过style标签<!DOCTYPE html><html lang="en"><head&gt
复制链接

扫一扫