前端基础之CSS的引入+HTML标签选择器+CSS操作属性

2022-10-21 22:39:31

clear：left/ringt属性

CSS：语法形式上由选择器+以及一条或多条声明组成；选择器查找到指定的html标签后，使用css属性设置html标签的样式；

一、css 语法形式：

二、使用步骤

1、引入css规则

2、使用css选择器查找html标签；

3、利用css属性设置html标签的样式；

三、css的4种引入方式

1、行内引入：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用

只能对单一标签进行CSS渲染，无法批量渲染，无法将html代码和css代码做解耦

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

</head>

<body>

<p style="color:red;background:greenyellow "> 张根 </p>

</body>

</html>

2、嵌入式引入：在html的<head> <style> 选择器{ 操作1;操作2; } </style> </head>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

    <style>

        p{

            color:green;

            background-color: red;

        }

    </style>

</head>

<body>

<h1> 标题  </h1>

<p>  张根 </p>

</body>

</html>

3、链接式：创建一个单独的 .css文件，里面专门定义css代码，那个html文件需要被渲染<link rel="stylesheet" href="css代码文件名">（推荐）

x.CSS文件代码

p{

    color: aqua;

    background-color: black;

}

div {

    font-size: 40px;

    color: aqua;

}

需要被css渲染的html文件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>张根</title>

     <link rel="stylesheet" href="css链接式.css">

 </head>

 <body>

 <h1> 标题  </h1>

 <p>  张根 </p>

 <div> 你好</div>

 </body>

 </html>

4、导入式：使用@import"mystyle.css";导入css文件。

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

四、css的选择器：

1、基本选择器：（直接通过html标签名字/id/类名查找。）

1、标签选择器：通过标签的名字来查找标签 p{ 操作1;操作2}

2、id选择器：给标签定义ID，通过查找ID操作标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

    <style>

        #p3{  color: red  }

    </style>

</head>

<body>

<p id="p3"> p1 </p>

<p> p2</p>

<p> p3</p>

</body>

</html>

3、class选择器：可以批量选择HTML标签，进行css渲染。.c{}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>张根</title>

     <style>

         /*#p3{  color: red  }*/

         .c{

             color: red;

         }

     </style>

 </head>

 <body>

 <!--<p id="p3"> p1 </p>-->

 <p class="c"  >p1</p>

 <p class="c"> p2</p>

 <p> p3</p>

 </body>

 </html>

4、统配选择器：对所有的html标签进行，css渲染 *{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

    <style>

        /*#p3{  color: red  }*/

        *{

            color: red;

        }

    </style>

</head>

<body>

<!--<p id="p3"> p1 </p>-->

<p class="c"  >p1</p>

<p class="c"> p2</p>

<p> p3</p>

</body>

</html>

块级元素可以包含内联元素或某些块级元素，

内联元素不能包含块级元素，它只能包含其它内联元素。

需要注意的是，p标签不能包含块级标签。

2、组合选择器（通过描述HTML标签的嵌套关系，间接查找html标签方式）：

由于标签之间经常层级嵌套，使用基本选择器只能查找单个标签，无法精确查找到，所以出现了组合选择器间接查找到标签；

通过特殊符号（空格，“，”，+，‘>’）组合起来，选择html标签。

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }

E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝

E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }

E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 

E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

#后代是和孙子辈（隔代）

#子代是儿子被

后代选择器：.out p{color: red;} .out空格p

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style >

    .out p{

        color: red;

    }

    </style>

</head>

<body>

<div class="out">

    <div class="div1"   >

        div1

        <p>p</p>

    </div>

    <p>pp</p>

</div>

<p>ppp</p>

</body>

</html>

