`

css笔记

    博客分类：
  • web
CSS百度浏览器HTML
阅读更多
A.样式规则的选择器
  1.html selector ：直接写html标签，如p,tr,td,
   如 ：  p{
         color:red;
         font-size:19px
         }
     
       div{
           color:green;
           font-size:1cm;

          }

 
2.class selector
      <style>(这种方式只有p标签可以用）
      p.one{color:#FF3366;font-size:1cm;background:green;}
      p.two{color:green;font-size:1cm;background:black;}
       p.three{color:green;font-size:1cm;background:blue;}
      </style>
      </head>
      <body>
       <p class="one">whsisdfssdfsd</p>
      <p class="two">fsdfasdfasd</p>
      <p class="three">sdfasdfadf</p>
       <p class="one">sdfsadfhooajd</p>
       </body>


      <style>（这种方式所有的标签都可以用）
      .one{color:#FF3366;font-size:1cm;background:green;}
     .two{color:green;font-size:1cm;background:black;}
     .three{color:green;font-size:1cm;background:blue;}
     </style>
     </head>
    <body>
   <h1 class="three">sfdsdfgwefedfdsfs</h1>
  <p class="one">whsisdfssdfsd</p>
  <p class="two">fsdfasdfasd</p>
  <div class="three">sdfasdfadf</p>
  <div class="one">sdfsadfhooajd</p>
</body>



3.id   selector
  在一个页面id是不能重复的
如：
        <style>（）
      #one{color:#FF3366;font-size:1cm;background:green;}
     #two{color:green;font-size:1cm;background:black;}
     #three{color:green;font-size:1cm;background:blue;}
     </style>
     </head>
    <body>
   <h1 id="three">sfdsdfgwefedfdsfs</h1>
  <p id="one">whsisdfssdfsd</p>
  <p id="two">fsdfasdfasd</p>
  <div id="three">sdfasdfadf</p>
  <div id="one">sdfsadfhooajd</p>
</body>
   



4.关联选择器（用空格关联如：center p em）
     <style>(center,p,em标签少一个css都不会生效）
    center p em{background-color:#006633; font-size:36px; background-position:center}
  </style>
</head>
<body>
<center>
    <p>
<em>武汉黄鹤楼</em>
</p>
  </center>

   <style>(此种为错误的，少了一个p标签）
    center p em{background-color:#006633; font-size:36px; background-position:center}
  </style>
</head>
<body>
<center>
 
<em>武汉黄鹤楼</em>

  </center>



<style>
    .one .two em{background-color:#006633; font-size:36px;}

  </style>
</head>
<body>
<center class="one">
    <h1 class="two">
<em>武汉黄鹤楼</em>
</h1>
  </center>


<style>
    #one #two em{background-color:#006633; font-size:36px;}

  </style>
</head>
<body>
<center id="one">
    <h1 id="two">
<em>武汉黄鹤楼</em>
</h1>
  </center>
</body>


<style>
    #one .two em{background-color:#006633; font-size:36px;}

  </style>
</head>
<body>
<center id="one">
    <h1 class="two">
<em>武汉黄鹤楼</em>
</h1>
  </center>
</body>



5.组合选择器

<style>（两个标签任意组合）
  p,div,.one,#class{background-color:#003399; font-size:18px;}

  </style>
</head>
<body>
<p>wfdsdf</div>
<div>wuhandfsdf</p>
<hr />
<p class="one">fsdfsadfasd</div>
</body>


6.伪元素选择器
<style>
          a:link { background-color:#003333; font-size: 24px}
  a:hover { background-color:#669966; font-size:14px}
  a:visited {background-color:#CC3399; font-size:36px}
  </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>



Filter(css滤镜)
只有有边界元素才能用滤镜
Filter是<div>的一个属性
<div   style=”width=:120;height:20;background-color=red;
       Filter:alpha(opacity=80) blur(add=5,direction=135)”>
   ..alpha(opacity=?,finishopacity=?,style=?,startx=?,starty=?,finish=?,finishx=?,finishy=?)
   ..alpha:控制元素与背景的混合程度，就是元素的透明度
   ..opacity:透明度的级别1到100之间，1为完全透明，100完全不透明。
   ….finishopacity:设置渐变透明度，结束时的透明度
   …style:设置渐变透明的样式
  …startx,staryx,finish,finishy，渐变开始于结束的坐标

Blendtrans(duration=?)设置淡入与淡出效果，duration设置淡入与淡出的时间值
Blur(add=?,direction=?,strength=?)设置模糊效果
Chroma(color=?)设定某种颜色为透明，就是过滤某种颜色
Dropshadow(color=?,offx=?,offy=?,positive=?)建立阴影效果
   Color设置阴影的颜色，offx设置阴影在水平方向上的偏移量，offy设置阴影在垂直方向上的便宜量，positive:值为true,表示建立外部阴影，为false表示建立内部阴影
Fliph,flipv:将元素水平方向上，将元素垂直方向上反转不用设置子参数反转图像的
Gray:去掉元素的色彩，黑白图像。不用设置子参数
Invert:反转图像的颜色，类似底片的效果，不用设置子参数
Light:设置光源效果，模仿光源在物体上的投影效果，必须结合js使用，不用设置子数
Xray:显示图片的轮廓，不用设置子参数
Glow(color=?,strength=?),mask(color=?)设置元素边缘类似发光的效果。
            发光的强度              元素表面形成一个遮罩，效果类似有色眼镜看物体

Revealtrans(duration=?,transition=?)建立元素初始转换时的效果

          指定切换的时间        切换的方式

Shadow(color=?direction)建立阴影效果
Wave(add=?,freq=?,lightstrength=?,phase=?,strength=?)建立波纹的效果

   是否扭曲    波纹的频率   波纹的光照强度  波浪的起始上角     波浪摇摆的幅度

CSS-P(cascading style sheets positioning)
Css-p是css的一个扩展，它可用来控制人和网页元素在浏览器文档窗口中的位置
   *Position
     设置值：absolute绝对定位，relative相对定位，static用html定位
   *left,top,width,height
   *z-index:设置元素的层叠位置

边缘
padding为内边距
padding-left:2cm;
padding-right:2cm;
padding-top:2cm;
padding-bottom:2cm

margin为外边距
*margin(margin-top,margin-right,margin-bottom,margin-left)


*设置边框的宽度border-width(border-top-width, border-right-width, border-bottom-width, border-left-width)
设置值:thin,medium,thick或数值
Border-color边框颜色(border-top-color, border-right- color, border-bottom- color, border-left- color)

*border-style边框的样式
也可以简写为：
  *border(border-top,border-right,border-bottom,borer-left)
  给border-top一次性赋予width,color,style.效果同border-color,border-width效果相同

列表：
* List-style-type
     设置值：disc实心圆，circle空心等值
*list-style-image
  如果使用了属性，则该图片会代替上面的实心圆，空心等出现在每个列表的前面。
*list-style-position 
  设置值：inside,outside





*list-style:是上面几个元素的简写

Cursor:设置鼠标经过时的形状
   *设置值：hand手型等值

Css中的注释：
/*……………*/
并不是所有的外标签的属性都会被内标签的属性值继承，例如：<body>中的有的属性值不会被它所包含的标签继承。

*样式规则的优先级：如果内层标签与外层标签的相同属性值相同，则当浏览器解释内层标签时，以内层标签为准
           Id选择器>class选择器>html标签选择器
          内联样式>表嵌入样式表>链接样式表
在html中用<linke>标签中用外连接方式来使用css





















































分享到：
| html笔记
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics