`

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笔记
评论
发表评论

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

相关推荐

    CSS笔记(1).pdf

    CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...

    狂神说视频-CSS笔记.pdf

    CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...

    HTMLCSS笔记.pdf

    HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...

    史上最经典的HTML+CSS笔记.rar

    这份"史上最经典的HTML+CSS笔记"无疑是学习这两门技术的重要参考资料。以下将根据标题、描述以及可能包含的子文件内容，对HTML和CSS的基础知识进行详细阐述。 HTML是网页内容的结构语言，用于定义网页的各个元素...

    css笔记整理_1.pdf

    css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述

    CSS笔记一

    **CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...

    黑马前端css笔记.zip

    总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...

    html和css笔记

    - **网站**：《Webstandards Solutions》、《网站重构》、《CSS禅意花园》、《点石成金》，都是优秀的在线资源，涵盖了从标准规范到设计美学的广泛内容。 - **名人与网站**：了解万维网的创始人Tim Berners-Lee，...

    html css笔记

    ### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载，实现页面内容的更新。这种技术在早期的网页开发中较为常见，通常用于实现简单的内容轮播或者定时获取...

    韩顺平div+css笔记完整

    在网页设计中，`div+css`是一种常见的布局技术，用于实现网页的结构化和美化。`div`是HTML中的一个通用容器元素，用于组织和包裹其他HTML元素，而`css`则是层叠样式表，用来定义网页的样式、布局和视觉效果。`div+...

    CSS笔记全面手册

    **CSS（层叠样式表）全面手册** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。通过使用CSS，我们可以控制网页元素的颜色、字体、...

    韩顺平div css笔记.doc

    - 外部 CSS：通过 `&lt;link&gt;` 标签引用一个外部的 CSS 文件，如 `&lt;link href="my.css" type="text/css" rel="stylesheet"/&gt;`，这种方式有利于样式复用和代码组织。 - 内部 CSS：将 CSS 代码写在 HTML 的 `&lt;style&gt;` ...

    css 笔记 包括 滤镜 阴影 圆角

    ### CSS 笔记：滤镜、阴影与圆角 #### 一、CSS滤镜(Filter) 在Web开发过程中，为了使页面更加美观或者实现特定的视觉效果，开发者常常需要使用到CSS滤镜。CSS滤镜是一种可以对元素进行颜色或图像处理的效果工具。...

    html+css笔记.md

    html和css基础总结，适合入门web和初学者

    naofantian HTML_CSS笔记

    这份"naofantian HTML_CSS笔记"提供了作者naofantian在进行毕业设计时积累的知识点和经验分享。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它通过各种标签来定义网页的结构，如`...

    CSS笔记

    CSS笔记

    精品专题（2021-2022年收藏）css笔记Css笔记.doc

    CSS笔记主要涵盖了如何定义和应用CSS样式，以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式：在HTML元素的`style`属性中直接写CSS样式，例如`;"&gt;文本&lt;/p&gt;`。 2. 内部样式表：将CSS写在HTML文档的`&lt;head&gt;`...

    CSS_Demo，文章《CSS笔记》配套代码

    这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例，文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是：...

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