前端之CSS续集

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>bing</title>
</head>
<body>



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

</body>
</html>

导入式

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bing</title>

    <style>
        p{
            color:green;
            background-color: red;

        }



    </style>

</head>
<body>

<h1> 标题  </h1>

<p>  bing </p>

</body>
</html>

嵌入式

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

被css渲染的html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bing</title>
    <link rel="stylesheet" href="css链接式.css">



</head>
<body>

<h1> 标题  </h1>

<p>  bing </p>
<div> 你好</div>
</body>
</html>

HTML代码嵌入css

x.CSS文件代码

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

}

div {

    font-size: 40px;
    color: aqua;


}

css代码

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

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

注意：

　　导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

四、css的选择器：

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bing</title>
    <style>

        #p3{  color: red  }

    </style>



</head>
<body>

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

</body>
</html>

id选择器

3、class选择器：可以批量选择HTML标签，进行css渲染。这里的例子是.c{} 格式就是 .class{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bing</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>

class选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bing</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>

后代选择器空格(格式: .class p{})

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

子代选择器> (.class>p{})

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

毗邻选择器+ (.class+p{})

多元素选择器：out,p{} 查找相互之间没有关系的html标签

<!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>

多元素选择器 , (.class,p{})

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

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

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

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

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

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

[att]          匹配所有具有att属性的标签，不考虑它的值只要有这个属性就能匹配。
                比如：[class] { color:#f00; }
  
E[att=val]      匹配所有E标签里有att属性等于“val”的标签，完整匹配  
                 比如：div[class=”error”] { color:#f00; }
  
E[att~=val]     匹配所有E标签里有att属性具有多个空格分隔的值、
                         其中一个值等于“val”的标签
                  比如：div[class~=”name”] { color:#f00; }
  
E[attr^=val]    匹配所有E标签里有属性值以指定值开头的标签                   
                  比如：div[class^="test"]{background:#ffff00;}
  
E[attr$=val]    匹配所有E标签里有属性值以指定值末尾的标签   
                 比如：div[class$="test"]{background:#ffff00;}
  
E[attr*=val]    匹配所有E标签里有属性值中包含指定值的标签   
                 比如：div[class*="te"]{background:#ffff00;}

属性选择器常用方式1

 E[att]         匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 
 E[att=val]     匹配所有att属性等于“val”的E元素                                 div[class=”error”] { color:#f00; }

 
 E[att~=val]    匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素      td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素                     div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素                     div[class*="test"]{background:#ffff00;}

属性选择器常用方式2

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>
        <style>
        div[po="p2"]{                  div[属性]（限制在div标签里查找属性）
            color: red;
        }

        .c1[po*="p"]{                  [属性名=值]（在所有标签里查找值为?的属性）
            color: red;
        }
        [po="p1 p"]{
            color: green;
        }
        .c1{
            color: red;
        }
        .btn{
            font-size: 60px;
        }
        </style>
</head>


<body>
    <div po="p1 p" class="c1 btn">p1</div>
    <div po="abcdp2bing p" class="c1">p2</div>
    <div class="c1">p3</div>
</body>
</html>

属性选择器示例1

<!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>

属性选择器示例2

选择器的优先级　

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>
    <style>
        p{
            http://www.114la.com/other/rgb.htm      RGB颜色查询对照表
            color: blue;
            /*color: RGB(0,255,255);*/       R:red G:green B:blue
            /*color: #FF0000;*/
            /*color: RGBA(255,0,0,1);*/
            opacity: 0.3;        opacity透明度
        }
        div{
            width: 200px;
            height: 200px;
            background-color: gray;
            text-align:right;
        }
    </style>
</head>
<body>

    <p>hello</p>
    <div>DIV</div>

</body>
</html>

CSS文本属性示例1

<!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">  我是bing，你是谁？？</p>
<div DD="cc" class="p1">
    <div> 我是DIV
    <p class="regal" DD="w" id="p2"> 我是div里的p哦！！！</p>
    </div>
    pppppp
</div>
</body>
</html>

CSS文本属性示例2

设置文本水平对齐方式：

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


*/

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>bing</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: square;重要 去除无序列表的开头，上下排列列表元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bing</title>

    <style>

        ul{
            /*list-style: circle;*/
            /*list-style: square;*/
            list-style: none;

        }


    </style>

列表属性示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*ul{*/
            /*!*list-style: circle;*!*/
            /*!*list-style: square;*!*/
            /*list-style: none;*/
        /*}*/
        ol,ul{
            list-style: none;
        }
    </style>
</head>
<body>

<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
<ul>
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
</ul>

<dl>
    <dt>河北省</dt>
    <dd>廊坊</dd>
    <dd>石家庄</dd>
    <dd>邯郸</dd>
    <dd>保定</dd>
    <dt>湖南省</dt>
    <dt>广东省</dt>
    <dt>河南省</dt>

</dl>

</body>
</html>

列表属性示例2

执行结果

4、CSS的dispal属性：

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、float：right: 脱离标签引力，靠右飘；

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

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

浮动规则：

1、浮动元素会判断上一个元素是否浮动，如果是浮动元素紧贴上一个元素；否则和上一个元素保持垂直距变离不；

2、如果是普通元素会判断上一个元素是否浮动，若上一个元素是浮动元素，会顶上去；

浮动标签造成塌陷:

由于标签浮动之后，正常文件流会顶上去，导致浮动标签和正常文件流标签重叠造成塌陷现象；

所以需要clear属性，阻止正常流文件顶上去和浮动标签重叠，而是让它自动退出到下一行；

clear属性：设置clear: left后相当于该标签左侧不允许出现浮动标签，也就是自己退到下一行；

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

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元
素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，
则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{margin: 0 }
    </style>
    <meta charset="UTF-8">
    <title>bing</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

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 代表左右两侧位置自适应居中，

(注意使用 margin: 0px auto;必须指定固定的宽度；)

7、padding: 内边距（用于控制内容与边框之间的距离）；

8、CSS的position(定位)属性

postion：relative

1.移动时的参照物是元素之前的的位置

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

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{margin: 0 }
    </style>
    <meta charset="UTF-8">
    <title>bing</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.移动时的参照物是已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块即body元素。

既父元素：设置postion：relative(相对的，参照原来的位置)

定位的子元素：设置postion：absolute(绝对的,参照父级的)

2.postion:absolute 的元素脱离正常文档流（之前的空间位置不存在）

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{margin: 0 }
    </style>
    <meta charset="UTF-8">
    <title>bing</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

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

1、移动时参照物是显示屏幕

2、position：fixed，脱离文件流

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{margin: 0 }
    </style>
    <meta charset="UTF-8">
    <title>bing/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 , postion/absolute,postion：fixed

参考链接：http://www.cnblogs.com/yuanchenqi/articles/6856399.html

posted on 2017-05-22 00:55 bigdata_devops 阅读(245) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

bigdata_devops