CSS -- 入门篇

1. css:层叠样式表  Cascading Style Sheets  定义网页的外观,也可以与js一起做出动态效果

2.  css规则组成:选择器 + 声明

css注释:/*  */

长度单位:em一个字符高度;px 一个像素; pt磅;%百分比

3. 加入css的方式

内联: <p style="color:red; font-size:3px"></p>

嵌入到html:

<head>'

<style type="text/css">

body{ background-color:#ccc}

</style>

</head>

连接到外部样式表: <link rel="stylesheet" href="style.css" type="text/css" />


4. css 选择器

HTML选择器: h1{}

类选择器:  p.light { }        ;    .note{ }   

<p class="one two three" ></p>


ID 选择器   #main{}

关联选择器: table a{}   空格隔开

组合选择器: h1, h2 ,h3{}

伪元素:a:hover{}

5. css 常见属性和值

字体:font

font-family: 字体

font-size:

font-style: normal | italic | oblique

font-weight: normal | bold | bolder | lighter

font-variant: 字体变形   normal | small-caps

font:


颜色:color

h1{color:#oco; }  // 颜色和背景应该一起指定


背景:bg

background-color:

background-image:url();

background-repeat: repeat | repeat-x | repeat-y | no-repeat

background-attachment : scroll  |  fixed


文本:text

letter-spacing:  字母间隔

word-spacing: 文字间隔

text-decoration: 文字修饰 underline |  overline |  line-rhrough |  blink 

text-align: left | right |  center  |  justify

text-indent:文本缩进  长度或者百分比

line-height:   与height一样的时候有垂直居中的效果

边框属性:

border-style:none  |  solid  |  dotted  dashed  double  groove  ridge  inset  outset

border-top-width:15px;   //上右下左  top  right   bottom  left

border-color: white;

border:5px solid gray;  //略写


列表属性:ul

list-style-type: none |  disc |  circle  |  square

list-style-image:url()

list-style-position: 列表缩进的程度



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值