CSS

2018/05/04 12:27
阅读数 7

CSS

html补充:

有两个在css中常操作的标签,<div>和<span>标签。

相对于前面html中介绍的标签,他们是最没用的,因为他们最大的特点就是没有特点。而这个也造就它们的使用场景更加的广泛。如果用其他标签来包裹一个标签,往往会带有外层标签的某个特征,如<b>标签会加粗文字,而这些我们特征我们往往不需要,但是我们确实需要一个容器来装其他的标签,这时候div和span就会特别适合。好了,补充完了,接下来开始进入css的学习。

css概述

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

css的四种引入方式

1、行内式:

  在html的标签属性中用style属性,属性用引号包住,然后里面通过“键:值;键:值,.....”这样的方式来设置 

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

 

2、嵌入式

  <head>标签里面加入<style>标签,在其中写入“标签名{键值对设置}”进行设置

<style>
    div{
        width:20px;
        height:20px;
        background-color: red;
    }
</style>

 

3、链接式

  建立一个css文件,在<head>标签中,写入<link href="test1.css" rel="stylesheet">,这个是先加载css的,推荐使用,这个没有限制次数

4、导入式

  导入式:建立一个css文件,在<head>标签中,写入<style>标签,在里面写"“@import "test1.css”;"这个是先加载html的,有限制次数

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

选择器

标签选择器

*{}:所有标签都设置

标签名{}:给相应的标签进行设置

#id名{}:给id对应的标签设置,id值定义的时候相当于身份证,不可重复

.class{}:根据类名来进行标签设置,class值定义的时候,相当于人名,可以重

组合选择器

关系介绍:

  平级关系(兄弟关系),也就是上下关系

  父子关系:就是一个标签在另一个标签里面,如:<div id=div1><div id=div2></div></div>    这个id是div1的就相当于是div2的父标签。

例如:div.div1{}       中间连在一起,不能空格隔开,这个的意思是div标签中类名是div1的。如果要找id是div1的可以用“div#div1{}”

例如:div,.P{}                有时候几种东西要设置成一样的,就可以在选择器中间用逗号隔开

例如:.div1 div2{}   如果要设置一个盒子里面的标签属性,先用选择器定位到盒子,然后一个空格加要设置的标签就可以

例如:.div1>.div3{}        只在一个盒子的儿子这个一层找,用“>”,孙子层的那些都不找

例如:div + p{}                只改变紧挨着前面的选择器,而且满足后面选择器的标签

属性选择器

在标签中可以插入自己的自定义的属性,如:chenduxiu="qingzuoxia ",这个属性需要在css的样式中设置

设置的格式是:[自定义属性名]{样式设置}。如果属性名有相同的就需要把属性值也写入[]中。属性标签值前面可以加入选择器,两者之间不加分隔符号

E[att]       匹配所有具有att属性的E元素,不考虑它的值,在style中写入[alex]{样式设计}

E[att=val]        匹配所有的att属性等于“val”的E元素

E[att~=val]      匹配有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

E[att^=val]      匹配属性值以指定值开头的每个元素

E[att$=val]      匹配属性值以指定值结尾的每个元素

E[att*=val]      匹配属性值中包含指定值的每个元素

如果你表示看不懂的话,看下面我给出的例子。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         
10         span{
11             display: inline-block;  /*这个先不说,后面会介绍*/  
12             width:20px;
13             height:20px;
14             background-color: green;
15         }
16         div{
17             width:20px;
18             height:20px;
19             background-color: yellow;
20         }
21         
22         [chenduxiu]{
23             width:20px;
24             height:20px;
25             background-color: black;
26         }
27 
28         [chenduxiu='yes']{
29             width:20px;
30             height:20px;
31             background-color: red;
32         }
33     </style>
34 </head>
35 <body>
36     <span chenduxiu></span>
37     <div></div>
38     <div chenduxiu></div>
39     <div chenduxiu='yes'></div>
40 
41 </body>
42 </html>

 

生成效果是:

上面的看懂的话,你尝试在在第22行的”[chenduxiu]”改成div[chenduxiu]运行后会发现结果是这样的:

 

为什么会产生这种现象呢,这就要看后面说到选择器优先级了

选择器优先级

样式                                                                      权重

内联样式表(标签中的style属性)                1000

