初学者CSS基础知识
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Css样式语法由三部分构成:selector(选择器)、property(属性)和value(属性值) Css的3种将样式表加入到html方法:
1,将样式表嵌入到html文件的文件头中的嵌入样式表:
方法:
加入的css样式表
-- >
说明: 标签对用于说明所要定义的样式,type属性用于指定
tpye=”text/css”语句用于说明该段上css规则代码
有些浏览器不支持style元素,为了防止这种情况发生,可以将style元素中的内
容用html的注释符括起来。这样一来不支持styler的浏览器将不执行
这段内容。
2,将一个外部样式表链接到到html文件上的外部样式表
方法:
说明:href属性用于指定样式表的URL,也可以是绝对的URL
3,将一个外部样式表输入到html文件中的输入样式表(这种可以提高工作效率,节省服务器带宽)
@import url (外部链接样式表文件名.css);
说明:@import后面的分号必须有,并且必须输入外部样式表达文件的扩展名”.css”Css选择器:
1.HTML selector这种选择器指的是html标签,如p、b、div等
2.class selector 包括关联class selector和独立class selector.
用“html标签名.类名”定义的选择器称为关联class selector .
用“.类名”定义的的选择器称为独立class selector.
3.ID selector:使用html标签的ID属性定义的选择器就是ID selector.
如果在样式表中指定一个ID selector,需要在ID值前添加一个符号(#)
4.伪元素选择器.其格式为:html元素:伪元素{属性:值}.
常用的伪元素:A,active:是选中超链接时的状态;A,hover:是光标移动到超链接上的状态; A,visited:是访问过的超链接状态;
颜色设置:命名颜色、RGB颜色、十六进制颜色。
1. 命名颜色:直接用英文单词命名(但浏览器颜色命名没有统一标准)。
2RGB颜色:红、绿、蓝是3种基本色。其它色由这三种颜色按不同的比例叠加而成的。通常两种设置方法:百分比或数值。
3十六进制颜色:原理同RGB原理相同,设置红绿蓝3种基本色,只不过表达方式不同。
这种方法是将3种基本色的取值范围转换为00~FF,用两位十六进制数字表示,且必须按照格式#RRGGBB表示,即每种颜色值占两位,不足则补零。
URL:url用于指定引入外部文件的地址,有两种形式:绝对URL和相对URL.
文体的样式
字体:font-style:设置字体的风格。Normal(正常)、italic(斜体)、oblique(倾斜) Font-variant:设置字体的变形。Normal(正常)、small-caps(小型的大写字母字体)
Font-weight:字体加粗:100-900/normal/bold/bolder/lighter
Font-family:字体类型:黑体、宋体、隶书。默认为宋体。
文字的大小:xx-small x-small small medium(默认) large x-large xx-large
文字阴影颜色设置:text-shadow
下划线、顶画线、顶画线和删除线
{text-decoration:inherit(继承)、none(无文本修饰,默认设置)underline(为文体添加下画线)、overline(添加顶画线)、line-through(添加删除线)、blink(使文本闪烁)
使用下列语句可以使超链接不再有下划线:
A:link,A:visited,A:active{text-decoration:none}
对齐方式:{text-align:left/right/center/justify(两端对齐)}
注意:text-align是块级属性,只能用于
..
~
等标识符。不仅可以控制文体的水平对齐方式,也包括图片、影像资料的对齐方式。
垂直对齐:{vertical-align:inherit/top/bottom/text-top(相对文本顶对齐)/text-bottom(相对文本底对齐)/baseline(基准线对齐)、middle/sub(以下标的形式对齐)/super(以上标的形式显示)
行间距:{line-height:数值/inherit/normal}
字间距:{letter-spacing:数字/inherit/normal}
Css表格和表单效果
border-collapse:用于设置是否把表格边框合并为单一的边框,是可继承属性。参数值为separate和collapse。参数值为separate时,表格各部分的边框将分开显示。collapse 为默认参数值,表格边框会被合并为一个单一的边框。
border-spacing:用于设置分隔单元格边框的距离,指定分隔边框模型中单元格边框之间的距离。
caption-side:用于设置表格标题的位置。参数有top.bottom.left.right.
empty-cell:用于设置是否显示表格中的空单元格。参数为hide和show。如果显示,则绘制出单元格的边框和背景。除非border-collapse设置为separate,否则将忽略这个属性。
table-layout:用于设置显示单元、行和列的算法。参数值是automatic和fixed.分别表示表格为自动表格布局和固定表格布局,其中,automatic为默认参数值。
表格还可以分为三个部分:题头、正文和脚注。
thead:用于放置标题。tbody:用于放置表格数据本体。tfoot:用于放置表格的脚注。表格的边框样式:参数:none(无边框)、hidden(与“none”相同,不过应用于表时除外,对于表,hidden用于解决边框冲突)、dotted(定义点状边框。在大多数浏览器中呈现为实线)、solid(定义实线)、double:(定义双线。双线的宽度等于border-width的值)、proove(定义3D凹槽边框,效果取决于border-color的值)、ridge:定义3D垄状边框。效果取决于border-color的值)、inset:(定义3D inset边框,效果取决于border-color的值)、outset:(定义3D outset边框,效果取决于border-color的值)
css中所有元素的边框属性及其描述
border:用于把四个边的属性设置在一个声明中。
border-style:用于设置元素所有的边框的样式,或者单独地为各边设置边框样式
border-width:用于为所有边框设置宽度,或者单独地为各边设置边框样式
border-color:设置元素的所有边框中可见部分的颜色,或为4个边分别设置颜色
border-bottom:用于把下边框的所有属性设置到一个声明中
border-bottom-color:元素下边框的颜色,border-bottom-style:样式、border-bottom-width:宽度
border-left:把左边框所有的属性设置到一个声明中