三十三、CSS

CSS 层叠样式表

 CSS的四种引入方式

1：行内式

          直接在标签内的style的属性中设置css样式。

<p style = "background-color :green" >yanshi1</p>

2：嵌入式

    将CSS样式集中写在网页的<head></head> 标签对的<style></stype>

   

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5     <style>
 6         div {
 7             background-color: aqua;
 8             color: black
 9         }
10         </style>
11 </head>
12 <body>
13 <p> 标签1 </p>
14 <div> 块标签 </div>
15 </body>
16 </html>

3: 导入式
          将一个独立的.css文件@import 引入文件中， 导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

         

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5     <style>
 6        @import "a.css";
 7         </style>
 8 </head>
 9 <body>
10 <p> 标签1 </p>
11 <div> 块标签 </div>

4: 链接式
            也是将一个.css文件引入到HTML文件中    <link href="mystyle.css" rel="stylesheet" type="text/css"/>

注意：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="a.css" type="text/css" rel="stylesheet">

</head>
<body>
    <p> 标签1 </p>
    <div> 块标签 </div>    
</body>
</html>

 

3/4 的区别：

     import 导入方式是css的语法。 link 是html的语法。 import 有数量的限制， 且在网页比较大的时候，会显示无样式的页面。会有闪烁的情况。链接的方式会以网页主体文件装载前装载css文件。

 

css的选择器（Selector）

1 基础选择器：

 * ： 匹配所有  

 *{  background-color: aqua;  color: black  }

E  ：标签匹配

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

.info和E.info:   class 类匹配  ，匹配所有class 包含info的元素     

div.test{  background-color: aqua;  color: black  }

#info和E#info    id选择器     匹配所有id属性等于abc的元素      

#abc{  background-color: aqua;  color: black  }

 

2 组合选择器

 

E,F    多元素选择器。 同时匹配E或者F，用逗号分割

1 div, p{  background-color: aqua;  color: black  }

E F 后代选择器，匹配E的后代中F标签 。包括儿子和孙子

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

E>F   子元素选择器。仅仅匹配E的儿子元素。 不匹配孙子元素

.test>p{  background-color: aqua;  color: black  }

 

 E + F            毗邻元素选择器，匹配所有紧随E元素之后的同级元素F     

p+div{  background-color: aqua;  color: black  }

 

         

 注意嵌套规则：

  1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
  2. 块级元素不能放在p里面。
  3. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  4. li内可以包含div
  5. 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）

 

 3 属性选择器

 

          属性包括：id、name、class 等等 和自定义属性

          E[att]            匹配所有具有att属性的E元素，不考虑它的值。 例如：有name属性的p标签

p[name]{  background-color: aqua;  color: black  }

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

1 p[name="aaa"]{  background-color: aqua;  color: black  }

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

p[name~="ccc"]{  background-color: aqua;  color: black  }

 

        E[att|=val]    匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等   

p[name|="ccc"]{  background-color: aqua;  color: black  }

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

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

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

 

        p:before         在每个 <p> 元素的内容之前插入内容                     p:before{content:"hello";color:red}

        p:after           在每个 <p> 元素的内容之前插入内容                      p:after{ content:"hello"；color:red}

 

 

4 伪类选择器：

    伪类选择器： 专用于控制链接的显示效果。伪类直接的是标签的不同状态。

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5     <!--<link href="a.css" type="text/css" rel="stylesheet">-->
 6 
 7     <style type = "text/css">
 8         a:link{
 9             color :red;
10         }
11         a:visited{
12             color :blue;
13         }
14         a:hover{
15             color:green;
16         }
17         a:active{
18             color:yellow;
19         }
20 
21     </style>
22 </head>
23 <body>
24  <a href = "www.baidu.com"> 百度</a>

 

CSS的常用属性

 1：颜色属性

<div>
    <p style="color:blue"> 颜色 </p>
    <p style="color:#ffee33"> 颜色 </p>
    <p style="color:rgb(255,0,0)"> 颜色 </p>
    <p style="color:rgba(255,0,0,0.4)"> 颜色 </p>
</div>

  

2：  字体属性：

  • font-size: 20px/50%/larger  字体大小
  • font-family:'Lucida Bright'  字体
  • font-weight: lighter/bold/border/  加粗

3：  背景属性：

1  body{
2             width: 800px;
3             height: 800px;
4             background-image:url(1.jpg);
5             background-repeat:no-repeat;
6             background-position:center;
7 
8         }

 

  • background-repeat: no-repeat 只显示一张图片。 默认repeat平铺满。
  • background-repeat: repeat-x 只x轴铺满。 repeat-y 只y轴铺满
  • background-position： right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

     注意：如果背景属性加在body上，需要给body 添加height。因为body为空，无法撑起背景图片。

        通常将背景图片放置到div中。

   

4 ：  文本属性：

  • font-size: 30px;  文字大小
  • text-align: 文字排列位置。 center 为居中。
  • line-height: 100px; 文字高度加上文字上下的空白区域的高度 。50%:基于字体大小的百分比
