首页 > > 网页制作 > css >

css

2018-06-24 02:23:40来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

效果大致如下：

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：html学习中

下一篇：HTML学习笔记

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签