css样式总结(css字体样式)
大家好，关于css样式总结很多朋友都还不太明白，今天小编就来为大家分享关于css字体样式的知识，希望对各位有所帮助！
CSS样式分为哪三种
CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。
对CSS三种样式定义及其实例：
内联式css样式。
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<pstyle="color:red">这里文字是红色。</p>css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）。
嵌入式css样式。
嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：
<styletype="text/css">span{color:red;}</style>嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。
外部式css样式。
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。
<linkrel="external nofollow" href="style.css"rel="stylesheet"type="text/css"/>注意事项：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel=”stylesheet” type=”text/css”是固定写法不可修改。
3、标签位置一般写在标签之内。
掌握好三种CSS三种样式使用方法在Web开发中将节省很多时间。
css中各个样式的意义
:active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
在CSS1中此伪类仅可用于 a对象。对于无 href属性(特性)的 a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
并且:active可以和:link以及:visited状态同时发生。 a:active{ font-size: 14pt; text-decoration: underline; color: blue;}
:hover
设置对象在其鼠标悬停时的样式。
在CSS1中此伪类仅可用于 a对象。对于无 href属性(特性)的 a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
a:hover{ font-size: 14pt; text-decoration: underline; color: blue;}
a:hover span{ color:red;}
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句：
p{COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
样式声明写在一对大括号"{}"中；
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
颜色值可以用RGB值写，例如：color: rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法：
body{ font-family:"Lucida Grande", Verdana, Lucida, Arial, Helvetica,宋体,sans-serif;}
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
Lucida Grande字体适合Mac OS X；
Verdana字体适合所有的Windows系统；
Lucida适合UNIX用户
"宋体"适合中文简体用户;
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，： p, td, li{ font-size: 12px;}
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong{ font-style: italic; font-weight: normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
<div id="menubar"></div>
然后在样式表里这样定义：
#menubar{MARGIN: 0px;BACKGROUND:#FEFEFE;COLOR:#666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p{ text-align: right; margin-top: 10px;}
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
6.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px{color:#f60;font-size:14px;}
在页面中，用class="类别名"的方法调用：
<span class="14px">14px大小的字体</span>
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
7.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a: active，例如：
a:link{font-weight: bold;text-decoration: none;color:#c00;}
a:visited{font-weight: bold;text-decoration: none;color:#c30;}
a:hover{font-weight: bold;text-decoration: underline;color:#f60;}
a:active{font-weight: bold;text-decoration: none;color:#F90;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
CSS border(边框)样式写法总结
border属性：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法：border： border-width| border-style| border-color;
border-width：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。
border-top-width：设置元素上边框宽度
border-right-width：设置元素右边框宽度
border-bottom-width：设置元素下边框宽度
border-left-width：设置元素左边框宽度
border-style：边框样式。
border-top-style：设置元素上边框样式
border-right-style：设置元素右边框样式
border-bottom-style：设置元素下边框样式
border-left-style：设置元素左边框样式
属性值有：
none：无边框。
hidden：隐藏边框。对于表，hidden用于解决边框冲突。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双线边框。两条单线与其间隔的和等于指定的border-width值。
groove：3D凹槽边框。
ridge：3D垄状边框。
inset：凹边框。
outset：凸边框。
border-color：边框颜色。
1.1边框各样式效果图
1.2四条边颜色样式相同
1.3四条边颜色不同，样式相同
1.4四条边颜色相同，样式不同
1.5设置上边框宽度、样式、颜色
1.6设置右边框宽度、样式、颜色
1.7设置下边框宽度、样式、颜色
1.8设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _
OK，本文到此结束，希望对大家有所帮助。