css续-字体-文本-链接

impress 2013-07-25


晚上没有下载上模版 所以就看下css 样式了。
一般的css网站制作布局时常会遇到li点的情况,特别是对新手来说有点陌生,如何去掉<li></li>中的点呢,或者如何改变为数字1234 或者改成空心方块呢,其实很简单直接定义li的css为
li{
list-style-type:none;

如果要改变点的颜色,那么li里面的字也会变颜色与大小了,但你可以使用图片作为前面的点,
这样就可以随心所欲的装饰了
li{
    list-style:url("图片.gif") outside circle;

li点的其他用法css代码:
list-style-type:
disc 默认-实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小罗马数字
upper-roman 大罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
none 不使用项目符号

inline-block:border 块会排列

css属性background 是上述所有与背景有关的缩写方法
使用background 属性可以减少属性的数目,因此令样式表更加简短易读
比如说下面五行代码
background-color:#FFCC66;
background-imae: url(“butterfly.gif”);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: right bottom;

如果使用background属性的话,实现同样的效果只需要一行代码即可
background :#FFCC66 url("图片.gif") no-repeat;
两个为指定的属性将设定为scroll和top left

字体: 由于字体不怎么重要 这里就简单看一下
用css来设置字体, 考虑网站上所选的字体仅当访问者的pc上安装有该字体才会被显示

font-family 字体家族
font-style 字体类型
font-variant 字体样式
font-weight  加粗字体
font-size 字体大小
font 字体
 
字体族font-family
css属性 font-family 的作用是设置一组按优先级排序的字体列表,如果该列表中的第一个字体未在访问者计算机上安装,那么就尝试列表下一个字体,以此类推,知道列表中的某个字体是已安装的
有两种类型的名称可用于分类字体,字体族名字(family-name) 和族类名称(generic family)
字体族名称(family-name)
字体族名字就是我们所说的字体 例子包括Arial Times New Roman 宋体 黑体等
一个族类是一组具有统一外观的字体族,sans-serif 就是一例,他代表一组没有“脚”的字体(具体用到的不是很多,个人观点)

字体样式(font-style)
css属性font—style 定义所选字体的显示样式 normal 正常 italic 斜体 oblique 倾斜


5.文本
text—indent
text-align
text-decoration
letter-spacing
text-transform

文本缩进 text-indent
css属性text-indent 用于为段落设置首行缩进:以令其具有美观的格式,
下列 我们采用p元素的段落应用了30像素的首行缩进
P{
    text-indent: 30px;



文本对齐 text-align
css 属性text-align与html属性align的功能相同,该属性的值可以是left 左对齐
right右对齐 或者center 居中 除了上面三种选择以外,你还可以将该属性的值设为justify,即伸缩航中的文字以左右靠齐
th{
    text-align:right;
}
th{
    text-align:left;
}
th{
    text-align:center;
}

字符间距letter-spacing
css属性letter-spacing 用于设置文本的水平字间距 我们可以把期望的字间距宽度作为这个属性的值 例如 你希望p元素里的文本段落的字间距为三个像素而h1标题的字间距为六个像素代码可以这样写
h1{
    letter-spacing:6px;
}
p{
    letter-spacing:3px;
}

文本转换 : 暂略:


6 链接
通过伪类来控制  链接的状态(为访问的,已访问的,活动的,是否有鼠标悬停)

伪类是什么?

伪类 令你可以在为html元素定义css属性的时候将条件和事件考虑在内

例子:链接是通过a元素定义的 因此,css里面,我们可以将a作为一个选择器selector

a{
    color:blue;   
}
一个连接可以有不同的状态,

相关推荐

aSuncat / 0评论 2020-08-18