随笔 - 241 文章 - 1 评论 - 58 阅读 - 85万

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

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>

View Code

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>

View Code

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

x.CSS文件代码

p{
    color: aqua;
    background-color: black;

}

div {

    font-size: 40px;
    color: aqua;


}

View Code

需要被css渲染的html文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>张根</title>
 6     <link rel="stylesheet" href="css链接式.css">
 7 
 8 
 9 
10 </head>
11 <body>
12 
13 <h1> 标题  </h1>
14 
15 <p>  张根 </p>
16 <div> 你好</div>
17 </body>
18 </html>

View Code

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>

View Code

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>张根</title>
 6     <style>
 7 
 8         /*#p3{  color: red  }*/
 9         .c{
10             color: red;
11         }
12 
13     </style>
14 
15 
16 
17 </head>
18 <body>
19 
20 <!--<p id="p3"> p1 </p>-->
21 <p class="c"  >p1</p>
22 <p class="c"> p2</p>
23 <p> p3</p>
24 
25 </body>
26 </html>

View Code

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>

View Code

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

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

需要注意的是，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>

View Code

子代选择器：.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>

View Code

毗邻选择器：.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>

View Code

查找相互之间没有关系的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>

View Code

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>

View Code

选择器的优先级　

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>

View Code

设置文本水平对齐方式：

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>

View Code

文本其他属性

/*


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 ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写


*/

View Code

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>

View Code

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>

View Code

执行结果：

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>

View Code

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>

View Code

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>

View Code

边距：元素与边框的距离

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调整边距时，如果两个兄弟标签同时设置的边距大小发生冲突取最大的值；

 1   <style>
 2         .outer{
 3             width: 200px;
 4             height: 200px;
 5             background-color: #2459a2;
 6             margin-bottom: 100px;        /*两个兄弟标签，设置边距大小相冲突时，取最大值  */
 7         }
 8 
 9         .inner{width:200px;height:200px;background-color: red; margin-top: 10px}
10     </style>

View Code

3、父子div调整边距：

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

 1 <html lang="en">
 2 <head>
 3 
 4     <meta charset="UTF-8">
 5     <title>张根</title>
 6     <style>
 7      *{margin: 0}
 8     .outer{
 9         width: 300px;
10         height: 300px;
11         background-color: #2459a2;
12         border:solid 1px red ;/*给父标签设置了border，padding，inlinecontent属性，子标签调整边距时以这些为参照位置 */
13         margin-bottom: 10px;
14         overflow: hidden;/*由于设置父标签的border，padding，inlinecontent属性，会影响整体布局，所以可以overflow: hidden; */
15 
16     }
17     .inner{
18         width: 100px;
19         height: 100px;
20         background-color: black;
21         margin-top: 100px;
22         margin-left: 100px;  }
23     </style>
24 </head>
25 <body>
26 <div class="outer">
27     <div class="inner">
28     </div>
29 </div>
30 
31 </body>

View Code

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>

View Code

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>

View Code

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>

View Code

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>

View Code

CSS定位相关属性总结：

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

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

posted on 2017-05-17 15:26 Martin8866 阅读(694) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称： Martin8866
园龄： 7年11个月
粉丝： 350
关注： 44

+加关注

2025年3月

日

一

二

三

四

五

六

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

选择器的优先级

3、CSS的列表属性

4、CSS的display属性：

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

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

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

公告

搜索

常用链接

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

选择器的优先级

3、CSS的列表属性

4、CSS的display属性：

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

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

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

公告

搜索

常用链接

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

选择器的优先级　

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

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