css 学习

行内样式: <p style="color:red">  将style写在 元素p的后面  表示样式设置
 color代表颜色  “:“ 冒号代表设置   red是什么颜色

内部样式:  在style中 声明如:
  <style>
    p { color:blue  }    P代表要设定属性的元素  将设定写在大括号内  然后用p元素写的内容就会变成
  </style>                  设定的颜色

外部样式表: 单独建立一个css文件 将p元素连样式写在css文件中,然后在xhtml中引用
  引用:<link rel ="stylesheet" hyef="这里写链接的地址">    应用写在 <style>中

选择器 :  指定的样式 规则作用于哪些元素   在大括号左边的就是选择器
     声明块: 声明块就是大括号的开始结束包括的部分   
     声明:  用于告诉我们在浏览器上画出选择的元素  一个属性值和一个声明 用:分隔 ;号结束
     属性: 属性是选择格式化元素的特征  每个声明只能有一个属性 
     属性值: 属性值是冒号后边 需要设定的  如果有空格 需要用双引号“” 括起来
   
   选择器  (h1) h1{     (声明) color: blue ; margin-top lem  }   声明块{}
        p{  padding(属性):5px(属性值);  }
       h2{  background-color: #ddd;  }

声明块分组:一个声明块内  可以有多个分组  每个分组必须以分号分开
      p{padding: lem;    padding:5px ;  }
       选择器分组: 当几个选择器共享相同的声明时  可以分组放在一起
      h1,h2,h3{ padding: lem}

元素选择器:  匹配xhtml上任何元素 不考虑元素在什么位置
   p就是一个元素    p{  padding(属性):5px(属性值);  }
 
类选择器: 能选择某个具有class属性的 任何元素  不考虑位置  class可重复
.big{padding: lem}  这是类选择器
 <p class="big">  声明 p的class为 big

id选择器  以定义的id来选择    id是唯一的  所以只能定一个
 .big{padding: lem}  这是id选择器
 <p id="big">  声明 p的id为 big

包含选择器: 选择在元素中的子元素  
  p h1{padding: lem}   p代表p元素   h1 是p元素中的 子元素

<body>
        <p>
             <h1>我是子元素</h1>
         </p>
   </body>

通配符选择器:  通配符*  表示选择全部的元素
*{padding: lem}  所有元素都被设置属性了

伪元素选择器:  first-line 用于元素第一行     first-letter 作用与第一个字母
p:first-line{padding: lem}

hover 鼠标在链接上触发    
a : hover {color:greom text-decoration:none}

link 未激活触发
a : link {color:greom text-decoration:none}

active 鼠标点下 到放开时触发
a : active {color:greom text-decoration:none}

visited 已访问的触发
a : visited {color:greom text-decoration:none}

时间: 2024-10-26 06:05:43

css 学习的相关文章

CSS学习之float解析

转自:http://www.w3cplus.com/css/float.html 一.float是什么? float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”.下面解释下这个定义中的几个名词的概念: 文档流:在html中文档流即为元素从上至下排列的顺序. 脱离文档流:元素从正常的排列顺序被抽离. 最左边/最右边:上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界(不包括padding). 二.float

css学习感言

在培训学校学习了一个多月了,最近主要讲的是css,准确的说老师上课讲css用了8天的时间,讲课的速度飞快,可能是对于我这种零基础的学生来说吧,感觉学起来很吃力,不过在这个过程中也学到了许多知识,这里主要介绍一下css中选择器权重的问题,css中选择器分为三类1.元素选择器2.类选择器3.id选择器4.通配符 ,这里主要介绍前三类. 元素选择器:例如table,input,button等他们分别表示一大类,称之为元素.它的权重是最小的,相当于日常生活中重量单位的一克.它是对一大类比如table,i

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

CSS学习(二)—浮动

一. 定义 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 解决的问题:"如何在一行显示多个div元素" 二. 浮动与不浮动区别 图1 图2 区别 不浮动的框是由上往下独占一行的,而浮动的框是紧靠着排列的.图2中d1.d2.d3都是向左浮动的,所以先把d1放在紧靠着父框摆放,然后把d2紧靠着d1摆放,最后d3紧靠着d2摆放.向右浮动亦与之类似. 语法: float : none | left |right 参数: none : 对象不浮动 left :

2016/2/25 html+css学习资源

html+css学习资源 1.Position is Everything,一个描述和展示在各种浏览器中发现的bug,并提供css解决方法的网站,顶! 2.一个国外的网页设计论坛 3.http://css-tricks.com/ 4.http://html5demos.com/ 有很多html5 DEMO 5.http://www.alistapart.com 6.http://webreference.com/ 7.http://www.webmonkey.com/ 8.http://www.

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

【转】css学习专题-BFC

css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC). developer center上面有对BFC的一段描述: 一个 block formatting context 是web页面可视化CSS渲染的一个部分,是一块 block b