前端技术——2——CSS

Posted kaoa000

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端技术——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>
    <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,则页面上所有字体的颜色都变为红色。
标签选择器:对具体的标签渲染,如pcolor:red,则页面上所有的p标签的内容的颜色都变为红色,其他不变。
ID选择器(#ID):按照标签的ID属性值选择,一般是唯一的,如<h1 id="id12">hhh</h1>,则#id12color:red;只作用属性id=“id12”的标签
类选择器(.class):按照标签的class属性值选择,多个标签的class可以相同,使用最频繁的一种选择器。如<div class="divclass">div1</div>  <div class="divclass">div2</div>,则.divclasscolor:red会作用于div1和div2上。

组合选择器

后代选择器(使用空格):使用空格分隔,如div pcolor: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;

以上是关于前端技术——2——CSS的主要内容,如果未能解决你的问题,请参考以下文章

web前端学习-CSS

web前端学习-CSS

小白入门之前端网页技术CSS

后代选择器(CSS选择器)

web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)

web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)