1  div{
2             font-size : 30px;
3             background-color: blue;
4             text-align : center;
5             line-height: 100px;
6         }

 

  • text-indent: 150px; 首行缩进，50%：基于父元素（weight）的百分比
  • letter-spacing: 10px;  字母间距
  • word-spacing: 20px; 单词间距
  • direction: rtl;   右对齐
  • text-transform: capitalize;  首字母大写
1  font-size : 30px;
2             background-color: blue;
3             line-height: 100px;
4             text-indent:3px;
5             letter-spacing:10px;
6             word-spacing:20px;
7             direction: ltr;
8             text-transform:capitalize

 

5   边框属性：

  • border-style: solid 实心线
  • border-color: 边框颜色
  • border-width: 边框宽度
1            border-style: solid;
2             border-color: red;
3             border-width:10px;

 

6   列表属性

ul,ol{ list-style: decimal-leading-zero;   序号显示为数值

         list-style: none; list-style: circle;  序号显示为圆圈

         list-style: upper-alpha; 序号显示为罗马数字

         list-style: none;   去掉序号}   

1  ul,ol{
2             list-style: decimal-leadling-zero;
3             list-style: none;
4             list-style: circle;
5             list-style: upper-alpha;
6             list-style: disc;
7         }

 

7  dispaly属性

    将块级标签修改为内联标签。将内联标签修改为块级别标签

  • none   隐藏标签
  • block 块标签
  • inline 内联标签
1  p{
2             background-color:red;
3             display:inline;
4         }

 

8  盒子模型

 

  • content
  • border
  • padding
  • margin

                                   

  • padding:内边距。 内容和边框之间的距离。 会影响盒子大小。
  • margin: 外边距。边框与边框，或者元素与元素之间的距离。不会影响盒子大小。
  • 边框在默认情况下会定位于浏览器窗口的左上角。
  • body本身和html之间还有一个默认的8px的外边距。需要设置去掉此边距。

body{
    margin: 0;
}

 

  顶头的一个块的margin无效，是因为margin collapse（边界塌陷说）

 margin 边间距通过上一级别的 border、padding、inline content确定。如果父级别没有回一直向上查找。 然后按找到的div 进行margin。
 
 默认情况下body 没有border。需要给body设置border，或者padding 等来解决此问题
              1: border:1px solid transparent
              2:  padding:1px
              3: over-flow:hidden; 
 

    1兄弟div：相邻2个div。会取上下两者margin里最大值作为显示值

    2父子div    父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin ；

 

9 float （浮动）

  •   div是块级元素，在页面中独占一行，自上而下排列，是按照文档流排列。
  •   浮动连接为让某个div元素脱离标准流， 漂浮在标准文档流之上，和标准文档流不是一个层次。
  •   当某一个div 浮动后，脱离了标准文档流，其他的div仍然在流动，会自动向上移动，占据原有div的位置
.div1{
    background-color: aqua;
    width: 100px;
    height: 130px;
    float: left
}

     float：left。浮动后，靠左排列。

     float：right。浮动后，靠右排列。

 

  • 多个元素浮动

          如果前面的元素也是浮动的，后面浮动的div会跟随在前面的浮动的div，同一水平线展示。如果都是left，则从左开始排列

           如果是right，则从右开始排列。

          如果前面的元素不是浮动的，浮动的div 顶部和上一元素的底部对齐。

         元素浮动前，在标准流中，竖向排列，浮动后是横向排列

 

  •  清除浮动

         当多个元素都是浮动元素。但是我们希望某些元素不保持横向排列。保持竖向排列的时候，需要使用float 打破横向的排列。

          clear：none  left   right  both 

none  :  默认值。允许两边都可以有浮动对象

left   :  清除左侧移动。不允许左边有浮动对象

right  :  清除右侧移动。不允许右边有浮动对象

both  : 清除2侧移动。 不允许有浮动对象

 

清除浮动，只针对 使用对象的div 有效，不能改动其他的div。例如 div1 使用clear，也只是让div1 竖向排列。并没有改动任何其他div 的 属性。

 

10 position

  •    static：默认static 无特殊定位。
  •    fixed：被设置为fixed的元素会固定在窗口的某一个位置。及时窗口滚动，也会停留在这个位置。对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
  •  relative 相对位置：对象遵循正常文档流，但是仍根据top，right，buttom，left 等属性在正常文档流量针对原来的位置进行偏移位置。其层叠通过z-index属性定义
  •  absolute 绝对位置：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]。 如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素， 一直找到html为止。
1 div2{
2             background-color: blueviolet;
3             width: 300px;
4             height: 160px;
5             position: absolute;
6             left: 500px;
7             top:500px;
8         }

 

 

 11： background-position

 

      很多小图片，实际是一张整体的图片。 通过指定位置，来“抠图” 来显示小图片

      background: url(//misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/jd2015img.png) 0 -58px no-repeat;

 

12:  z-index 层级

     通过指定数值，数值越大越靠上。

     z-index：4

13：自动居中

       line-length：44px

       margin：0px auto 

 

posted @ 2016-07-30 13:43  咖啡茶  阅读(81)  评论(0)    收藏  举报