统计选择符中属性个数(#id)                      100

统计选择符中class属性的个数(.class)          10

统计选择符中html标签名个数(p)                   1

比如

样式                          权重

div                              10

.div1 .div2                 20

#div1 .div3                110

如果多个选择器要给一个标签设置不同的值,浏览器会先计算选择器的权重,取舍按照从左到右顺序进行比较。设置最大权重的。权重一样的,后来居上。如果不想要按照权重比,可以在设置的值后面加上!important ,如果两个都有!important的话,继续比较权重。  

上面遗留问题解答:

div[chenduxiu]是一个是一个标签选择器(div)和一个属性选择器([class),所以权重是10 + 1;

而[chenduxiu]是一个属选择器(class)所以权重是10

css的继承性

继承是css的一个主要特征。只是css继承性的权重是非常低的,是比普通元素的权重还要低的0。css的继承也是有限制的,有一些属性不能被继承,如border,margin,padding,background等

伪类

a:link {color: #FF0000}            /* 未访问的链接 */

a:visited {color: #00FF00}      /* 已访问的链接 */

a:hover {color: #FF00FF}        /* 鼠标移动到链接上 */

a:active {color: #0000FF}       /* 选定的链接 */

a:after{content:"Hello World"}     #表示在该标签后面加入后面字符串这个并不是改变文本,而是通过css的方式加入进来的,可以通过检查元素查看,可以在这个框中对这个加入的进行css设置

 

提示:

1、在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

2、在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

3、伪类名称对大小写不敏感。

4、实际使用中,hover,after等不局限于在a标签中使用他们在后面会有更有用的使用场景

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {        /*这个是鼠标左键按住不动时显示*/
        color: yellow;
    }
    a::after{content: ",你好"}
    </style>
</head>
<body>
    <a href="#">我是一个链接</a>
</body>
</html>

 

这个是做好的例子,有兴趣的试验一下

css常用属性

颜色属性

color:red

color:#ffee33                            #可以上网找到颜色代码表来查看 +

color:rgb(255,0,2)                    #RGB颜色

color:rgba(255,3,2,0.1)            #第四个图片是设置透明度的,范围是1到0,越小越透明

字体属性

font-size:20px                   #设置字号

font-family:"宋体"     #设置字体,有的浏览器不支持中文的,有需要的网上找到对应的英文表示

font-weight:lighter/bold/border/     #设置字体粗细,这个很模糊,也可以写用像素来设置

font-style:italic/oblique          #斜体,这两个都可以设置斜体。

背景属性

background-color                                      #背景颜色

background-image:url("图片路径")      #如果背景图片的小,盒子大,会不断复制图片,从左到右,从上到下平铺到盒子上

background-repeat:no-repeat              #不让图片平铺,设置为repeat-x,则是横向平铺,纵向平铺同理

background-position:center                  #图片放到网页的中心,前面参数控制横向的,后面的控制列的,center也可以用数字加px代替,进行图片位置设置,这个其实是一个缩写,控制在中间的应该是两个center center参数,这里省略了一个,可以设置为0 center表示只是y轴的居中,还有一个使用方法就是将一些背景放到一个整体的图片中,然后在页面中设置一个空间,通过不断的变换他的位置实现背景的替换。这个背景有个名字叫做雪碧图。后面的代码中会有相关的使用。

 

这些参数都可以放到background:后面一起设置

比如:background:no-repeat 0 -100px url(“图片路径”);

文本属性

text-align:center;   #可以将这个文字在容器中横向居中

line-height:20px;      #这个数字大小设置为盒子的大小。从效果上来看可以实现文字的纵向居中,这个命令本身的意思是设置文本行高。

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

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

letter-spacing:10px;       #字符间距

word-spaceing:20px;      #单词和单词之间的距离

text-transform:capitalize;      #所有单词首字母大写

将文字放到盒子中间的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height: 50px;
            background-color: red;
            line-height: 50px;      /*设置成盒子一样的高度*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div>我是一个字符串</div>
</body>
</html>

 

边框属性

border-color: blueviolet;   #设置颜色

border-style: solid;     #设置样式

border-width: 5px;     #设置宽度

 

border 5px solid blue               #合起来写

如果要对特定的边进行设置的话可以用border-top,border-bottom,border-left,border-right来进行设置

列表属性

<ol><ul>这些可以通过list-style属性来进行设置。

最常用的是:list-style: none;      #用来将它的样式去掉,后期用css进行设计

display属性

display:block;          #内联标签不可以设置宽高一些属性,可以用这个属性值将其设置成为一个块级标签

display:inline;          #块级变成内联

display:inline-block;       #内联和块级标签的东西都可以用,这样设置的标签可以按块级标签一样设置宽高,也可以像内联标签一样同行显示

display:none;                  #设置的标签位置丢失,会隐藏起来

 

将内联设置成为块级元素的时候,会在块的周围产生间隙,去除间隙的方法是

设置margin:-3px                 #数字根据实际情况调整,而margin是什么,后面的盒子概念会给出答案。

盒子概念

在盒子标签中设置宽和高是设置的盒子里面内容的大小,整个盒子从里到外依次是:内容(自己设置的宽和高)》 padding(内容到外边框的距离)》 border(边框的宽度)》 margin(盒子和其他的内容之间的距离)

找外边距的时候,找附近的的元素进行排列

margin属性:

margin:10px 5px 15px 20px;    #上,右,下,左 (顺时针顺序)其他的padding这些也是这样的

margin:10px 15px 20px;        #上,左右,下

margin:10px 5px;                          #上下,左右

margin:10px;                                 #上,右,下,左

margin:0 auto;                    #设置该标签到父类标签的横向的中        

关于margin的塌陷问题

兄弟级的边界塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            width:100px;
            height: 100px;
            background-color: red;
            margin-bottom: 50px;
        }
        .div2{
            width:100px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }

    </style>
</head>
<body>
        <div class="div1"></div>
        <div class="div2"></div>
</body>
</html>

 

结果是:

很明显,两个之间的间隔取的是较大的那个

父级的边界塌陷

在说这个之前,你们先自己做一个例子:

如果没有出现问题请跳过这部分,如果出现可以看一下下面的解释。

如果父级的div中没有border(不能为0),padding,文本内容,子级的div的margin会一直向上找,直到找到某个标签包括border,padding,内容中的其中一个,然后按此div进行margin。如果这个盒子在包括它的最外层盒子中没有找到,就找最外层盒子外面的最近的盒子(可以没有那三个属性)进行margin距离排列。注意:这个不影响兄弟盒子间的margin设置

      关于盒子塌陷的几种解决方法

    1. 最简单,直接,粗暴的方法就是盒子大小写死,给每个盒子设定固定的width和height,直到合适为止,这样的好处是简单方便,兼容性好,适合只改动少量内容不涉及盒子排布的版面,缺点是非自适应,浏览器的窗口大小直接影响用户体验。
    2. 往父盒子里添加文本内容也就是标签体
    3. 给父盒子加border边框,边框不能为0px
    4. 给父盒子添加padding属性
    5. 给父盒子添加overflow属性。
      overflow:auto; 或者overflow:hidden;

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
        *{
           margin: 0px;
            padding: 0px;
        }
        .div1{
           width:200px;
           height:200px;
          background-color: red;
           /* border: 1px solid black;   */
          /* padding: 1px; */
          overflow: auto; 
         }
      .div2{
           width:100px;
          height: 100px;
           background-color: blue;
           margin-top: 20px;
        }
</style>
</head>
<body>
      <div class="div1">
      <div class="div2"></div>
</div>
</body>
</html>

 

文档流

所谓文档流就是元素布局排版布局的时候,元素会自动从左到右,从上到下的流式排列

脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位

只有绝对定位absolute和浮动float才会脱离文档流

float浮动

float:left;         #浮动到父盒子的左边

float:right;  #浮动到父盒子的右边

浮动设置的时候看的是这个标签上面的兄弟标签,如果是漂浮的,它也按顺序漂浮,如果它的上面的兄弟标签不是浮动的,它就在原位置浮动

 

clear: none(允许两边有浮动对象) | left | right |both(不允许两边有浮动对象)      #清除浮动,如果一个盒子设置了clear left,而这个盒子1的的左边正好是个浮动对象盒子2,盒子1就会下移,不和盒子2在一行,盒子1的的右边正好是个浮动对象盒子3,盒子1设置了clear:right,,盒子1的位置不动,因为clear并不能影响其他盒子

当一个盒子里面有两个子标签都漂浮起来,它就会失去原来的位置

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1{
            border: 1px solid black;
            clear: both;
            width: 300px;
        }
        .div2{

            width:100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .div3{

            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    
    <div class="div1">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

 

结果如下:

可以看到他们的父盒子没有位置了,只有两个像素的边框

有一个办法可以解决这个问题就是:

往标签里面添加一个去除浮动的标签,他会保证当盒子的所有元素都是浮动的话,能保证这个空盒子还占据位置。

结果如下

但是这样写不是很好,因为在内容中添加了一个无用的东西,下面是人们经常用的使用伪类的方法来解决这个问题:

.类名:after {

content:"";      #在类名为clearfix的元素后面加入内容,内容不写

display:block;  #把这个元素变为块级元素。

clear: both;     #清除两边浮动

visibility:hidden;      #可见度为隐藏,注意它和display:none是有区别的,这个仍占据空间,只是看不到而已

line-height:0;

height:0;

font-size:0;

}

 

补充:

.clearfix{*zoom:1;}        #这个是针对IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内容元素

position定位属性

position:static;       #默认值,无定位,设置标签属性left和top等值是不起作用的

position:relative;    #相对定位,相对于自己文档流中的位置进行偏移,其在文档流中的位置还继续保持,位置通过left,right,top,bottom设置,相对是左上角顶点。一般父级的标签有很多子标签,就设置这个,让他们进行定位。

position:absolute;  #绝对定位,从文档流中删除,并相对于自己最近的已定位祖先元素(设置的position的盒子)进行定位,如果没有祖先元素,那么就以body标签作为参照,无论原来它是何种类型的框,都会生成一个块级标签。如果给这个盒子设置margin属性的话,是相当于它原来的位置进行移动的,位置通过left,right,top,bottom设置

position:fixed;                  #以窗口为参照点,无论滚动条怎么移动,它在页面的位置不变,回到顶部就是用的这个

 

 

关于css的介绍差不多了,可以尝试的做一个小型的页面看看了,下面链接有已经做好的网页,还有相应的素材,可以下载尝试做一下(审美较次,见谅)

https://files.cnblogs.com/files/kuxingseng95/css.rar

效果大致如下:

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部