第一节 三种样式
1、三种样式:
1、嵌入样式
<style type="text/css" ></style>
<style type="text/css" >@import url("css/layout.css");</style>
2、行内样式
<a href="#" style="color:#000;">Home</a>
3、连接样式
<link href="css/print.css" rel="stylesheet" type="text/css" />
2、 1、类选择符:
body{} div{} span{}
2、群组选择符
h1,h2,h3,p,span{}
3、包含选择符
h1 span{}
4、id选择符
#adam1985{}
5、class选择符
.apple{}
6、包含选择符+群组选择符
h1 span,a,b{}
7、通配选择符
*{}
3、width:200px;
height:200px;
margin:20px; 外间距
padding:20px; 内间距
border:10px solid #000; 黑色边框
4、border:border-width border-style border-color;
border:10px solid #000;
相当于
border-style:solid;
border-width:10px;
border-color:#000;
相关属性:[ border-top ] || [ border-right ] || [ border-bottom ] || [ border-left ]
border-left:10px solid #000;
5、border:10px solid #000;中的solid类型
<border-style>
none: 无轮廓。border-color与border-width将被忽略
hidden: 隐藏边框。IE7及以下尚不支持
dotted: 点状轮廓。IE6下显示为dashed效果
dashed: 虚线轮廓。
solid: 实线轮廓
double: 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove: 3D凹槽轮廓。
ridge: 3D凸槽轮廓。
inset: 3D凹边轮廓。
outset: 3D凸边轮廓。
6、margin:[<length>|<percentage>|auto]
相关属性:[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
auto: 值被设置为相对边的值
<length>: 用长度值来定义外补白。可以为负值
<percentage>: 用百分比来定义外补白。可以为负值
例如: margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
相当于margin:10px 20px 30px 40px;(顺序:上右下左)
例:margin:30px 60px;(上下间距30px,左右间距60px)
7、padding:同margin
第二节 CSS字体与文本样式
8、body {font-family:Verdana, Arial, Helvetica, sans-serif;}
字体家族:font-family:Verdana, Arial, Helvetica, sans-serif(字体顺序从左到右找)
9、字体大小:font-size:
<absolute-size>: 根据对象字体进行调节。可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large
以 medium 作为基础参照,xx-small相当于medium 3/5 (h6),x-small: 3/4,small: 8/9 (h5),medium: 1 (h4),large: 6/5 (h3),x-large: 3/2 (h2),xx-large: 2/1 (h1),
<relative-size>: 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值:smaller | larger
<length>: 用长度值指定文字大小。不允许负值。
<percentage>: 用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
例如:body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
10、颜色(color):
color:Color Name | HEX | RGB | RGBA | HSL | HSLA |transparent
例如:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#3399cc; (相当于缩写方式:color:#39c;)
}
十六进制表示法: p {color:#cccccc;}
RGB表示法:p {color:rgb(255,255,0);}
11、(加粗变细)font-weight:normal|bold|bolder|lighter|<integer>
normal: 正常的字体。相当于number为400
bold: 粗体。相当于number为700。
bolder: 特粗体。也相当于strong和b对象的作用
lighter: 细体
<integer>: 用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
例如
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#3399cc; (相当于缩写方式:color:#39c;)
font-weight:normal;}
h2 {font-weight:normal;}
12、(线性)text-decoration:[text-decoration-line]||[text-decoration-style]||[text-decoration-color]
[ text-decoration-line ]: 指定文本装饰的种类。相当于CSS2.1的 text-decoration 属性,可取值:none | underline | overline | line-through | blink (Firefox1.0及Opera4.0开始支持blink,其它浏览器尚不支持)
[ text-decoration-style ]: 指定文本装饰的样式。
[ text-decoration-color ]: 指定文本装饰的颜色。
例如:p {
color:rgb(200,0,0);
font-weight:400;
text-decoration:underline;
}
p {
color:rgb(200,0,0);
font-weight:400;
text-decoration:line-through;
}
去掉a标签的下划线
a{
text-decoration:none;
color:rgb(0,0,255);
}
包含模式
h2 a{
text-decoration:none;
color:rgb(0,0,255);
}
13、text-transform:none|capitalize|uppercase|lowercase|full-width
none: 无转换
capitalize: 将每个单词的第一个字母转换成大写
uppercase: 将每个单词转换成大写
lowercase: 将每个单词转换成小写
full-width: 将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式,将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)
例如:a {
text-decoration:none;
color:rgb(0,0,255);
text-transform:capitalize;
}
14、行高:line-height:30px
line-height:normal | <length> | <percentage> | <number>
取值:
normal: 允许内容顶开或溢出指定的容器边界。
<length>: 用长度值指定行高。可以为负值。
<percentage>: 用百分比指定行高,其百分比取值是基于字体的高度尺寸。可以为负值。
<number>: 用乘积因子指定行高。可以为负值。
例如:p {
color:rgb(200,0,0);
font-weight:400;
text-decoration:none;
line-height:200%;
}
15、单词间距:word-spacing:[normal|<length>|<percentage>]{1,3}
例如:p {
color:rgb(200,0,0);
font-weight:400;
text-decoration:none;
line-height:30px;
word-spacing:20px;
}
16、字母间距:letter-spacing:[normal|<length>|<percentage>]{1,3}
17、文本属性text-align:[[start|end|left|right|center]||<string>] | justify | match-parent | start end
取值:
left: 内容左对齐。
center: 内容居中对齐。
right: 内容右对齐。
justify: 内容两端对齐。
start: 内容对齐开始边界。(CSS3)
end: 内容对齐结束边界。(CSS3)
<string>: 字符串必须是单一字符,否则申明将无效。(CSS3)
match-parent: 这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的,计算值可以是 left 和 right 。(CSS3)
start end: 指定 start 对齐第一行和任何强制打断的行;end 对齐所有剩余的行不受 text-align-last 影响。(CSS3)
例如:h2 {
font-weight:400;
text-align:center;
}
18、设置对象中文本的缩进:text-indent::[ <length> | <percentage> ] && [ hanging || each-line ]?
<length>: 用长度值指定文本的缩进。可以为负值。
<percentage>: 用百分比指定文本的缩进。可以为负值。
each-line: 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行,软换行不受影响。(CSS3)
hanging: 反向所有被缩进作用的行。(CSS3)
例如:p {
color:rgb(200,0,0);
font-weight:400;
text-decoration:none;
line-height:30px;
word-spacing:normal;
letter-spacing:normal;
text-align:left;
text-indent:20px;
}
p {text-indent:2em} # 1em = 16px 12px = 0.75em
19、(重要)设置标签内外边距默认属性
* {
margin:0;
padding:0;
}
再对需要的边距进行修改:
p {
color:rgb(200,0,0);
font-weight:400;
text-decoration:none;
line-height:30px;
word-spacing:normal;
letter-spacing:normal;
text-align:left;
text-indent:1em;
padding:20px 0;
}
第三节:
20、
为满足简单网页需要,个人CSS笔记
最新推荐文章于 2024-08-08 15:58:05 发布