码迷,mamicode.com
首页 > Web开发 > 详细

css

时间:2016-05-31 23:52:22      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

css概述

 

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

一.样式

1.行内样式

<p   style="color:red">你好</p>

-----定义在body某行内

2.内部样式

<style type="text/css">

p{  color:bule  }

</style>

-----定义在head中

3.外部样式

p{  color:bule  }-----写在css文件中

<link  rel="styleSheet"  href="css/xx.css">-----写在head中

------在建立css文件时文件名要与相关的html名一致,方便区分

 

二.选择器

1.元素选择器

如:  p{ color:red }

2.id选择器

#id值{}  如: #t1{color:red}

3.类选择器

.class值{}  如: .city{color:red} ----如果有多个,用‘,‘隔开,群组选择

4.通配选择器

*{}    如:*{color:red}------所有字体都为红色

5.包含选择器

#d1 h1{color:red}----定义在css/head内

<div id="d1">

  <h1 >你好</h1>-----body 内

</div>

#d1> h1{color:red}------子元素选择

#d1+ h1{color:red}-------兄弟(弟弟)元素选择

6.伪类及伪类选择器

a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/

a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/

a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
7.选择器优先级
!important > id > class > element(元素) > 伪类

三.属性
作用:用于指明格式
1.长度单位
 a.绝对长度:cm、mm、in
 b.相对长度:px、em
  em:用户的浏览器默认渲染的文字大小是“16px”,弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小,我们可以这样来设置1em,0.5em,1.5em等,而且“em”还可以指定到小数点后三位,比如“1.365em”
1em=16px

2.颜色单位

  a.用百分比值表示:  color:rgb(50%,0,50%)

  b.用简化十六进制数定义:  #80

  c.为颜色取名: red 、green

3.字体属性

  a.   font-fimally-----字体

  b.   font-size-----字体大小  如: font-size=“30px”

  c.   font-style-----设置字体风格。

  d.   font-weight-----设置字体的粗细。

4.文本属性

  a.  color----设置文本颜色

  b.  line-heigh----设置行高

  c.  indent----缩进元素中文本的首行。

  d.  transfrom----控制元素中的字母。

 

      h1 {text-transform:uppercase}----全大写
    h2 {text-transform:capitalize}----首字母大写
    p {text-transform:lowercase}----全小写
  e. decoration-----向文本添加修饰。
  overline 上划线
  underline 下划线
  line-through 中划线
 

 

css

标签:

原文地址:http://www.cnblogs.com/JackieADBM/p/5548114.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!