你的位置:首页 > 网页设计

[网页设计]css知识点整理


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

一、css引入的方式

  1、行内样式:行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

  2、嵌入式:嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

    

  <head>

          <style type="text/css">

               .  ..此处写CSS样式

         </style>

        </head>

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

          <style type="text/css">

                    @import"mystyle.css"; 此处要注意.css文件的路径

         </style>

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

  注意:导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这

  是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样

  先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

  二、css的选择器

  “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

  1、基础选择器:

  * :                                 通用元素选择器,匹配任何元素                                * { margin:0; padding:0; }

  E  :                                 标签选择器,匹配所有使用E标签的元素p { color:green; }

  .info和E.info:                     class选择器,匹配所有class属性中包含info的元素        .info { background:#ff0; }    p.info { background:blue; }

  #info和E#info                    id选择器,匹配所有id属性等于footer的元素                #info { background:#ff0; }   p#info { background:#ff0; }

  2、组合选择器:  

    E,F               多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔             Div,p { color:#f00; }

      E F               后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔    #nav li { display:inline; }    li a { font-weight:bold; }

      E > F             子元素选择器,匹配所有E元素的子元素F                                            div > strong { color:#f00; }

  E + F            毗邻元素选择器,匹配所有紧随E元素之后的同级元素F                            p + p { color:#f00; }   

  注意嵌套规则: 

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

  3、属性选择器

    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[att|=val]    匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,

                            比如“en”、“en-us”、“en-gb”等等                                                    p[lang|=en] { 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;}

 

        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(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。

     伪类选择器 : 伪类指的是标签的不同状态:

            a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

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

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

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

  a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

  三、css常用属性

  1、颜色属性 

    <div >ppppp</div>

     <div >ppppp</div>

    <div >ppppp</div> 

    <div >ppppp</div>

  2、字体属性 

  font-size: 20px/50%/larger

  font-family:'Lucida Bright'

  font-weight: lighter/bold/border/

  <h1 >老男孩</h1>

  3、背景属性

  

  background-color: cornflowerblue

  background-image: url('1.jpg');

  background-repeat: no-repeat;(repeat:平铺满)

  background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)

      简写:<body >

              <div >

     注意:如果讲背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片,另外,如果此时要设置一个

     width=100px,你也看不出效果,除非你设置出html。   

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Title</title> 6   <style> 7     html{ 8       background-color: antiquewhite; 9       10     }11     body{12       width: 100px;13       height: 600px;14       background-color: deeppink;15       background-image: url(1.jpg);16       background-repeat: no-repeat;17       background-position: center center;18     }19   </style>20 </head>21 <body>

View Code

  4、文本属性

  

   white-space: 设置元素中空白的处理方式

  • normal:默认处理方式。
  • pre:保留空格,当文字超出边界时不换行
  • nowrap:不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
  • pre-wrap:保留空格,当文字碰到边界时换行
  • pre-line:不保留空格,保留文字的换行,当文字碰到边界时换行

  direction: 规定文本的方向 

  • ltr 默认,文本方向从左到右。
  • rtl 文本方向从右到左。

  text-align: 文本的水平对齐方式 

  • left
  • center
  • right

    line-height: 文本行高

  • normal 默认

    vertical-align: 文本所在行高的垂直对齐方式

  • baseline 默认
  • sub 垂直对齐文本的下标,和<sub>标签一样的效果
  • super 垂直对齐文本的上标,和<sup>标签一样的效果
  • top 对象的顶端与所在容器的顶端对齐
  • text-top 对象的顶端与所在行文字顶端对齐
  • middle 元素对象基于基线垂直对齐
  • bottom 对象的底端与所在行的文字底部对齐
  • text-bottom 对象的底端与所在行文字的底端对齐

    text-indent: 文本缩进

    letter-spacing: 添加字母之间的空白

    word-spacing: 添加每个单词之间的空白

    text-transform: 属性控制文本的大小写

  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义仅有小写字母。

    text-overflow: 文本溢出样式

  • clip 修剪文本。
  • ellipsis 显示省略符号...来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
  •   text-decoration: 文本的装饰
    • none 默认。
    • underline 下划线。
    • overline 上划线。
    • line-through 中线。

      text-shadow:文本阴影

    • 第一个参数是左右位置
    • 第二个参数是上下位置
    • 第三个参数是虚化效果
    • 第四个参数是颜色
    • text-shadow: 5px 5px 5px #888;

      word-wrap:自动换行

    • word-wrap: break-word;

  

  5. 列表属性

    list-style-type: 列表项标志的类型

  • none 去除标志
  • decimal-leading-zero;  02.
  • square;  方框
  • circle;  空心圆
  • upper-alph; & disc; 实心圆

    list-style-image:将图象设置为列表项标志

    list-style-position:列表项标志的位置

  • inside
  • outside

    list-style:缩写

  

 6. 边框 

    border-style:边框样式

  • solid 默认,实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

    border-color:边框颜色

    border-width:边框宽度

      border-radius:圆角

  • 1个参数:四个角都应用
  • 2个参数:第一个参数应用于 左上、右下;第二个参数应用于 左下、右上
  • 3个参数:第一个参数应用于 左上;第二个参数应用于 左下、右上;第三个参数应用于右下
  • 4个参数:左上、右上、右下、左下(顺时针)

    border: 简写

  • border: 2px yellow solid; 

    box-shadow:边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;

  

  7、display

    • none 不显示。
    • block 显示为块级元素。
    • inline 显示为内联元素。
    • inline-block 行内块元素(会保持块元素的高宽)。
    • list-item 显示为列表元素。

   8、盒子模型

  什么是盒子模型?

  

  padding:用于控制内容与边框之间的距离;

  margin: 用于控制元素与元素之间的距离; 

  

  一个参数,应用于四边。

  两个参数,第一个用于上、下,第二个用于左、右。

  三个参数,第一个用于上,第二个用于左、右,第三个用于下

  边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),解决办法

  

1 body {2   margin: 0;3 }

View Code

  9、float

  

  让一行显示两个块级标签,会脱离文档流

  • none
  • left 左浮动
  • right 右浮动

  clear 清除浮动:

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

  10、position

  

   1 static,默认值 static:无特殊定位,对象遵循正常文档流。

   top,right,bottom,left等属性不 会被应用。 说到这里我们不得不提一下一个定义——文档流,文档流其实就是文档的输出顺序, 也就是我们通常看到的由左      到右、由

  上而下的输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就        是让元素继续按照

  文档流显示,不作出任何改变。

  2  position:relative

      relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

      absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative,就可以使用

  top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置,只是视觉上相对于它在文档中的原有位置

  移动了] 当指定 position:absolute 时,元素就脱离了文档[即在文档中已经不占据位置了],可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对

  定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素, 一直找到html为止。

  3  position:fixed

         在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

     fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性      定

  义。 注

  意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,    另一个是“定位

  流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

 

  

 


  通过以下四种属性进行定位:  

  • left
  • top
  • right
  • bottom
  • z-index