CSS样式笔记.docx

CSS的基本语法：包括三部分：选择符、样式属性、属性值。（属性和值要用冒号隔开）如：p{color：#ff0000}属性的值由多个单词组成时，并且单词间有空格、那么需要给属性值加引号例如：p{ font-family: ”Courier New”}如果一个选择符有多个属性时，用分号将属性隔开。具有相同属性和值的选择符可以用逗号隔开：p，table{font-size:10px}选择符的形式：所有的HTML标签都可以作为选择符、类选择符、id选择符、包含选择符类选择符：用句点. 表示 .class{ font-size:16px}Id选择符：用 # 表示 #id{ font-size:16pt} pt表示点伪类：之所以称为“伪”是因为它制定的对象在文档中并不存在，它们指定的是元素的某种状态最广泛的伪类是链接的4个状态：a:link未链接状态、a:visited已访问链接状态a:active 鼠标单击与释放之间发生的事件a:hover 鼠标指针悬停在链接上的状态（比较常用）选择符的优先级：Id选择符最高、其次是类选择符!important语法主要用来提升样式规则的应用优先级用法p{ color : #ff0000 !important} 插入CSS样式表：外部样式表：是用link标记链接、link标记必须放在head区域内link rel=”stylesheet” type=”text/css” href=”样式表文件的地址”rel=”stylesheet”是指在HTML文件中使用的是外部样式表。type=”text/css”指该文件的类型是样式表文件。内部样式表：通过style标记也是定义在head标记内headstyle用来说明所要定义的样式!-- 是为了防止一些不支持CSS的浏览器，将style/style之间的CSS代码当成普通的字符串显示在网页中--/style/head嵌入样式表：即body标记中直接加入样式表的方法。基本语法：HTML标签 style=”属性：属性值; 属性：属性值;”导入外部样式表（某些浏览器不支持、所以不常用）一般放到head区域是指在style区域内引入一个外部样式表文件style type=”text/css”@import url(外部样式表文件地址); import后面的分号是不可以省略的/style以上四种方法、优先级最高的是嵌入样式表③其余三种是最近优先的原则。字体的设置：设置字体：font-family 可以一次定义多个字体p{ font-family:隶书,黑体, 仿宋}设置字号：font-size设置字体样式：font-style字体样式就是设置字体是否为斜体，其属性值有 normal 正常显示 ——默认italic 斜体显示[??t?l?k ]斜体的、斜字体oblique歪斜体显示 比斜体的倾斜角度更大[o?blik ] 倾斜的、非直角的设置字体加粗：font-weight 其属性值：normal正常粗细bold 粗体[bold]adj.明显的，醒目的；勇敢的bolder 加粗体lighter 细体number （100-900）九个级别数字越大字体越黑文本的精细排版：调整字符间距：letter-spacing[?l?t?][?spes??]可以用像素直接表示调整单词间距：word-spacing用来设置单词之间的空格距离添加文字修饰：text-decoration [?d?k??re??n]如设置下划线和删除线等的一些修饰其属性值：underline：下划线overline：上划线line-through：删除线blink ：添加文字闪烁效果只能在Netscape浏览器上正常显示设置文本排列方式：text-align left、right、center justify[?d??st??fa?]两端对齐设置段落缩进：text-indent默认值为不缩进缩进多少可以用像素直接表示调整行高：line-height 一般用像素或者是%表示转换英文大小写：text-transform[tr?ns?f?rm]vt.改变；改观；变换其属性值：uppercase：使所有单词的字母都大写lowercase：使所有字母都小写capitalize：每个单词的首字母大写[?k?p?tl:?a?z]颜色和背景：color：设置的颜色一般为标记内容的前景色。（背景和文字）设置背景颜色：background-color 用于网页的背景颜色、还可以设置文字的背景颜色。插入背景图片：background-image 用法：background-image：url（E:\image\1.jpg）插入背景附件：background-attachment 就是用来设置背景图片是否随着滚动条的移