子代选择器：.out>p{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style >

    .out> p{

        color: red;

    }

    </style>

</head>

<body>

<div class="out">

    <div class="div1"   >

        div1

        <p>p</p>

    </div>

    <p>pp</p>

</div>

<p>ppp</p>

</body>

</html>

毗邻选择器：.out+p{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style >

    .out+p{

        color: red;

    }

    </style>

</head>

<body>

<div class="out">

    <div class="div1"   >

        div1

        <p>p</p>

    </div>

    <p>pp</p>

</div>

<p>ppp</p>

</body>

</html>

查找相互之间没有关系的html标签

多元素选择器：out,p{}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style >

    .out,p{

        color: red;

    }

    </style>

</head>

<body>

<div class="out">

    <div class="div1"   >

        div1

        <p>p</p>

    </div>

    <p>pp</p>

</div>

<p>ppp</p>

</body>

</html>

3、属性选择器（通过在html标签中设置属名，来查找html标签的方式。）：

通过在html标签里添加属性，再通过属性标签，查找html标签。

1、[属性名字] （在所有标签里查找）

2、 [属性名=值]（在所有标签里查找值为?的属性）

3、div[属性]（限制在div标签里查找属性）

html中的每一个标签，就是 Element(元素)。

E[att]          匹配所以E元素中，带有att属性的元素（按属性名匹配方式）

E[att=val]      匹配所有E元素中，属性值为val的元素（按属性的值匹配方式）

E[att~=val]     按正则表达式搜索到的属性，匹配元素；

E[attr^=val]                   

E[attr$=val]    

E[attr*=val]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        P[DD]{

            color:red;

            /*color: rgb(0,0,255);*/

            /*color: #1234;*/

        }

    </style>

</head>

<body>

<p DD>  我是根，你是谁？？</p>

<div DD class="p1">

    <div> 我是DIV

    <p id="p2"> 我是div里的p哦！！！</p>

    </div>

    pppppp

</div>

</body>

选择器的优先级　

css继承：

继承是CSS的一个主要特征，例如一个BODY标签定义了的颜色值，也会应用到段落的文本中。

但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

同一种选择器的优先级按顺序

不同选择器按优先级！importment优先级最高

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高               style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。       #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

------------------------------------------------------------------------------------------------------------------------------------

css属性：对查找器查找到的html标签，进行css格式渲染。

通过选择器查找到html标签后，就可以使用CSS的属性，设置html标签的样式了；

1、CSS的文本属性：

文本颜色CSS：

color属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [class="regal"]{

            color:red;

            /*color: rgb(0,0,255);*/

            /*color: #1234;*/

        }

    </style>

</head>

<body>

<p DD="dd">  我是根，你是谁？？</p>

<div DD="cc" class="p1">

    <div> 我是DIV

    <p class="regal" DD="w" id="p2"> 我是div里的p哦！！！</p>

    </div>

    pppppp

</div>

</body>

</html>

设置文本水平对齐方式：

text-align 属性规定元素中的文本的水平对齐方式。

left 左对齐
right 右对齐。
center 把文本排列到中间。
justify 两端对齐。

<html>

<head>

<meta charset="utf-8">

<title>css</title>

<style>

        h2 {text-align:center;}

        .publish_time {text-align:left;}

        .content {text-align:justify;}

</style>

</head>

<body>

<h2>CSS text-align 水平居中</h2>

<p class="publish_time">2017 年 5 月 17 号</p>

<p class="content">

    有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，

    跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”

    几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来

    服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而

    复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！

    只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声

    音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>

<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>

</body>

</html>

文本其他属性

/*

font-size: 10px;

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

*/

2、CSS的背景属性

background-color #设置背景颜色
background-image #设置背景图片
background-repeat #设置图片不平铺
background-position #设置位置

简写方式：background: no-repeat  center 100px  url("23.jpg");

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

    <style>

        div {

            width: 800px;

            height: 800px;

            background: no-repeat  center 100px  url("23.jpg");

            /*background-color: red;*/

            /*!*background-repeat: repeat-x;*!*/

            /*background-repeat: no-repeat;*/

            /*background-position: center;;*/

        }

    </style>

</head>

<body>

<div>  </div>

</body>

</html>

3、CSS的列表属性

设置列表标签的格式

list-style: circle;把无序列表的开头变成圆圈

list-style: square;把无序列表的开头变成方块

list-style: no;重要 去除无序列表的开头，上下排列列表元素。

border-radius: 100%;设置标签的圆弧度（把标签变成圆形）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

    <style>

        ul{

            /*list-style: circle;*/

            /*list-style: square;*/

            list-style: none;

        }

    </style>

执行结果：

CSS的和布局相关的属性：display、magin、padding、float、postion

4、CSS的display属性：

html块级标签特性：可以设置宽度和高度，但无论如何设置都有独占一行的特性；

html内联标签的特性：无法设置宽度、高度，但是两个内联标签可以同在一行显示；

display: none;不显示该html标签；

`block(内联标签设置为块级标签)：`span {display:block;}

`inline(块级标签设置为内联标签)：div{`play:block;`}`

inline-block（综合了块级和内联标签的特性，既可以设置宽度、高度，两个标签也可以在同一行显示。）

如果需要两个 inline-block在同一行显示；加上该参数：word-spacing: -10px;

<div style="width: 100px;height:20px;display: inline-block; word-spacing: -10px;">

    <div style="width: 50px;height: 20px;display: inline-block;background-color: royalblue " ></div>

    <div style="width: 50px;height: 20px;display: inline-block;background-color: red " ></div>

</div>

5、CSS的float属性：

由于inline-bock标签设置宽度和高度之后是固定的，无法根据屏幕的大小自适应（比如屏幕再缩小或者放大有些内容一直在最左侧或右侧显示）；

float属性: 1、布局时使用让标签靠左边/右边飘起来，可以让内联标签设置长宽（有inline-block的特性）；

1、float：right: 脱离标签引力，靠右飘；

2、float：left:脱离标签引力，靠左飘；

3、clear:both;标签设置folat属性之后，会脱离父类标签的属性，clear:both属性会再次绑定父类的CSS属性；

设置浮动属性后，元素的加载规则：

1、浮动元素首先判断上一个元素是否浮动？

若是浮动元素会：紧挨着上一个元素，漂浮起来；

若是块级元素会：保持垂直距离；

若是内联元素会：浮动上去和内联标签并排显示；

2、正常元素首先也会判断上一个元素是否浮动？

若是浮动元素顶上去占据已经浮动元素的空间位置

若不是浮动元素正常文件流排版；

clear：left/ringt属性：声明自己的左侧和右侧不能有浮动元素

none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

如果那个元素设置了clear：left/right就意味着，加载该元素时会判断上一个元素是否是浮动元素？

如果是浮动元素，也在该元素设置的clear：左边/右边，该元素自己退到下一行；不影响其他元素；否则正常加载；

注意加载顺序：只能判断上面的浮动元素，不能判断后来的浮动元素；

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        *{margin: 0 }

    </style>

    <meta charset="UTF-8">

    <title>张根</title>

</head>

<body>

<div style="width: 30px; height:40px;background-color: #2459a2;float: left " >1</div>

<div style="width: 40px;height:40px;background-color: red;float: left">2</div>

<div style="width: 150px;height:40px;background-color:black; clear: left ">3</div>

</body>

</html>

clear：left/ringt属性应用场景：

父级标签里的子元素都设置了float浮动起来，导致父级标签的空间塌陷，被后面的元素顶上来占位；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>张根</title>

    <style>

        .son1{width: 200px;height: 200px;background-color: #2459a2;float: left}

        .son2{width: 200px;height: 200px;background-color: rebeccapurple;float: left}

        .footer{width: 100%;height: 200px;background-color: black}

    </style>

</head>

<body>

<div class="outer">

    <div class="son1"></div>

    <div class="son2"></div>

    <!--由于outer的内的2个子标签都，浮动起来了，自己也没有宽度和高度，所以导致塌陷，进而footer顶上来-->

    <!--解决之道：在添加一个空div占位，并且设置清除浮动，自动独占一行，footer就不会再顶上来了-->

    <div style="clear: left" class="son3"></div>

</div>

<div class="footer"></div>

</body>

</html>

边距：元素与边框的距离

6、CSS的margin属性（外边距：调整元素，与其他元素的边框之间的距离）

margin: 调整外边距大小；

1、margin:10px 10px 10px 10px; （margin设置4个属性10px，右20px，下30px，左40px4个方向）

2、margin: 0px;（margin设置一个属性，代表上，右，下，左4个方向都为同一个属性）

3、margin: 0px 5px;（margin设置两个属性，代表上下为0px ，左右为5px ）

4、margin: 0px auto;（margin设置两个属性，上下为0px ，左右为auto 代表左右两侧位置自适应居中，

使用margin3项注意：

1、margin: 0px auto; 设置居中效果，必须指定固定的宽度；）

2、兄弟div标签之间调整边距：

margin调整边距时，如果两个兄弟标签同时设置的边距大小发生冲突取最大的值；

   <style>

         .outer{

             width: 200px;

             height: 200px;

             background-color: #2459a2;

             margin-bottom: 100px;        /*两个兄弟标签，设置边距大小相冲突时，取最大值  */

         }

         .inner{width:200px;height:200px;background-color: red; margin-top: 10px}

     </style>

3、父子div调整边距：

margin:调整边距时参照位置是父级标签的 border，padding，inlinecontent,若父级没有的这些设置，以boby标签为基准调整边框距离；

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>张根</title>

     <style>

      *{margin: 0}

     .outer{

         width: 300px;

         height: 300px;

         background-color: #2459a2;

         border:solid 1px red ;/*给父标签设置了border，padding，inlinecontent属性，子标签调整边距时以这些为参照位置 */

         margin-bottom: 10px;

         overflow: hidden;/*由于设置父标签的border，padding，inlinecontent属性，会影响整体布局，所以可以overflow: hidden; */

     }

     .inner{

         width: 100px;

         height: 100px;

         background-color: black;

         margin-top: 100px;

         margin-left: 100px;  }

     </style>

 </head>

 <body>

 <div class="outer">

     <div class="inner">

     </div>

 </div>

 </body>

7、CSS的padding属性: 内边距（通过填充大小，调整元素本身的控制内容与自己边框之间的距离，pading影响盒子（元素）大小）

padding(内边距)：通过填充自己调整元素内部内容和边框的调整，注意 pading影响盒子（元素）大小；

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        *{margin: 0}

        .item1{width: 120px;height: 120px;background-color: #2459a2 }

        .item2{width: 120px;height: 120px;background-color: cornsilk;padding-top:100px}

    </style>

    <meta charset="UTF-8">

    <title>张根</title>

</head>

<body>

<div class="item1">item1</div>

<div class="item2">item2</div>

</body>

</html>

magin、pading 和float postion得区别：

1、magin、pading 是调整元素和边距的距离的，不能脱离文档流（设置magin属性之后，之前的位置空间依然存在）在局部使用；

2、float postion：布局定位使用，脱离正常文档流：之前所在的空间消失，由元素顶上去；

脱离正常文档流的CSS属性：float有完全脱离 , position：absolute,postion：fixed

8、CSS的position(定位)属性

postion：relative 相对定位

1、移动时参照的位置是原来在正常文件流中的位置

2、元素不脱离正常文档流（之前的空间位置依然存在）

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        *{margin: 0 }

    </style>

    <meta charset="UTF-8">

    <title>张根</title>

</head>

<body>

<div style="width: 30px; height:40px;background-color: #2459a2;position: relative;top: 100px;left: 100px  " >1</div>

<div style="width: 40px;height:40px;background-color: red;">2</div>

<div style="width: 150px;height:40px;background-color:black; ">3</div>

</body>

</html>

postion：absolute 绝对定位

1、移动时参照的位置是父级标签中已经设置的position属性，如果没有就以body标签
为基准；

2、元素脱离正常文档流（之前的位置空间不存在了，被下面的元素顶上去了）

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        *{margin: 0 }

    </style>

    <meta charset="UTF-8">

    <title>张根</title>

</head>

<body>

<div style="width: 30px; height:40px;background-color: #2459a2;position: absolute;top: 100px;left: 100px  " >1</div>

<div style="width: 40px;height:40px;background-color: red;">2</div>

<div style="width: 150px;height:40px;background-color:black; ">3</div>

</body>

</html>

postion属性常见的使用方法：

父标签：postion：relative （不脱离文档流）

需要定位的子标签：postion:absolute （以父标签为基准，移动定位）

position：fixed（相对于屏幕做绝对定位）

1、移动时参照的位置是浏览器窗口

2、元素脱离正常文档流（之前的位置空间不存在了，被下面的元素顶上去了）

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        *{margin: 0 }

    </style>

    <meta charset="UTF-8">

    <title>张根</title>

</head>

<body>

<div style="width: 30px; height:40px;background-color: #2459a2;position:fixed;bottom: 10px;left:10px  " >1</div>

<div style="width: 40px;height:40px;background-color: red;">2</div>

<div style="width: 150px;height:40px;background-color:black; ">3</div>

</body>

</html>

CSS定位相关属性总结：

脱离正常文档流的：float（不完全脱离） , position：absolute,postion：fixed

苑浩博客链接：http://www.cnblogs.com/yuanchenqi/articles/6856399.html

码农公寓

选择器的优先级

3、CSS的列表属性

4、CSS的display属性：

block(内联标签设置为块级标签)：span {display:block;}

inline(块级标签设置为内联标签)：div{play:block;}

inline-block（综合了块级和内联标签的特性，既可以设置宽度、高度，两个标签也可以在同一行显示。）

相关文章

选择器的优先级　

`block(内联标签设置为块级标签)：`span {display:block;}

`inline(块级标签设置为内联标签)：div{`play:block;`}`